echart学习心得

首先如何引入echarts框架在上一篇文章中已经说了，引入之后就可以绘制图形了，新手练习的时候是个柱状图，现在来画一下饼图。
首先来讲一下绘制出一个图形（无论是什么图形）都需要的几个要素：
1.首先是在head标签中引入echart库，就像下面这一张图的划红线出来的部分。

捕获.PNG

2.接下来为你的图形创建一块区域，让你的图形在其中显示出来。

捕获.PNG

3现在区域也创建好了，接下来就是图表的初始化

捕获.PNG

这里做一个进阶操作，也是易于理解的

var bingChart = echarts.init(document.getElementById('muu'));

这里面的bingChart，muu都是我自己定义的，初始化函数就这一句，其中bingChart放在后面说，muu是第二部创建那个div区域的ID(看我截图中的main)，这样在一页中有多个图表的话就能区分开了。
4.第四步，设置图表属性

捕获.PNG

这里详细讲一下这些个参数都是代表啥：

name:'访问来源',
//系列名称，如果启用legend，该值将被legend.data索引相关
type:'pie',
 //图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。
radius:'55%',
//这个应该是负责这个饼图占你所创建出来容纳它的div大小比例的，可以改一下参数自己体会一下
data:[
            {value:235,name:'视频广告'},
            {value:274,name:'联盟广告'},
            {value:310,name:'邮件营销'},
            {value:335,name:'直接访问'},
            {value:400,name:'搜索引擎'}
        ]
//饼图的数据，这些都是自己填充的，日后肯定要用到从excel或者从数据库中导入，先不管

5.第五步，参数都设置好了，就只剩下

bingChart.setOption(option);

放段完整代码体会一下，这段代码是饼图和柱状图的结合，很有益于日后画多个图表

    
    
    



    
//下面是柱状图