vue echart

<template>
  <div id="myChart" :style="{ height: '400px' }"></div>
</template>

<script>
export default {
  data() {
    return {
      data1: [120, 132, 101, 134, 90, 230, 210],
      data2: [220, 182, 191, 234, 290, 330, 410],
    };
  },
  mounted() {
    this.drawLine();
    window.addEventListener("resize", this.resize);
    this.demo();
  },
  destroyed() {
    window.removeEventListener("resize", this.resize);
  },
  methods: {
    resize() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.resize();
    },
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      var color = ["#19D672", "#FD517D"];
      // 绘制图表
      myChart.setOption({
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["计划业绩目标", "实际业绩目标"],
          right: 10,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            // saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "计划业绩目标",
            type: "line",
            stack: "总量",
            label: {
              show: true,
              position: "top",
            },
            data: this.data1,
          },
          {
            name: "实际业绩目标",
            type: "line",
            stack: "总量",
            label: {
              show: true,
              position: "top",
            },
            data: this.data2,
          },
        ],
      });
    },

    demo() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      let a = [111, 222, 333, 444, 555, 666, 777];
      let b = [100, 200, 300, 400, 500, 600, 700];

      let timer = setInterval(() => {
        for (let i = 0; i < 7; i++) {
          a[i] = (800 * Math.random()).toFixed(2);
          b[i] = (800 * Math.random()).toFixed(2);
        }
        //未来让加载动画效果明显,这里加入了setTimeout,实现2s延时
        myChart.hideLoading(); //没有加载出来隐藏加载动画
        myChart.setOption({
          //动画的配置
          series: [
            {
              name: "计划业绩目标",
              type: "line",
              stack: "总量",
              label: {
                show: true,
                position: "top",
              },
              data: a,
            },
            {
              name: "实际业绩目标",
              type: "line",
              stack: "总量",
              label: {
                show: true,
                position: "top",
              },
              data: b,
            },
          ],
        });
      }, 2000);
      this.$once("hook:beforeDestroy", function () {
        clearInterval(timer);
        timer = null;
      });
    },
  },
};
</script>