这个是为了记录下解决的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 图表数据动态更新的问题。

Logo

前往低代码交流专区

更多推荐