vue+echarts图表编写模版(浏览器宽度自适应/及时销毁组件)

在此模版基础上可在两处编写代码，如无交互，可将click交互模块代码删除

<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
export default {
  mounted() {
    this.init();
  },
  methods: {
    // 初始化数据
    init() {
      this.paintChart();
    },
    // 绘制图表
    paintChart() {
      let chartDom = this.$echarts.init(this.$refs.chart);
      let option = {
        // 在此处编写核心部分代码
      };
      chartDom && chartDom.setOption(option);
      chartDom.on("click", (param) => {
        // 在此处编写点击交互代码
      });

      // *根据窗口大小变化resize重绘图表
      let sizeFun = () => {
        chartDom.resize();
      };
      window.addEventListener("resize", sizeFun);
     
      // *挂载vue的钩子函数beforeDestroy，在组件销毁前销毁组件
      this.$once("hook:beforeDestroy", function () {
        this.$echarts.dispose(chartDom);
      });
    },
  },
};
</script>

<style lang="less">
// *需指定高度，否则图表无法渲染
.chart {
  height: 400px;
  width: 100%;
}
</style>