echarts柱状堆叠，多种类型，多柱子，动态渲染

工作中遇到的开发需求，记录一下，希望对其他人有帮助。

需求：需要根据一个下拉选择框，选则年，月，日，传不同的参数，根据值不同动态渲染数据，并且多种类型对比，同一年的放一起对比，并且需要排除掉接口没有返回的日期，做数据处理。

模拟数据：根据自己业务情况来修改，我这里时间有3种类型

const dayData = [
  {
    "load_cx4": 410542,
    "load_cx5": 76517,
    "load_cx2": 124012,
    "load_cx3": 334962,
    "year": 2022,
    "load_cx1": 1511398,
    "axles": 3291,
    "load_cx6": 3148367,
    "load_cx7": 919311,
    "loads": 6525109,
    "load3": 76517,
    "load2": 2380914,
    "load5": 109175,
    "total2": 1057,
    "gcrq": "2022-05-01",
    "totals": 1267,
    "load4": 1722191,
    "total3": 15,
    "total9": 33,
    "month": 5,
    "total4": 84,
    "gczbs": "51000020160412100910844rlpJLxoD6",
    "load6": 1949521,
    "total5": 8,
    "load9": 286791,
    "total6": 70,
    "total_cx4": 32,
    "total_cx5": 15,
    "total_cx6": 147,
    "total_cx7": 48,
    "total_cx1": 817,
    "total_cx2": 13,
    "total_cx3": 195
  },
  {
    "load_cx4": 214867,
    "load_cx5": 101036,
    "load_cx2": 11149,
    "load_cx3": 415157,
    "year": 2022,
    "load_cx1": 1616387,
    "axles": 3481,
    "load_cx6": 2956191,
    "load_cx7": 710374,
    "loads": 6025161,
    "load3": 101036,
    "load2": 2257560,
    "load5": 185282,
    "total2": 1256,
    "gcrq": "2022-05-02",
    "totals": 1434,
    "load4": 1271642,
    "total3": 10,
    "total9": 22,
    "month": 5,
    "total4": 67,
    "gczbs": "51000020160412100910844rlpJLxoD6",
    "load6": 1844804,
    "total5": 11,
    "load9": 364837,
    "total6": 68,
    "total_cx4": 22,
    "total_cx5": 10,
    "total_cx6": 137,
    "total_cx7": 31,
    "total_cx1": 980,
    "total_cx2": 1,
    "total_cx3": 253
  },
  {
    "load_cx4": 1080415,
    "load_cx5": 840439,
    "load_cx2": 991544,
    "load_cx3": 3200850,
    "year": 2022,
    "load_cx1": 11709596,
    "axles": 27588,
    "load_cx6": 20914117,
    "load_cx7": 4671400,
    "loads": 43408361,
    "load3": 840439,
    "load2": 16982405,
    "load5": 978521,
    "total2": 8367,
    "gcrq": "2022-05-03",
    "totals": 10079,
    "load4": 9709127,
    "total3": 75,
    "total9": 356,
    "month": 5,
    "total4": 632,
    "gczbs": "51000020160412100910844rlpJLxoD6",
    "load6": 12350636,
    "total5": 68,
    "load9": 2547233,
    "total6": 581,
    "total_cx4": 104,
    "total_cx5": 75,
    "total_cx6": 1276,
    "total_cx7": 361,
    "total_cx1": 6406,
    "total_cx2": 115,
    "total_cx3": 1742
  },
  {
    "load_cx4": 1350002,
    "load_cx5": 1312769,
    "load_cx2": 1607006,
    "load_cx3": 3469962,
    "year": 2022,
    "load_cx1": 13390232,
    "axles": 31929,
    "load_cx6": 23234549,
    "load_cx7": 6568181,
    "loads": 50932701,
    "load3": 1312769,
    "load2": 19817202,
    "load5": 1434747,
    "total2": 9341,
    "gcrq": "2022-05-04",
    "totals": 11355,
    "load4": 10754338,
    "total3": 128,
    "total9": 440,
    "month": 5,
    "total4": 700,
    "gczbs": "51000020160412100910844rlpJLxoD6",
    "load6": 13543924,
    "total5": 95,
    "load9": 4069721,
    "total6": 651,
    "total_cx4": 106,
    "total_cx5": 128,
    "total_cx6": 1437,
    "total_cx7": 449,
    "total_cx1": 7224,
    "total_cx2": 136,
    "total_cx3": 1875
  },
  {
    "load_cx4": 1782454,
    "load_cx5": 1382739,
    "load_cx2": 1591580,
    "load_cx3": 3446190,
    "year": 2022,
    "load_cx1": 13372239,
    "axles": 33088,
    "load_cx6": 26782587,
    "load_cx7": 6578400,
    "loads": 54936189,
    "load3": 1382739,
    "load2": 20192463,
    "load5": 1820880,
    "total2": 9287,
    "gcrq": "2022-05-05",
    "totals": 11494,
    "load4": 12119316,
    "total3": 132,
    "total9": 481,
    "month": 5,
    "total4": 760,
    "gczbs": "51000020160412100910844rlpJLxoD6",
    "load6": 15357136,
    "total5": 121,
    "load9": 4063655,
    "total6": 713,
    "total_cx4": 148,
    "total_cx5": 132,
    "total_cx6": 1584,
    "total_cx7": 491,
    "total_cx1": 7055,
    "total_cx2": 151,
    "total_cx3": 1933
  },
  {
    "load_cx4": 1754023,
    "load_cx5": 1808103,
    "load_cx2": 1791631,
    "load_cx3": 3645515,
    "year": 2022,
    "load_cx1": 13951775,
    "axles": 34918,
    "load_cx6": 32726488,
    "load_cx7": 7982141,
    "loads": 63659676,
    "load3": 1808103,
    "load2": 222,
    "load5": 1905621,
    "total2": 9611,
    "gcrq": "2022-05-02",
    "totals": 12107,
    "load4": 16420845,
    "total3": 181,
    "total9": 509,
    "month": 5,
    "total4": 923,
    "gczbs": "510000201604151437057760ZY9pVRt0",
    "load6": 17525619,
    "total5": 118,
    "load9": 4856544,
    "total6": 765,
    "total_cx4": 155,
    "total_cx5": 181,
    "total_cx6": 1815,
    "total_cx7": 500,
    "total_cx1": 7306,
    "total_cx2": 172,
    "total_cx3": 1978
  },
];


const monthData = [
  {
    "load_cx4": 1367186,
    "load_cx5": 2701428,
    "load_cx2": 1667680,
    "load_cx3": 3482312,
    "year": 2022,
    "load_cx1": 12346470,
    "axles": 30130,
    "day_cnt": 31,
    "load_cx6": 25471285,
    "load_cx7": 7717674,
    "loads": 54754031,
    "load3": 2701428,
    "load2": 18863646,
    "load5": 2053551,
    "total2": 8492,
    "load4": 12271606,
    "totals": 10851,
    "total3": 477,
    "total9": 396,
    "month": 1,
    "total4": 783,
    "gczbs": "51000020160412100910844rlpJLxoD6",
    "load6": 13072210,
    "total5": 134,
    "load9": 5791592,
    "total6": 571,
    "total_cx4": 144,
    "total_cx5": 477,
    "total_cx6": 1459,
    "total_cx7": 424,
    "total_cx1": 6437,
    "total_cx2": 173,
    "total_cx3": 1740
  },
  {
    "load_cx4": 685500,
    "load_cx5": 2463575,
    "load_cx2": 844874,
    "load_cx3": 2482525,
    "year": 2022,
    "load_cx1": 8783703,
    "axles": 14152,
    "day_cnt": 28,
    "load_cx6": 8808653,
    "load_cx7": 3499736,
    "loads": 27568565,
    "load3": 2463575,
    "load2": 12796602,
    "load5": 872889,
    "total2": 4517,
    "load4": 4876565,
    "totals": 5404,
    "total3": 139,
    "total9": 157,
    "month": 2,
    "total4": 341,
    "gczbs": "51000020160412100910844rlpJLxoD6",
    "load6": 4169316,
    "total5": 54,
    "load9": 2389620,
    "total6": 198,
    "total_cx4": 80,
    "total_cx5": 139,
    "total_cx6": 579,
    "total_cx7": 170,
    "total_cx1": 3416,
    "total_cx2": 101,
    "total_cx3": 921
  },
  {
    "load_cx4": 1424621,
    "load_cx5": 23486214,
    "load_cx2": 1790283,
    "load_cx3": 8356323,
    "year": 2022,
    "load_cx1": 30707444,
    "axles": 19760,
    "day_cnt": 31,
    "load_cx6": 28796895,
    "load_cx7": 38519618,
    "loads": 133081396,
    "load3": 23514616,
    "load2": 42278671,
    "load5": 6989877,
    "total2": 3042,
    "load4": 13180133,
    "totals": 4456,
    "total3": 318,
    "total9": 367,
    "month": 3,
    "total4": 363,
    "gczbs": "51000020160412100910844rlpJLxoD6",
    "load6": 9337230,
    "total5": 98,
    "load9": 37780872,
    "total6": 270,
    "total_cx4": 63,
    "total_cx5": 318,
    "total_cx6": 761,
    "total_cx7": 336,
    "total_cx1": 2290,
    "total_cx2": 73,
    "total_cx3": 617
  },
  {
    "load_cx4": 1371482,
    "load_cx5": 3229550,
    "load_cx2": 1548431,
    "load_cx3": 3090777,
    "year": 2022,
    "load_cx1": 11250514,
    "axles": 25652,
    "day_cnt": 30,
    "load_cx6": 18608610,
    "load_cx7": 8224111,
    "loads": 47323471,
    "load3": 3258293,
    "load2": 17261202,
    "load5": 1617484,
    "total2": 6346,
    "load4": 8609022,
    "totals": 8068,
    "total3": 176,
    "total9": 461,
    "month": 4,
    "total4": 528,
    "gczbs": "51000020160412100910844rlpJLxoD6",
    "load6": 10122821,
    "total5": 105,
    "load9": 6454652,
    "total6": 453,
    "total_cx4": 100,
    "total_cx5": 176,
    "total_cx6": 1165,
    "total_cx7": 382,
    "total_cx1": 4840,
    "total_cx2": 113,
    "total_cx3": 1295
  },
  {
    "load_cx4": 873636,
    "load_cx5": 819430,
    "load_cx2": 913068,
    "load_cx3": 1950990,
    "year": 2022,
    "load_cx1": 7474462,
    "axles": 18000,
    "day_cnt": 15,
    "load_cx6": 14920644,
    "load_cx7": 3779361,
    "loads": 30731590,
    "load3": 819430,
    "load2": 11212155,
    "load5": 993273,
    "total2": 5179,
    "load4": 6763667,
    "totals": 6379,
    "total3": 73,
    "total9": 248,
    "month": 5,
    "total4": 422,
    "gczbs": "51000020160412100910844rlpJLxoD6",
    "load6": 8676569,
    "total5": 63,
    "load9": 2266498,
    "total6": 396,
    "total_cx4": 73,
    "total_cx5": 73,
    "total_cx6": 874,
    "total_cx7": 254,
    "total_cx1": 3971,
    "total_cx2": 80,
    "total_cx3": 1056
  },
  {
    "load_cx4": 3303,
    "load_cx5": 904965,
    "load_cx2": 3039,
    "load_cx3": 236477,
    "year": 2022,
    "load_cx1": 5901307,
    "axles": 8201,
    "day_cnt": 31,
    "load_cx6": 5242059,
    "load_cx7": 338397,
    "loads": 12629544,
    "load3": 202621,
    "load2": 6141227,
    "load5": 3027444,
    "total2": 3216,
    "load4": 725227,
    "totals": 3564,
    "total3": 18,
    "total9": 0,
    "month": 1,
    "total4": 50,
    "gczbs": "510000201604151437057760ZY9pVRt0",
    "load6": 2533027,
    "total5": 166,
    "load9": 0,
    "total6": 116,
    "total_cx4": 1,
    "total_cx5": 65,
    "total_cx6": 266,
    "total_cx7": 18,
    "total_cx1": 3091,
    "total_cx2": 1,
    "total_cx3": 125
  },
  {
    "load_cx4": 0,
    "load_cx5": 155055,
    "load_cx2": 0,
    "load_cx3": 252425,
    "year": 2022,
    "load_cx1": 6101545,
    "axles": 7210,
    "day_cnt": 3,
    "load_cx6": 151680,
    "load_cx7": 11644,
    "loads": 6672348,
    "load3": 31563,
    "load2": 6353970,
    "load5": 0,
    "total2": 3554,
    "load4": 141168,
    "totals": 3577,
    "total3": 4,
    "total9": 0,
    "month": 2,
    "total4": 13,
    "gczbs": "510000201604151437057760ZY9pVRt0",
    "load6": 145648,
    "total5": 0,
    "load9": 0,
    "total6": 7,
    "total_cx4": 0,
    "total_cx5": 15,
    "total_cx6": 8,
    "total_cx7": 1,
    "total_cx1": 3414,
    "total_cx2": 0,
    "total_cx3": 140
  }
];

const yearData = [
  {
    "load_cx4": 1514947,
    "load_cx5": 4939118,
    "load_cx2": 1780294,
    "load_cx3": 3784992,
    "year": 2021,
    "load_cx1": 14083687,
    "axles": 30550,
    "day_cnt": 197,
    "load_cx6": 33620056,
    "load_cx7": 11754268,
    "loads": 71477357,
    "load3": 4939118,
    "load2": 21167687,
    "load5": 2268930,
    "total2": 8982,
    "load4": 19113932,
    "totals": 11207,
    "total3": 198,
    "total9": 279,
    "total4": 1007,
    "gczbs": "51000020160412100910844rlpJLxoD6",
    "load6": 15454923,
    "total5": 88,
    "load9": 8532770,
    "total6": 655,
    "total_cx4": 147,
    "total_cx5": 198,
    "total_cx6": 1617,
    "total_cx7": 412,
    "total_cx1": 6829,
    "total_cx2": 173,
    "total_cx3": 1833
  },
  {
    "load_cx4": 1185104,
    "load_cx5": 7333148,
    "load_cx2": 1414832,
    "load_cx3": 4137012,
    "year": 2022,
    "load_cx1": 15038870,
    "axles": 22092,
    "day_cnt": 135,
    "load_cx6": 20081658,
    "load_cx7": 13590832,
    "loads": 62781452,
    "load3": 7346057,
    "load2": 21775815,
    "load5": 2727487,
    "total2": 5571,
    "load4": 9520544,
    "totals": 7137,
    "total3": 259,
    "total9": 338,
    "total4": 498,
    "gczbs": "51000020160412100910844rlpJLxoD6",
    "load6": 9224197,
    "total5": 95,
    "load9": 12187354,
    "total6": 379,
    "total_cx4": 95,
    "total_cx5": 259,
    "total_cx6": 986,
    "total_cx7": 323,
    "total_cx1": 4229,
    "total_cx2": 112,
    "total_cx3": 1137
  },
  {
    "load_cx4": 3436,
    "load_cx5": 1520140,
    "load_cx2": 1919,
    "load_cx3": 167166,
    "year": 2021,
    "load_cx1": 4106698,
    "axles": 6937,
    "day_cnt": 232,
    "load_cx6": 9336857,
    "load_cx7": 618317,
    "loads": 15754530,
    "load3": 268392,
    "load2": 4276981,
    "load5": 5188974,
    "total2": 2067,
    "load4": 1268073,
    "totals": 2610,
    "total3": 20,
    "total9": 0,
    "total4": 68,
    "gczbs": "510000201604151437057760ZY9pVRt0",
    "load6": 4752111,
    "total5": 258,
    "load9": 0,
    "total6": 198,
    "total_cx4": 1,
    "total_cx5": 87,
    "total_cx6": 428,
    "total_cx7": 29,
    "total_cx1": 1986,
    "total_cx2": 1,
    "total_cx3": 81
  },
  // {
  //     "load_cx4": 3012,
  //     "load_cx5": 838796,
  //     "load_cx2": 2771,
  //     "load_cx3": 237884,
  //     "year": 2022,
  //     "load_cx1": 5918976,
  //     "axles": 8114,
  //     "day_cnt": 34,
  //     "load_cx6": 4792908,
  //     "load_cx7": 309566,
  //     "loads": 12103909,
  //     "load3": 187528,
  //     "load2": 6159998,
  //     "load5": 2760317,
  //     "total2": 3246,
  //     "load4": 673692,
  //     "totals": 3565,
  //     "total3": 16,
  //     "total9": 0,
  //     "total4": 47,
  //     "gczbs": "510000201604151437057760ZY9pVRt0",
  //     "load6": 2322376,
  //     "total5": 151,
  //     "load9": 0,
  //     "total6": 106,
  //     "total_cx4": 1,
  //     "total_cx5": 61,
  //     "total_cx6": 243,
  //     "total_cx7": 16,
  //     "total_cx1": 3119,
  //     "total_cx2": 1,
  //     "total_cx3": 126
  // }
];
export { dayData, monthData, yearData };

安装echarts：可以参考官网入门

npm install echarts

准备echarts 容器和页面 

<div id="main" style="width: 800px;height:420px;"></div>

初始化DOM 并且渲染页面

  const myChart = echarts.init(document.getElementById('main'))
 //示例-类型
  const legendData = ["二轴", "三轴", "四轴", "五轴", "六轴", "九轴"];
  const loadToChinese = {
      load2: "二轴",
      load3: "三轴",
      load4: "四轴",
      load5: "五轴",
      load6: "六轴",
      load9: "九轴",
    };
 //模拟数据 日:dayData, 月:monthData, 年:yearData
   const dataList = 接口数据;

//因为是多条数据对比，所以还需要选中对条数据，我的业务是有一个多选列表，选中多条，拿到每一条的唯一标识，存储在一个变量里面
 //勾选的数据
   const selectedRowsBs = selectedRowsBs || [];
//获取勾选中的数据中含有返回数据的
   const siteArr = [];
   selectedRowsBs.forEach((v) => { //比对唯一标识是否一致，true就返回，并且保存在siteArr数组中
      const item = dataList.find((s) => s.gczbs == v);
      if (item) {
        siteArr.push(item.gczbs);
      } else {
        siteArr.push("");
      }
    });

   //获取x轴
   let xData = dataList.map((v: any) => {
      if (v.gcrq) {
        //按日期时
        v.myDate = v.gcrq; //自己往返回的数据中插入一个字段，方便后续比对数据
        return v.gcrq;
      } else if (v.month && !v.gcrq) {
        //按月时
        v.myDate = v.year + "-" + v.month;
        return v.year + "-" + v.month;
      } else {
        //按年时
        v.myDate = v.year;
        return v.year;
      }
    });
    //去重相同的x轴的日期
    xData = [...new Set(xData)];

    //组合数据    * 这个_.flattenDeep是工具loadsh的一个方法**  
    const seriesData = _.flattenDeep(
      //1.勾选中并且有数据的
      siteArr.map((s) => {
        //2.单个柱状的数据
        return Object.keys(loadToChinese).map((load) => {
          return {
            name: loadToChinese[load], 
            type: "bar",
            stack: s, //用gczbs 来定义stack
            //3.匹配X坐标位置和数据填充
            data: xData.map((v, i) => {
              const item = dataList.find((d: any) => {
                return d.gczbs == s && v == d.myDate;
              });
              if (item) {
                return item[load];
              }
              return null;
            }),
          };
        });
      })
    );
   const option = {
         legend: {
          data: legendData,

          top: 20,
          icon: "rect",
          textStyle: {
            height: 8,
            color: "#BDD8FB",
            fontSize: 12,
            rich: {
              a: {
                verticalAlign: "bottom",
              },
            },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
       
        },
        xAxis: {
          type: "category",
          boundaryGap: true, // 坐标轴两边留白策略，也可以使用布尔值，true居中
          data: xData,
          axisLabel: {
            color: "#BDD8FB", // x轴字体颜色
            fontSize: 12,
            // interval: xData.length < 5 ? 1 : Math.floor(xData.length / 5), // 每4个标签显示一次
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#BDD8FB", // x轴颜色
              fontSize: 12,
            },
          },

          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          min: 0,
          minInterval: 1,
          nameTextStyle: {
            fontSize: 12,
            color: "#BDD8FB",
            align: "center",
          },
          splitLine: {
            lineStyle: {
              color: "rgba(255, 255, 255, 0.15)",
              type: "dashed", // dotted 虚线
            },
          },
          splitArea: { show: false },
          axisLabel: {
            fontSize: 12,
            fontFamily: "Bebas",
            color: "#BDD8FB",
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        dataZoom: [
          {
            show: xData.length > 0 ? true : false,
            height: 20,
            xAxisIndex: [0],
            bottom: 25,
            start: 0,
            end: 100,
            textStyle: {
              color: "#fff",
            },
          },
          {
            type: "inside",
            show: true,
            height: 10,
            start: 1,
            end: 25,
          },
        ],
        series: seriesData,

        grid: {
          // left: 100,
          bottom: 25,
          containLabel: true,
        },
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

显示的图形是这样的，x轴会动态变化的，上面说了是根据是日期类型来显示的，这里我是按月筛选的。

其中最难的就是组合数据那一部分，因为我的请况比较多，所以组合起来稍微复杂。