Vue 项目使用 ECharts 切换页面回来图表不显示

问题描述

问题1：

• 解决方案对应方案1
• 在 Vue 项目中使用 ECharts 时，一开始图表能渲染出来，当切换到其他页面再回来的时候，图表就不显示了

问题2：

• 解决方案对应方案2
• Echarts 图表在子组件中，父组件通过传递数据给子组件的 Echarts 进行渲染，导致图表不显示

问题3：

• 解决方案对应方案3
• 在同一个页面的 Echarts 图表切换回来不显示

解决方案：

方案1：

• 手动删除 Echarts 默认生成的 _echarts_instance_ 属性
  
• 删除

const domMap = document.getElementById("map_chart");
// 清除Echarts默认添加的属性
domMap.removeAttribute("_echarts_instance_");
let myChart = this.$echarts.init(domMap);
myChart.setOption({})

方案2：

• 在父组件更新的数据传递到子组件后，在子组件使用 watch 监听数据的变化，如果数据发生变化再执行渲染

// 父组件使用子组件
<PieChart :data="subStationPieChartData" :id="'pie_chart1'" />

// 子组件监听数据变化
  props: {
    id: {
      type: String,
      require: true,
      default() {
        return "pie_chart";
      },
    },
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  watch: {
    id(newVal) {
      // console.log("newVal=>", newVal);
      this.getPieChart(newVal, this.data);
    },
    data(newVal) {
      // console.log("newVal=>", newVal);
      this.getPieChart(this.id, newVal);
    },
  },
  methods: {
    getPieChart(id, data) {
      let pieChartData = JSON.parse(JSON.stringify(data));
      // console.log("pieChartData=>", pieChartData);
      const pieDom = document.getElementById(id);
      this.$echarts.init(pieDom).setOption({})
  }

方案3：

• 使用 nextTick()
• 使用 setTimeout(() => {},500)

// 请求数据的方法
getData() {
  this.$request.get("/getFacCount", {}, { mock: false }).then((data) => {
    const res = data.data;
    // console.log("二次设备接入统计图=>", res);
    this.$nextTick(() => {
      this.getBarChart()
    })
    setTimeout(() => {
      this.getBarChart()
    },500)
}

// 执行渲染图表的方法
getBarChart() {
  const barChart = document.getElementById("barchart");
  this.$echarts.init(domChart).setOption({})
}