【踩坑日记】echarts组件渲染不正确的问题与解决方法

记录一个自己在开发过程中引用echarts，渲染不正常的问题与解决方法

需求

有两个tab页，点击一个tab就显示这个tab的数据并展示这个数据的echats图表
如图所示：
echarts实现：
这里就需要进行切换，但是问题在于有的折线图可能是一条也有可能是多条，并且这个折线图代表的含义也不同，这里就不得不多写几个options配置对象，然后做切换：点击哪个tab就展示哪个tab下的配置对象。

问题出现

这个时候你就会发现，有些配置对象，明明就只写了一条折线，但是切换过去时，echarts会渲染出多条折线。

这个配置项的data只有一条但是显示出来两条折线
如图所示：

打印数据，打断点发现数据都是正确拿到，数据并没有问题。这时就比较迷糊了，明明数据是对的，但是为啥就渲染不出正常的echats图表呢？

百度了一堆解决方法，用clear,destroy,事件去销毁echats,试完还是没效果， 得~ 这问题就没办法解决了吗？想了十分钟突然想到之前有一个类似的情况，组件内赋值，也是切换的时候，我并没有给其中一个组件赋值，但是渲染时，竟然显示上去了。打印这个组件的变量也是没有获得值，然后打断点，值也是undefined。但是就是这么神奇，组件上面就是显示有值。哈哈 跑题了 ~ 但是这个echarts的解决方法确实就是跟这个一样。

解决方法

1，首先确实是要排除不是数据问题所以我渲染的数据都做了判断。
2，给每个配置对象都分开渲染，不使用同一个echats容器。
3，给每个echarts容器都加上key，这个key要保证唯一性。

代码如下：

<div class="chart">
  <chart-block key="1" v-if="activeTab == '1'" ref="chart1"></chart-block>
  <chart-block key="2" v-else ref="chart2"></chart-block>
</div>

解决！！！

解决原理

使用key可以确保 Vue.js 在重新渲染组件时会创建一个新的实例，而不会重用之前的实例。当更改 key 属性时，Vue.js 将视之为组件已被销毁，然后重新创建新的组件实例。这可以解决一些可能出现在组件重用期间的状态问题。

上面的两种情况下，通过在组件上设置不同的 key 值，您确保了在切换 tab 时，echarts 组件会被销毁并重新创建，从而解决了渲染问题。