echarts饼状图开发过程中，为了增加饼状图多样性，会有不同的需求，今天的饼状图是圆角，这里需要使用第三方echarts插件实现。

插件地址

echarts饼状图设置为圆角

参数

通过参数roundCap: 1来实现，1为逆时针，2为顺时针，不填写则默认。

option = {
tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
    orient: 'vertical',
    left: 10,
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},

color: ["#Fb4035", "#dbdce5", "#162c7a", "#53b6be"], 
series: [{
    name: '访问来源',
    type: 'pie',
    radius: ['50%', '80%'],
    avoidLabelOverlap: false,
    label: {
        show: false,
        position: 'center'
    },
    emphasis: {
        label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold'
        }
    },
    labelLine: {
        show: false
    },
    data: [{
            value: 205,
            name: '直接访问'
        },
        {
            value: 310,
            name: '邮件营销'
        },
        {
            value: 234,
            name: '联盟广告'
        },
        {
            value: 135,
            name: '视频广告学习相'
        },
        {
            value: 400,
            name: '搜索引擎'
        }
    ],
    roundCap: 1 //可选项为1和2，不填则采用原有拼接方式
}]

vue2项目使用

通过上面的github地址下载echarts.simple.min.js，在index.html中引入，然后直接使用即可。

<script src="js/echarts.simple.min.js"></script>

其他说明

echarts.simple.min.js 已经包含了echarts功能，不能和import * as echarts from 'echarts'共用，如果要使用echarts.simple.min.js组件内就不要再引入其他版本的echarts了.