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

饼图

b0e1dbe60c5742e03216956bd197862.png

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

<script>
    option = { //给每个饼图模块添加颜色
        color: ['#7bca61', '#66cf9b', '#68d1da', '#61c1e6', '#7c9de7', '#f4cb4d'],
        series: [ //添加一个模型
            {
                name: '访问来源',
                type: 'pie', //模型的类型（饼图，柱状图等）
                radius: '55%',//半径
                clockwise: false,//饼图是否顺时针排列
                center: ['50%', '50%'],//圆心的位置
                data: [{
                        value: 5,
                        name: '类型1'
                    },
                    {
                        value: 8,
                        name: '类型2'
                    },
                    {
                        value: 6,
                        name: '类型3'
                    },
                    {
                        value: 4,
                        name: '类型6'
                    },
                    {
                        value: 5,
                        name: '类型5'
                    },
                    {
                        value: 7,
                        name: '类型4'
                    }
                ],
                itemStyle: {//鼠标移到图标上的效果
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            {
                color: '#fff',
                type: 'pie',
                radius: ['57%', '58%'],//异性的饼图的内半径与外半径
                data: [{
                        value: 5,
                        name: ''
                    }

                ]
            }
        ]
    };
</script>

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