(已解决)echarts在vue中路由跳转后图表无法出现，附源码

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、无法出现图表的原因

1. 如果未实例化则进行实例化过程, 在此期间会在div容器生成一个_echarts_instance_属性, 该属性值其实就是当前echarts的ID, 然后进行后边的渲染操作.
2. 当页面跳转或者切换时，echarts会根据该属性进行判断是否重新进行渲染图表， echarts会先匹配改div容器上的_echarts_instance_属性值是否与实例对象的ID一样，如果一样，那么echarts将无法进行重新渲染。反之亦然。
3. 根据此特性进行入手，将该属性值设置为空。在echarts匹配的过程中重新渲染图表。

二、解决办法

第一种

在图表渲染完成之后，将该div的_echarts_instance_属性设置为空，让其无法匹配从而进行重新渲染。

document.getElementById('main').setAttribute('_echarts_instance_', '');

代码如下：

<template>
  <div class="home">
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Home',
  components: {
  },
  mounted () {

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
    document.getElementById('main').setAttribute('_echarts_instance_', '');
  },
}
</script>
<style lang="scss" scoped>
#main {
  width: 600px;
  height: 600px;
}
</style>

第二种

使用动态ID,实质上的原理跟第一种的办法一样。

<div class="echarts" :id="main"></div>

 this.main = "main" + parseInt(Math.random() * 100)

代码如下：

<template>
  <div class="home">
    <div
      :id="main"
      class="main"
    ></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Home',
  components: {
  },
  data () {
    return {
      main: ""
    }
  },
  mounted () {
    this.main = "main" + parseInt(Math.random() * 100)
    this.$nextTick(() => {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(this.main));
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    })
  },
}
</script>
<style lang="scss" scoped>
.main {
  width: 600px;
  height: 600px;
}
</style>

---

总结

个人的理解，如有出入欢迎评论留言喔！！！