多tab页切换时，后打开的tab页，对应位置图表不显示

my-sunny commented 5 years ago

问题发生背景：比如有两个tab页面，A和B，A页面里由上到下有三个echarts图，分别是折线图、饼图、饼图； B页面里有一个折线图，A 和B页面最上方都是折线图；

问题展现：在如上情况下，切换A、B tab页面时，先打开的页面echarts图显示正常，后打开的页面，折线图不显示，在切换回来，发现第一个打开的页面，折线图也消失了；

把A页面里的echarts图对换位置，将折线图放到最下方，再次切换tab页面发现一切展示正常……

问题分析：经过代码调试，发现：后打开的tab页面，折线图并没有加载echarts组件，其他类型图均正常加载，并没有报错信息，也没有提示告警信息……

哪位大神遇到过或知道这是什么原因引起的，求解释啊！谢谢！附如下4张图： A 页面先打开：

B页面后打开：

B页面先打开：

A页面后打开：

F-loat commented 5 years ago

关键代码贴一部分

my-sunny commented 5 years ago

@F-loat 部分代码如下，谢谢！封装echarts组件代码：

<template>
    <mpvue-echarts :echarts="echarts" :onInit="initChart" :canvasId="chartId" throttleTouch=True />
</template>
<script>
import mpvueEcharts from "mpvue-echarts";  //第三方mpvue-echarts组件
import * as echarts from "../../static/js/cusEchart.min.js";//官方echarts的js脚本
//存放echarts {echarts_id:echarts,……}
let ehartsArr = {};
export default {
  components: {
    mpvueEcharts
  },
  data() { return {  echarts,  }; },
  methods: {
    initChart(canvas, width, height) {
      let chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(chart);
      chart.setOption(this.opt, true);
      ehartsArr[this.chartId] = chart;
      return chart; 
    },
  },
  watch:{
    //刷新数据
    chartRedraw(val, newval){
        let chart = ehartsArr[this.chartId]
        chart.setOption(this.opt, true);
    }
  },
  props: ["opt","chartId","chartRedraw"],
};
</script>

实际调用代码截图：

echarts数据是异步加载的，组件参数说明: opt：echarts数据option； chartId：echarts的ID； chartRedraw：监控参数，判断是否需要刷新echarts；

F-loat / mpvue-echarts

多tab页切换时，后打开的tab页，对应位置图表不显示 #53