销毁与重新渲染ecahrts实例

官网链接

<template>
  <div>
    <div class="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "",
  props: {
    //父组件传进来的控制高度
    height: {
      type: String,
      default: "300px",
    },
    width: {
      type: String,
      default: "500px",
    },
  },
  data() {
    return {
      myChart: null,
    };
  },
  //   在组件被卸载的时候销毁当前图表
  beforeDestroy() {
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose(); //在组件销毁的时候，调用chart.dispose()销毁图表实例
  },
  //   当组件重新挂载的时候再次初始化图表实例
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(
        document.getElementsByClassName("main")[0], //实例容器，一般是一个具有高宽的 DIV 元素
        null, //应用的主题,如果不指定主题，也需在传入opts前先传入null
        {
          //option配置对象，设置当前echarts实例的宽高为600px,这里可以设置string也可以设置为number
          height: "600px",
        }
      );
      // 绘制图表
      this.myChart.setOption({
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      // 当浏览器宽度改变的时候，图表的大小也跟着改变
      window.onresize = () => {
        this.myChart.resize();
      };
    },
  },
};
</script>