echarts柱状统计图改为尖峰

效果

正常的柱状图是这样的

首先我们需要把柱子变成尖峰

重要的代码 把每一根柱子type设成 pictorialBar 然后加上 symbol

   type: 'pictorialBar',
   symbol:'path://M0,10 L10,10 C5.5, 4 5.5,1 5,0 C4.5,1 4.5, 4 0,10 z',

path://M0,10 L10,10 C5.5, 4 5.5,1 5,0 C4.5,1 4.5, 4 0,10 z

这个里面的数值可以调整尖峰的胖瘦 可以自己去尝试更换 自己尝试不多说

然后你就会发现所有的尖峰都重合到了一个位置

一个位置里有四个尖峰

这时需要依次挪动每一个数对应的尖峰的位置

重要代码

symbolOffset: [数值, 'left'], //可以正负值 例如 [10, 'left'] [-10, 'left'] [-10, 'center']

然后你会发现如果你设置了 尖峰顶部显示值 顶部的值 会和当时改尖峰发生重叠一样 label也会重叠

所以需要挪动顶部值的位置 series每一个尖峰里 label 中的offset：[0,0] 挪动与尖峰挪动值保持一致

上代码

   let option = {
        tooltip: {
          trigger: "item",
        },
        label: { show: false },
        grid: {
          top: "10%", // 可以是百分比或像素值
          right: "10%",
          bottom: "15%",
          left: "10%",
        },
        legend: {
          show: false,
        },
        xAxis: {
          type: "category",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#7CDCFF",
            },
          },
          data: ["A", "B", "C"],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#B2E7FF",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#7CDCFF",
            },
          },
        },
        color: ["#1E90FF", "#5AC76C", "#F6C555", "#EC6D3E"],
        series: [
          {
            barWidth: 20,
            name: "a",
            data: [80000, 80000, 80000],
            label: {
              // 数据上方显示数值
              show: true,
              position: "top",
              offset: [-45,0],
              textStyle: {
                color: "#fff",
              },
            },
            // type: "bar",
            // barMinHeight: 10,
            type: 'pictorialBar',
            symbol:'path://M0,10 L10,10 C5.5, 4 5.5,1 5,0 C4.5,1 4.5, 4 0,10 z',
            symbolOffset: [-45, 'left'],
            itemStyle: {
                normal: {
                    color: "#1E90FF",
                }
            },
          },
          {
            barWidth: 20,
            name: "b",
            data: [80000, 80000, 80000],
            type: 'pictorialBar',
            symbol:'path://M0,10 L10,10 C5.5, 4 5.5,1 5,0 C4.5,1 4.5, 4 0,10 z',
            symbolOffset: [-15, 'left'],
            itemStyle: {
                normal: {
                    color: "#5AC76C",
                }
            },
            label: {
              // 数据上方显示数值
              show: true,
              position: "top",
              offset: [-15,0],
              textStyle: {
                color: "#fff",
              },
            },
          },
          {
            barWidth: 20,
            name: "c",
            data: [80000, 80000, 80000],
            // type: "bar",
            type: 'pictorialBar',
            symbol:'path://M0,10 L10,10 C5.5, 4 5.5,1 5,0 C4.5,1 4.5, 4 0,10 z',
            symbolOffset: [15, 'left'],
            itemStyle: {
                normal: {
                    // 渐变色
                    color: "#F6C555",
                }
            },
            label: {
              // 数据上方显示数值
              show: true,
              position: "top",
              offset: [15,0],
              textStyle: {
                color: "#fff",
              },
            },
          },
          {
            barWidth: 20,
            data: [80000, 80000, 80000],
            name: "d",
            type: 'pictorialBar',
            symbol:'path://M0,10 L10,10 C5.5, 4 5.5,1 5,0 C4.5,1 4.5, 4 0,10 z',
            symbolOffset: [45, 'left'],
            itemStyle: {
                normal: {
                    color: "#EC6D3E",
                }
            },
            label: {
              // 数据上方显示数值
              show: true,
              position: "top",
              offset: [45,0],
              textStyle: {
                color: "#fff",
              },
            },
          },
        ],
      };
      myChart.setOption(option);