echarts 如何实现同心圆效果

来源：互联网发布：mac如何用搜狗输入法编辑：程序博客网时间：2024/06/05 04:50

在最近的项目中，客户希望实现同心圆，和官网上的饼图略有区别。

要求：每层只有一个数据，而且每个环之间没有间隙，最内层圆为实心。

然后重新研究了一下嵌套环形图(http://echarts.baidu.com/demo.html#pie-nest)。

app.title = '嵌套环形图';option = {    tooltip: {        trigger: 'item',        formatter: "{a} 
{b}: {c} ({d}%)"    },    legend: {        orient: 'vertical',        x: 'left',        data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']    },    series: [        //数组的元素根据下标从里向外排布，        {            name:'访问来源',            type:'pie',            selectedMode: 'single',            radius: [0, '30%'],               //表示文本显示在环上            label: {                normal: {                    position: 'inner'                }            },            //指引线，如果show属性为true，c则有一个指引线直到文本（length设置线的长度）            labelLine: {                normal: {                    show: false                }            },            data:[                              {value:1548, name:'搜索引擎'}            ]        },        {            name:'访问来源',            type:'pie',            radius: [30, '30%'],              labelLine: {                normal: {                    show: true,                                        length:40                }            },            data:[                          {value:1048, name:'百度'}                         ]        },{            name:'访问来源',            type:'pie',            radius: [60, '30%'],                        data:[                          {value:1048, name:'营销广告'}                         ]        }    ]};empty

阅读全文

0 0