Echarts 数据监听

<template>
  <div class="history">
        <div id="popup"></div>
  </div>
</template>

import * as echarts from "echarts";
export default {
  data() {
    return {
      list: null,
      xAxis: [],
      q: [],
      option: {
        legend: {
          type: "plain",
          width: "auto",
          height: "auto",
          itemWidth: 20, //图例标记的图形宽度
          itemHeight: 0, //图例标记的图形高度
          right: "4%",
          top: 0,
          textStyle: {
            color: "#F0EAF0",
          },
          data: ["厂区", "省控"],
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          top: "13%",
          left: "3%",
          right: "4%",
          bottom: 0,
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              show: true,
              rotate: 45,//x轴数据文字倾斜
              textStyle: {
                color: "#B2CFF4",
              },
                //x轴数据文字换行
              formatter: function (params) {
                var newParamsName = ""; // 最终拼接成的字符串
                var paramsNameNumber = params.length; // 实际标签的个数
                var provideNumber = 10; // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ""; // 表示每一次截取的字符串
                    var start = p * provideNumber; // 开始截取的位置
                    var end = start + provideNumber; // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr; // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params;
                }
                //将最终的字符串返回
                return newParamsName;
              },
            },
            axisLine: {
              lineStyle: {
                color: "#01F5F9",
              },
            },
            data: this.xAxis,
            // data: this.list.time,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#B2CFF4",
              },
            },
          },
        ],
        series: [
          {
            name: "省控",
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            itemStyle: {
              normal: {
                color: "#E0A80A",
                lineStyle: {
                  color: "#E0A80A",
                },
              },
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(224,168,10,0.6)",
                },
                {
                  offset: 1,
                  color: "rgba(224,168,10,0.1)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: this.q,
            // data: this.list.gov_pm10,
          },
          {
            name: "厂区",
            type: "line",
            stack: "总量",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            itemStyle: {
              normal: {
                color: "#68FAFF",
                lineStyle: {
                  color: "#68FAFF",
                },
              },
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(104,250,255,0.6)",
                },
                {
                  offset: 1,
                  color: "rgba(104,250,255,0.1)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: this.q,
            // data: this.list.factory_pm10,
          },
        ],
      },
    };
  },
  watch: {
    list: {
      immediate: false,
      handler: function () {
        this.$nextTick(() => {
          this.initOption();
        });
      },
    },
  },

  mounted() {
    for (var i = 0; i <= 30; i++) {
      this.xAxis.push(i);
      this.q.push(0);
    }
    this.initOption();
  },
  methods: {
    initOption() {
      if (this.myChart) {
        this.myChart.clear();
      }
      this.myChart = echarts.init(document.getElementById("popup"));
      if (this.list) {
        console.log("22222222");
        this.option.series[0].data = this.list.gov_pm25;
        this.option.series[1].data = this.list.factory_pm25;
        this.option.xAxis[0].data = this.list.time;
        console.log(this.list.time);
        this.option.series[0].itemStyle.normal.lineStyle.width = 2;
        this.option.series[0].areaStyle.opacity = 0.8;
        this.option.series[1].itemStyle.normal.lineStyle.width = 2;
        this.option.series[1].areaStyle.opacity = 0.8;
        this.myChart.setOption(this.option);
        window.addEventListener("resize", this.handleResize);
      } else {
        this.option.series[0].itemStyle.normal.lineStyle.width = 0;
        this.option.series[0].areaStyle.opacity = 0;
        this.option.series[1].itemStyle.normal.lineStyle.width = 0;
        this.option.series[1].areaStyle.opacity = 0;
        this.option.series[0].data = this.q;
        this.option.series[1].data = this.q;
        this.option.xAxis.data = this.xAxis;
        this.myChart.setOption(this.option);
        window.addEventListener("resize", this.handleResize);
      }
    },
    handleResize() {
      this.myChart.resize();
    },
    closepopup() {
      this.$parent._data.ishistory = false;
    },
    query() {
      // console.log(this.value[0]);
      let a = this.value[0] + " " + "00:00:00";
      let b = this.value[1] + " " + "23:59:59";
      let params = JSON.stringify({
        st_time: a,
        et_time: b,
        type_pm: 1,
        type_range: 0,
      });
      historytData(params)
        .then((res) => {
          console.log(res, "res");
          if (res.data.code == 0) {
            this.list = res.data.data;
          }
        })
        .catch((ret) => {
          console.log(ret, "ret");
        });
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
};