Echarts实现横轴数据节点不一致的绘制

效果

后端数据格式

[
 {
    "lineList": [
      {
        "ydata": "2",
        "xdata": "2022-05-24"
      },
      {
        "ydata": "51",
        "xdata": "2022-05-27"
      },
     {
        "ydata": "199",
        "xdata": "2022-05-29"
      },
    ],
    "unit": "°",
  },
 {
    "lineList": [
      {
        "ydata": "99",
        "xdata": "2022-05-23"
      },
      {
        "ydata": "399",
        "xdata": "2022-05-25"
      },
     {
        "ydata": "680",
        "xdata": "2022-05-30"
      },
    ],
    "unit": "°",
  }
]

echarts图标需要的数据格式

[
   {
      data: [
         ["2022-05-24", 2],
         ["2022-05-27", 51],
         ["2022-05-29", 199],
      ],
      type: "line",
  },
  {
      data:[
         ["2022-05-23", 99],
          ["2022-05-25", 399],
          ["2022-05-30", 680],
      ],
     type: "line",
   },
]

清洗数据的方法

let source = res.list;
var target = [];
 for (var i in source) {
       var data = [];
       var lineList = source[i].lineList;
       for (var j in lineList) {
           data.push([
             lineList[j].xdata,
              lineList[j].ydata,
          ]);
      }
      var obj = {
              data: data,
              type: "line",
              name: source[i].recognition,
     };
     target.push(obj);
}

图表绘制实现

          // 纵坐标单位
          let unitY = "";
          unitY = res.list[0].unit;
          //图例
          let newArr = [];
          let legend = [];
          newArr = res.list;
          legend = newArr.map((item) => item.recognition);
          let source = res.list;
          var target = [];
          for (var i in source) {
            var data = [];
            var lineList = source[i].lineList;
            for (var j in lineList) {
              data.push([
                moment(lineList[j].xdata).format("YYYY-MM-DD HH:mm:ss"),
                lineList[j].ydata,
              ]);
            }
            var obj = {
              data: data,
              type: "line",
              name: source[i].recognition,
            };
            target.push(obj);
          }
          // 获取Dom
          var chartDom = document.getElementById(id);
          // 初始化实例;
          var lineChart = echarts.init(chartDom);
          if (!chartDom) {
            return;
          }
          // 绘制配置
          var options;
          options = {
            title: {
              textStyle: {
                fontWeight: "normal",
              },
              left: "50%",
              top: "10",
            },
            //线的颜色
            tooltip: {
              trigger: "axis",
            },
            color: ["#FE8800", "#73F6AF"],
            legend: {
              data: legend,
              textStyle: {
                fontSize: 15,
                color: "#fff",
              },
              bottom: "15",
            },
            // 折线图内边距
            grid: {
              left: "3%",
              right: "3%",
              bottom: "18%",
              containLabel: true,
            },

            //用于区域缩放。以下配置只可缩放横轴
            // dataZoom: [
            //   {
            //     type: "slider",
            //     show: true,
            //     start: 0,
            //     end: 30,
            //     xAxisIndex: [0],
            //   },
            // ],
            xAxis: {
              type: "time", // x轴为 时间轴
              splitLine: { show: false },
              axisLine: {
                lineStyle: { width: 0 },
              },
              axisLabel: {
                color: "rgba(191, 202, 212, 1)",
                fontSize: 11,
              },
              axisTick: { show: false },
              boundaryGap: false,
            },
            yAxis: {
              axisLabel: {
                color: "rgba(191, 202, 212, 1)",
                fontSize: 11,
              },
              type: "value",
              name: unitY, //纵坐标单位
              nameTextStyle: {
                color: " #BFCAD4",
                nameLocation: "start",
                fontSize: "14",
              },
              min: 0, //取0为最小刻度
              scale: true, //自适应
              nameGap: 15,
              axisTick: {
                show: false, //刻度线
              },
              axisLine: {
                show: false, //隐藏y轴
              },
              splitLine: {
                // ⽹格线
                show: true,
                lineStyle: {
                  color: "#2e3f48",
                  type: "dotted",
                  width: "2",
                },
              },
            },
            series: target,
          };
          options && lineChart.setOption(options);

此片文章到这里就结束啦，各位同僚可以在自己的demo项目里演示一番，如有更好的方案可私聊一起讨论，如有其它疑问可评论区留言哦