关于echart 横坐标 化为 表格 的一些实现

废话不多说, 直接上图,上代码

当前代码可直接copy到echarts 官网示例代码中运行调试

const res = {
  code: 200,
  msg: null,
  data: {
    processList: ["制粉", "辅材", "半煅/预碳化"],
    dimensionMap: {
      41: [0, 0, 56.32],
      42: [21.41, 0, 51.33],
      43: [100, 40.16, 51.59],
      44: [94.53, 0, 85.12],
    },
  },
};

    
const CELL_HEIGHT = 20;
    
    
    option = {
      title: {
        text: "来料合格率趋势图",
        left: "center",
      },
      darkMode: true,
      grid: {
        x: 150,
      // y:45,
        x2: 50,
        y2: 60 + CELL_HEIGHT * Object.keys(res.data.dimensionMap).length,
        // borderWidth:1
      },
      tooltip: {
        trigger: "axis",
        formatter: function (params) {
          let result = "";
          params.forEach(function (item) {
            // item 是每一个系列的数据
            const seriesName = item.seriesName; // 系列名称
            const value = item.value; // 数据值
            const marker = item.marker; // 标志图形
            result += `${marker}${seriesName}  ${
              value ? value + "%" : value
            } <br/>`;
          });

          return result;
        },
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      toolbox: {
        feature: {
          restore: { show: true },
        },
        formatter: function (params) {
          console.log(params);
          let result = "";
          params.forEach(function (item) {
            // item 是每一个系列的数据
            const seriesName = item.seriesName; // 系列名称
            const value = item.value; // 数据值
            const marker = item.marker; // 标志图形
            result += `${marker}${seriesName}: ${value}% <br/>`;
          });

          return result;
        },
      },
      legend: {
        align: "right",
        itemGap: 5.8,
        orient: "vertical",
        textStyle: { color: "#000" },
        bottom: 40,
        left: 40,
        data: Object.keys(res.data.dimensionMap).map((item) => `${item}周`),
      },
      xAxis: [
        {
          type: "category",
          axisLabel: {
            fontWeight: "bold",
            show: true,
            textStyle: {
              fontSize: "12px",
            },
          },
          data: res.data.processList,
          axisPointer: {
            type: "shadow",
          },
        },
        {
          position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
          offset: CELL_HEIGHT, // 向下偏移，使分组文字显示位置不与原x轴重叠
          axisTick: {
            length:
              -(Object.keys(res.data.dimensionMap).length + 1) *
              CELL_HEIGHT, // 延长刻度线做分组线
            inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
            lineStyle: { color: "#000" }, // 非必须，仅为了演示，明显标示出分组刻度线
          },
          max: res.data.processList.length -1,
          interval: 1,
          axisLabel: {
            inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
            interval: 0, // 强制显示全部刻度名
          },
          data: [""],
        },
        {
          position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
          offset: CELL_HEIGHT, // 向下偏移，使分组文字显示位置不与原x轴重叠
          interval: 1,
          axisTick: {
            length: 0, // 延长刻度线做分组线
            inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
            lineStyle: { color: "#000" }, // 非必须，仅为了演示，明显标示出分组刻度线
          },
          axisLabel: {
            inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
            interval: 0, // 强制显示全部刻度名
          },
        },
        ...Object.keys(res.data.dimensionMap).map((item, i) => {
          return {
            position: "bottom", // 将分组x轴位置定至底部，不然默认在顶部
            offset: 40 + CELL_HEIGHT * i, // 向下偏移，使分组文字显示位置不与原x轴重叠
            interval: 1,
            axisTick: {
              length: 0, // 延长刻度线做分组线
              inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
              lineStyle: { color: "#000" }, // 非必须，仅为了演示，明显标示出分组刻度线
            },
             axisLabel: {
                  inside: true, // 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
                  interval: 0, // 强制显示全部刻度名
                  lineHeight: 0,
            },
            data: res.data.dimensionMap[item],
          };
        }),
      ],
      yAxis: [
        {
          type: "value",
        },
        {
          type: "value",
        },
      ],
      series: [
        ...Object.keys(res.data.dimensionMap).map((item) => {
          return {
            name: `${item}周`,
            type: "bar",
            barCategoryGap: "30%",
            data: res.data.dimensionMap[item],
            label: {
              show: true,
              formatter(params) {
                return `${params.value}%`;
              },
            },
          };
        }),
      ],
    };