echarts 如何实现同心圆效果

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


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


然后重新研究了一下嵌套环形图(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



  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值