有用!!在Vue中直接使用ref引用vue-echerts的组件,使用dom的setOption()方法更新series数据,解决数据更新显示不了的坑!!
这个是为了记录下解决的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节点:

let refName = “ref_dom”
let dom; // 用来存放当前页面对象的reName指定的Dom;
onMounted(()=>{
dom = getCurrentInstance().refs[refName]
})
以上是获取到了当前 echarts 所在的DOM;

在赋值的时候,不要直接在 v-chart 中赋值 option,可以使用

dom.setOption(lineOption,true)
以上可以解决 - vue-echarts 图表数据动态更新的问题。

Logo

前往低代码交流专区

更多推荐