echarts实例setOption的一个坑

  • Post author:
  • Post category:其他


先看一下官方对echartsInstance. setOption的一个解释

在这里插入图片描述


设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过 setOption 完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

今天做项目时,根据业务需要,同一个echarts实例根据不同条件查询出来的结果展示响应的数据,例如条件

type:'1'

时,得到结果

[{a:1,b:2,c:3},{a:2,b:1,c:3},{a:3,b:1,c:2}]

,当条件

type:'2'

时,得到结果

[{a:1,b:2,c:3,d:4},{a:2,b:1,c:3,d:5},{a:3,b:1,c:2,d:6}]

。我们发现,

type

选择2时,结果回比选择1时多一个结果字段

d

,两次结果都是用同一个echarts实例进行展示。

当第一次使用

type:2

查询并展示,第二次使用

type:1

查询并展示,就会导致第一次展示的图表中的

d

数据还存在于第二次展示的图表中,那是因为

echarts实例的setOption方法第二个参数notMerge默认为false,表示跟之前设置的 option 进行合并。

从而导致出现我上边遇到的坑。

解决方案:

将第二个参数设置为true

myEcharts.setOption(option,true);



版权声明:本文为qq_45268602原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。