echarts 获取多个实例同时触发dispatchAction无效

Lindsy.T
  • 23

开发条件

vue, v-chart

问题描述

需求:某个板块有多个饼图,columns及其取值均一致,用一个legend控制多个饼图某项的显示和隐藏。在存储的实例对象中取出各个饼图的实例,手动调用dispatchAction方法无效

clipboard.png

问题出现的环境背景及自己尝试过哪些方法

1、隐藏每个饼图的legend
2、手写一个legend,控制上图“偏瘦”,“正常”...等的显示和隐藏
3、在ve-Pie组件添加onReady事件,获取到每个饼图的echarts实例,并按照下列格式存储

instances: {
    '全校': Echarts实例,
    '一年级': Echarts实例,
    ...
}

4、点击legend时,使用实例手动调用

dispatchAction{name: , type: 'legendSelect|legendUnSelect'}方法

尝试过的方法:
4-1、当instances只存储一个实例时,调用dispatchAction有效 如

instances = Echarts实例
instances.dispatchAction{name: , type: 'legendSelect|legendUnSelect'}

相关代码

0 模板

<ve-pie
  :data="data"
  @ready="onPieReady($event, name)"/>
</ve-pie>

1 定义:
PieInstances: {}

2 存储实例(onReady):
// 每次图表渲染完成

onPieReady ($event, name) {
  this.PieInstances[name] = $event
}

3 点击legend的时候,手动调用legend显示、隐藏

let action = 'legendSelect|legendUnSelect' // 判断条件我省略了
for (let name in this.PieInstances) {
    if (!this.PieInstances.hasOwnProperty(name)) continue
    let item = this.PieInstances[name]
    console.log(item)
    item['_api'].dispatchAction({
      type: action,
      name: name
    })
}


你期待的结果是什么?实际看到的错误信息又是什么?

点击图例的时候,上述代码中的 3 手动调用legend显示、隐藏 没有效果,不报错,但是无法实现需求

回复
阅读 7.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏