Vue渲染echarts图标时候，宽度只显示100px的解决办法

出现这个问题的关键在于JS方法初始化的时候，无法获取到父元素的宽度，所以默认显示100px

解决方法

Vue为我们提供了$nextTick来处理这个问题，在下次DOM更新循环结束后再去执行延迟回调，数据更新后，立即使用这个方法，获取更新后的dom。

一下代码中加入了当图标无数据的时候，一张暂无数据的png作为占位符

<template>
  <div class="chart_content">
    <!-- 图表 -->
    <div v-show="isShow == 1" class="chart_display">
      <div :ref="chartObj.type" class="chart_show" />
    </div>
    <div v-show="isShow == 0" class="chart_no_data">
      <img src="../images/4041.png" style="width: 800px; height: 600px" />
    </div>
  </div>
</template>

<script>
export default {
  name: "ChartBasicLine",
  props: {
    chartObj: {
      type: Object,
    },
  },
  watch: {
    chartObj: {
      // 监控数据的变化，并刷新图表
      handler(newVal) {
        this.chartObj = newVal;
        this.showChart();
      },
      deep: true,
    },
  },
  data() {
    return {
      isShow: 0,
      option: {
        title: {
          text: "各小组日产量统计表",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["小组一", "小组二", "小组三", "小组四", "小组五"],
        },
        grid: {},
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [],
      },
    };
  },
  mounted() {
    console.log(this.isShow);
    this.showChart();
  },
  methods: {
    showChart() {
      console.log(this.chartObj.xData.length, "chartobj");
      if (this.chartObj.xData.length == 0) {
        return;
      }
      // 展示图表
      this.isShow = 1;
      // 数据更新后，然后再渲染图表
      this.$nextTick(() => {
        this.option.xAxis.data = this.chartObj.xData;
        this.option.series = this.chartObj.yData;
        //检测是否已经存在echarts实例，如果不存在，则不再去初始化
        let myChart = this.$echarts.getInstanceByDom(
          this.$refs[this.chartObj.type]
        );
        if (myChart == null) {
          myChart = this.$echarts.init(this.$refs[this.chartObj.type]);
        }
        myChart.setOption(this.option);
        // const myChart = this.$echarts.init(this.$refs[this.chartObj.type]);
        // myChart.setOption(this.option);
      });
    },
  },
};
</script>