Vue中通过Echarts展示多个图表不显示

在Vue项目中，通常会使用Echarts来实现图表的展示。那么如果一个项目中有多个页面应用到了图表，我们需要注意哪些问题呢。

1.Echarts使用

定义区域来展示图表时，通常会绑定id来实现，代码如下：

<template>
     <div
       id="chart"
       class="chart"
       style="
          width: 95%;
          height: 85%;
          margin: auto;
        "
    ></div>
</template>

1.多个页面应用Echarts

多个页面应用图表时，通常会改变id来实现图表展示。但是在页面来回切换时，会发现某个页面的图表为空白，如图所示：

 我们需要注意的是通过id来绑定echarts图表是没问题的，但是涉及多个图表时id绑定便会出现上述问题，查看控制台时会发现这样一个警告：

 这是由于dom上已经初始化了一个图表实例，并且如果你的图表中定义了点击方法，多次覆盖后，点击方法会触发多次。更新页面重复加载图表便会出现这类警告。

3.解决办法

解决这个问题的方法有很多，可以在多个页面展示图表时不使用id来绑定，替换为ref，具体的实现步骤可查看其他文章。

谢谢支持！！！