echarts嵌套饼图自动动画_Echarts 嵌套饼图实现,内环点击控制外环显示

本文介绍了如何使用Echarts实现嵌套饼图,并通过内环点击动态切换外环显示。通过监听点击事件,根据seriesIndex和dataIndex动态修改option内容,避免了创建多个option的资源浪费。在点击内环时,清空图形数据,更新外环数据并重新设置option,确保选中效果正确。
摘要由CSDN通过智能技术生成

Echarts有交互事件,但是如果用其进行图形变更,恐怕就只有重新修改配置了、

如图,我想要实现,内圈的数据控制外圈的图形,当点击内环的某一块时,就可以实现,更改外环的目的。

起初我想能不能直接修改option里 series的data数据达到修改的外圈图形的效果,可惜没那么那么容易,我暂时想到的修改实现方法,设置option的,达到修改外圈的目的。废话不多说,上代码:

var dataA=[];

var option = {

tooltip : {

trigger: 'item',

formatter: "{a}
{b} : {c} ({d}%)"

},

legend: {

orient : 'vertical',

x : 'left',

data:['直达','营销广告','搜索引擎','邮件营销','联盟广告','视频广告','百度','谷歌','必应','其他']

},

toolbox: {

show : true,

feature : {

mark : {show: true},

dataView : {show: true, readOnly: false},

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值