echarts电量 象形图 柱状图

请看这个链接https://www.isqqw.com/viewer?id=48655
大致思路：
1 第一层 底层柱状图；
2 第二层 切片 即象牙图原理，形成一个一个小的切片叠加在底层上；
3 第三层 背景图，找到最大的值，并填充所有的数组中；

const xAxisData = ["第一列", "第二列", "第三列", "第四列"]
const seriesData = [{
   measureUnit: "吨", value: 500
}, {
   measureUnit: "吨", value: 800
}, { measureUnit: "吨", value: 400 }, { measureUnit: "吨", value: 300 }]


let maxAmount = 0;
// let maxValueArr = [];
seriesData.map((item) => {
   item.value > maxAmount
      ? (maxAmount = item.value)
      : (maxAmount = maxAmount);
});

let maxValArr = new Array(seriesData.length).fill(maxAmount);


option = {
   //你的代码
   backgroundColor: "#08244d",
   legend: {
      show: false,
      icon: "rect",
      textStyle: {
         color: "#93B9FF",
      },
   },



   grid: {

      containLabel: true,
   },
   xAxis: {
      type: "category",
      axisLabel: {
         fontSize: 11,
         color: "#93B9FF",
         interval: 0,

      },
      axisLine: {
         show: true,
         lineStyle: {
            width: 1,
            color: "#305B9A",
         },
      },
      data: xAxisData,
   },
   yAxis: {
      type: "value",
      axisLabel: {
         fontSize: 11,
         color: "#93B9FF",
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: "#305B9A",
         },
      },
      splitLine: {
         lineStyle: {
            color: "#0F2E60",
         },
      },
   },
   series: [
      {
         name: "全量背景图",
         type: "bar",
         barGap: "-100%",
         data: maxValArr,
         barWidth: 30,
         itemStyle: {
            normal: {
               color: "rgba(63, 169, 245, 0.2)",
            },
         },
         z: 0,
      },
      {
         type: "pictorialBar",
         name: "渐变背景",
         barWidth: 14,
         symbol: "rect",
         symbolSize: "100%",
         symbolPosition: "start",
         symbolOffset: [0, 0],
         label: {
            normal: {
               show: true,
               position: "top",

               formatter: (params) => {
                  return [
                     ...Object.values(seriesData[params.dataIndex]),
                  ].join("\n");
               },
               fontSize: 12,
               lineHeight: 16,
               color: "#93B9FF",
            },
         },
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: "rgba(221, 255, 252, 1)",
                  },
                  {
                     offset: 0.1,
                     color: "rgba(8, 239, 222, 1)",
                  },
                  {
                     offset: 1,
                     color: "rgba(0, 128, 167, 0.20)",
                  },
               ]),
            },
         },
         z: 1,
         zlevel: 0,
         data: seriesData.map((item) => {
            return item.value;
         }),
      },
      {
         type: "pictorialBar",
         name: "块状切片",
         itemStyle: {
            normal: {
               color: "#011140",
            },
         },
         barWidth: 14,
         symbolRepeat: 28,
         symbol: "rect",
         symbolClip: true,
         symbolSize: [14, 2],
         symbolPosition: "start",
         symbolOffset: [0, 0],
         data: seriesData.map((item) => {
            return item.value;
         }),
         z: 2,
         zlevel: 0,
      },
   ],

};