vue-echarts:动态赋值series,更新options

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

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值