echarts使用--饼图

在学校生活、个人项目与工作中的前端最大的区别，不再是拿来组件填上就好~~~需要根据产品的需求对一些组件进行个性化的修改，而echarts在官方文档中就定义了一些修改的方式。
在echarts官网中的配置手册http://echarts.baidu.com/option.html#title具体的介绍了每个属性的作用。我以工作中的例子简单介绍图标的制作
echarts社区源码：http://gallery.echartsjs.com/editor.html?c=xrkvOOdid7

饼图

b0e1dbe60c5742e03216956bd197862.png

因为产品的设计需求，需在饼图中添一个外环，我选择了一个异性白色饼图放在外环完成此需求。具体配置看

title : {//添加标题
    text: '某站点用户访问来源',
    subtext: '纯属虚构',
    x:'center'
},
tooltip : {//提示框组件。
    trigger: 'item',
    formatter: "{a} 
{b} : {c} ({d}%)"
},
legend: {//图例组件展现了不同系列的标记，颜色和名字。可以通过点击图例控制哪些系列是否显示。
    orient: 'vertical',
    left: 'left',
    data: ['类型1','类型2','类型3','类型4','类型5','类型6',]
},