[游戏开发]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 图表数据动态更新的问题。