饼图分割echarts 饼配置项内容和展示

饼图分割的一个方案

      const data = [{
        value: 335,
        name: '直接访问'
    },
    {
        value: 310,
        name: '邮件营销'
    },
    {
        value: 234,
        name: '联盟广告'
    },
    {
        value: 135,
        name: '视频广告'
    },
    {
        value: 1548,
        name: '搜索引擎'
    }
];
app.title = '饼图分割';

const offsetData = [];
const randomColor = () => {
    return '#' + Math.round(Math.random() * 0xFFFFFF).toString(16);
}

data.forEach(d => {
    const offsetItem = {
        name: 'border',
        value: 0,
        itemStyle: {
            color: 'transparent'
        }
    };
    offsetData.push({
            name: d.name,
            value: d.value,
            itemStyle: {
                borderWidth: 1,
                borderColor: '#0f0',
                color: randomColor()
            }
        },
        offsetItem
    );
});

// 图例选择可能要自己重新setoption了
option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        minAngle: 5,
        label: {
            normal: {
                show: false,
                position: 'center'
            },
            emphasis: {
                show: true,
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data: offsetData
    }]
};