vue-echarts:动态赋值series,更新options
这个是为了记录下解决的bug,问题场景:初次请求数据:国家参数为 5 个,这个时候,筛选国家列表数据,当筛选的数据少于 5 个时,比如筛选了2个国家,则多出来的3条线会重合最后一条数据的线上,在点击图例“不显示该条数据”的时候,还是会显示剩余的三条线;当筛选的数据多于 5 个,这个时候,筛选国家,会出现最少两个数据 的 折线和图例对不上,出现互换的情况。解析:出现这样的问题原本的猜测是 颜色设置有
这个是为了记录下解决的bug,问题场景:
初次请求数据:国家参数为 5 个,这个时候,筛选国家列表数据,
当筛选的数据少于 5 个时,比如筛选了2个国家,则多出来的3条线会重合最后一条数据的线上,在点击图例“不显示该条数据”的时候,还是会显示剩余的三条线;
当筛选的数据多于 5 个,这个时候,筛选国家,会出现最少两个数据 的 折线和图例对不上,出现互换的情况。
解析:
出现这样的问题原本的猜测是 颜色设置有问题,考虑的解决方案是:
1. 在动态赋值 series 时,给每个对象添加 color 属性;
2. 清空 line-option
解决:
最终的解决是,利用echarts 的 setOption() 方法;
需要说明下,虽然项目里用的是:vue-echarts,且vue-echarts 的option会自动更新,但是这样会有一个好也不好的地方:
- 好的是,直接进行数据更新,不需要做额外的操作,比如setOption ;
- 不好的是,直接给值,就没办法看到图表的 animation 。
所以,在解决的时候,可以先找到 当前echarts对象,在Vue3.0中,由于一开始已经注册过div,就是说divDOM已经被渲染过了,可以直接取用,而不用再使用 document.getElementById来获取。
Vue3.0 中 获取到某个DOM节点:
<v-chart :ref="refName" />
let refName = "ref_dom"
let dom; // 用来存放当前页面对象的reName指定的Dom;
onMounted(()=>{
dom = getCurrentInstance().refs[refName]
})
以上是获取到了当前 echarts 所在的DOM;
在赋值的时候,不要直接在 v-chart 中赋值 option,可以使用
dom.setOption(lineOption,true)
以上可以解决 - vue-echarts 图表数据动态更新的问题。
更多推荐
所有评论(0)