Echarts中文网：https://echarts.apache.org/examples/zh/index.html

效果如图所示：

这里主要配置series下的 type: “pictorialBar”,和设置symbol: “path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z”,具体参数可查看Echart参数：series-pictorialBar. symbol。

整体代码如下：

<template>
  <div
    id="columnChart"
    style="width: 100%; height: 270px"
  ></div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
// 横坐标data数据
const xData = ref([
  "1月",
  "2月",
  "3月",
  "4月",
  "5月",
  "6月",
  "7月",
  "8月",
  "9月",
  "10月",
  "11月",
  "12月",
]);
// 柱状data数据
const columnData = ref([
  394, 194, 287, 189, 139, 420, 385, 239, 279, 379, 277, 237,
]);

let myColumnChart: echarts.ECharts | null = null;
const showColumnEcharts = () => {
  if (!myColumnChart) {
    const columnChartDom = document.getElementById("columnChart");
    myColumnChart = echarts.init(columnChartDom);
  }
  const columnOption = {
    tooltip: {
      trigger: "axis",
      type: "line",
      axisPointer: {
        lineStyle: {
          color: "rgba(10,110,250, 0.5)",
        },
      },
      backgroundColor: "rgba(7,18,26, 1)",
      borderWidth: 0,
      textStyle: {
        color: "#fff",
        fontSize: 14,
        align: "left",
      },
    },
    // 图例
    legend: {
      show: false,
    },
    // 图表位置
    grid: {
      left: "5%",
      right: "5%",
      top: "18%",
      bottom: "0%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          lineStyle: {
            color: "#415264",
            width: 1,
            type: "solid",
          },
        },
        axisLabel: {
          color: "rgba(255,255,255,0.6)",
          fontSize: 12,
        },
        axisTick: {
          show: false,
        },
        data: xData.value,
      },
    ],
    yAxis: [
      {
        name: "发电量（kWh）",
        type: "value",
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
          },
        },
        axisLabel: {
          color: "rgba(255,255,255,0.2)",
          fontSize: 12,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.2)",
            type: "dashed",
          },
        },
      },
    ],
    series: [
      {
        name: "发电量",
        type: "pictorialBar",
        symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
        itemStyle: {
          borderColor: "#00FF66",
          borderWidth: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#0AE2FA",
            },
            {
              offset: 1,
              color: "#0A6EFA",
            },
          ]),
        },
        tooltip: {
          valueFormatter: function (value: string) {
            return value + "kWh";
          },
        },
        label: {
          // 数值显示配置
          show: true,
          position: "top",
          color: "#fff",
          fontSize: 12,
          formatter: "{c} kWh",
        },
        barWidth: 40,
        data: columnData.value,
      },
    ],
  };
  columnOption && myColumnChart.setOption(columnOption);
};
const resizeChart = () => {
  if (myColumnChart) {
    myColumnChart.resize();
  }
};
onMounted(() => {
  showColumnEcharts();
  window.addEventListener("resize", resizeChart);
});
</script>

🌻 Be patient.Good things come to those who wait.