echarts+vue绘制单条一天内所有数据的曲线（一分钟一条数据）

原始数据获取

//原始数据
 _this.chartYData = [
    { name: "视在功率", type: "line", data: [] },
];
for (let item of res.data) {
    _this.chartXData.push(item.dbtime.substring(11, 19));//X轴数据
    _this.chartYData[0].data.push(item.s);//Y轴数据
}
console.log(_this.chartXData);//曲线x轴的数据源
console.log(_this.chartYData[0].data);//曲线y轴的数据源

坐标轴数据：

（1）X轴数据：

（2）Y轴数据

绘制过程：

// 折线图
    drawTransformerHistoryLine() {
      let myChart1 = this.$echarts.init(
          document.getElementById("zhexiantu"),
          "light"
        ),
        option = {};
      myChart1.clear();
      myChart1.showLoading({ text: "正在加载数据" }); //增加等待提示
      option = {
        title: {
          text:
            this.startTime +
            " " +
            "@尔嵘" +
            " " +
            "333",
          x: "center",
          y: "top",
          textAlign: "center",
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
        // legend: {
        //   data: this.legendData,
        //   padding: 40,
        // },
        // dataZoom: [
        //   {
        //     start: 95, //滚动条开始位置（共若干份）
        //   },
        //   {
        //     type: "inside",
        //   },
        // ],
        toolbox: {
          feature: {
            saveAsImage: { show: true },
            dataView: { show: true, readOnly: false }
          },
          // itemGap: 10,
          // left: '85%',
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: this.chartXData,
          axisLabel: {
            interval: "auto",
            // rotate: 60, //横坐标倾斜60°
          },
        },
        yAxis: {
          type: "value",
          name: this.$t("trsfMonitoring.unit") + "(" + this.danwei + ")"
        },
        series: this.chartYData
      };
      myChart1.setOption(option, true);
      setTimeout(() => {
        myChart1.hideLoading();
      }, 500);
      window.onresize = function () {
        myChart1.resize();
      };
    },

效果：

参考：

[1].​​Echarts官网​​