echarts折线图的线

img

请问哪位知道这个线为什么对不上啊刚刚玩没太明白

import "echarts/lib/chart/line"; // 引入需要使用的图表类型
import "echarts/lib/component/title"; // 引入需要使用的组件
import "echarts/lib/component/tooltip";
import axios from "axios";
import * as echarts from "echarts";

function getDatesInRange(startDate, endDate) {
  const dates = [];
  const current = new Date(startDate);

  while (current <= endDate) {
    dates.push(current.toLocaleDateString("zh-CN"));
    current.setDate(current.getDate() + 1);
  }

  return dates;
}

export default {
  data() {
    return {
      host: "http://127.0.0.1:5000",
      loading: false,
      data_list: [], // 总数据列表
      value: "", // 下拉列表的值
      options: [
        // 下拉列表数据
        {
          value: "day",
          label: "白天",
        },
        {
          value: "night",
          label: "夜晚",
        },
      ],
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      value2: "",
    };
  },
  mounted() {
    this.initializeChart();
    this.cbtn();
  },
  methods: {
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    initializeChart() {
      const chartDom = document.getElementById("chart");
      const myChart = echarts.init(chartDom);

      myChart.showLoading();

      const option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "E_value",
            "W1_value",
            "W2_value",
            "T_value",
            "ec",
            "wc",
            "temperature",
          ],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [], // 初始为空
        },

        yAxis: {
          type: 'value',
          scale: true,
        },

        series: [
          {
            name: "E_value",
            type: "line",
            stack: "Total",
            data: [], // 初始为空
          },
          {
            name: "W1_value",
            type: "line",
            stack: "Total",
            data: [], // 初始为空
          },
          {
            name: "W2_value",
            type: "line",
            stack: "Total",
            data: [], // 初始为空
          },
          {
            name: "T_value",
            type: "line",
            stack: "Total",
            data: [], // 初始为空
          },
          {
            name: "ec",
            type: "line",
            stack: "Total",
            data: [], // 初始为空
          },
          {
            name: "wc",
            type: "line",
            stack: "Total",
            data: [], // 初始为空
          },
          {
            name: "temperature",
            type: "line",
            stack: "Total",
            data: [], // 初始为空
          },
        ],
      };

      myChart.hideLoading();
      option && myChart.setOption(option);
    },
    cbtn() {
      const params = {
        day: this.value,
        start_time: this.formatDate(this.value2[0]),
        end_time: this.formatDate(this.value2[1]),
      };
      axios
        .get(this.host + "/device/soil_mean", { params })
        .then((response) => {
          if (this.data_list.length === 0) {
            //   // 数据为空，弹出提示框
            //   this.$message({
            //     message: "好像这几天没数据呢",
            //     type: "warning",
            //   });
            // } else {
            //   // 查询成功，弹出提示框
            //   this.$message({
            //     message: "查询成功",
            //     type: "success",
            //   });
            // 更新数据列表
            this.data_list = response.data.data || []; // 如果数据不存在，则设置为空数组
            // 渲染图表
            this.updateChart();
            console.log(this.data_list);
            console.log(params);
          }
        });
    },
    updateChart() {
      const chartDom = document.getElementById("chart");
      const myChart = echarts.getInstanceByDom(chartDom);

      const startDate = new Date(this.value2[0]);
      const endDate = new Date(this.value2[1]);
      const xAxisData = getDatesInRange(startDate, endDate);

      const seriesData = [
        "temperature",
        "E_value",
        "T_value",
        "W1_value",
        "W2_value",
        "ec",
        "wc",
      ].map((name) => ({
        name,
        type: "line",
        stack: "Total",
        data: this.data_list.map((item) => item[name]),
      }));

      const option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxisData,
        },
        series: seriesData,
      };

      option && myChart.setOption(option);
    },
  },
};