Vue中echarts深度监听实现页面大小和数据变化图表实时更新

 <div style="width: 100%; height: 100%" class="echarts" ref="chart"></div>
  </div>

  props: {
    chartData: { type: Object }, // 接收父组件传来的数据
  },
  watch: {
    chartData: {
      handler(val, oldVal) {
        if (val && JSON.stringify(val) != "{}") {
          this.$nextTick(() => {
            this.setOption();
          });
        }
      },
      deep: true,
    },
    // 监听选项变化，重绘图表
    index() {
      this.setOption();
    },
    listenComponentState: function (val, oldval) {
      // console.log(val, this.$refs.echartsCommon.offsetWidth, this.$refs.chart)
      // let width = this.$refs.echartsCommon.offsetWidth
    },
  },
  computed: {
    listenComponentState() {
      return this.$store.state.globalData.clickMenu;
    },
  },
  data() {
    return {
      active: 0,
      charts: null,
      // clickMenu: this.$store.state.clickMenu
    };
  },
  mounted() {
    this.drawCharts();
    // this.getBar();
    window.onresize = () => {
      // this.charts.resize()
      this.setOption();
    };
  },
  methods: {
    setOption() {
      const option = this.chartData;
      this.charts.setOption(option, true);
      window.addEventListener("resize", this.charts.resize);
    },
    // 绘制图表
    drawCharts() {
      this.$nextTick(() => {
        this.charts = this.$echarts.init(this.$refs.chart);
        this.setOption();
        var _this = this;
        // 点击柱形图事件
       // this.charts.on("click", (params) => {
        //  _this.$emit("getBar", params.name);
       // });
      });
    },
  },
};

.echartsCommon {
  height: 100%;
  .echarts {
    div {
      width: 100%;
    }
  }
}