Echart基础使用

一:Echart基础使用

  1. 快速使用:

使用手册网址:

https://echarts.baidu.com/echarts2/doc/start.html

2,你所需要只有五步:

   

 <body>
    <!-- 第一步为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- 第二步ECharts所有文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
    <script type="text/javascript">
        // 第三部基于准备好的dom,初始化echarts图表
        var myChart = echarts.init(document.getElementById('main')); 
        //第四部参数设置(这是最重要的一步)
        var option = {
            tooltip: {
                show: true
            },
            legend: {
                data:['销量']
            },
            xAxis : [  {

                    type : 'category',

                    data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                } ],
            yAxis : [{
                    type : 'value'
                }],
            series : [  {

                    "name":"销量",

                    "type":"bar",

                    "data":[5, 20, 40, 10, 10, 20]
                } ]
        };
        // 第五步为echarts对象加载数据
        myChart.setOption(option); 
</script>
</body>

3,扩展其他图形

我们每次要修改的部分只有Option参数,获取参数得方式如下:

 

 

https://echarts.baidu.com/echarts2/doc/example.html网址里选去自己需

要的实例模式图拷贝里面的option数据替换最上面案例中的Option即可。

 

 

到这里已经可以使用全部的Echart样式在网页上显示固定数据了。(注意是固定)

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值