Echarts中文官网：https://echarts.apache.org/examples/zh/index.html#chart-type-bar

先看效果图：

这里介绍两种写法：

1. 第一种是给柱子上的数据添加背景图片，代码如下：

import iconUrl from "../assets/chartBg.png";  //引用本地的图片做背景

// 柱状data数据
const columnData = ref([
  394, 194, 287, 189, 139, 420, 55, 39, 279, 379, 277, 237,
]);

series: [
  {
    name: "value",
    type: "bar",
    barWidth: 20,
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: "#17A8A0",
        },
        {
          offset: 1,
          color: "#5AEA80",
        },
      ]),
    },
    data: columnData.value,  //柱状图数据
    label: {
      show: true,
      color: "#FFFFFF",
      fontSize: 14,
      position: [10, -55],  //设置偏移量
      formatter: "{background| {c} kWh }", 
      rich: {
        background: {
          height: 49,  //图片高度
          width: 90,  //图片宽度
          align: "center", 
          backgroundColor: {
            image: iconUrl,   //自定义背景图
          },
        },
      },
    },
  },
 ]

2. 第二种是设置type: "pictorialBar"象形绘制图片，代码如下：

// 柱状data数据
const columnData = ref([
  394, 194, 287, 189, 139, 420, 55, 39, 279, 379, 277, 237,
]);

先根据柱状图数据循环出来要展示的图片数组
import iconUrl from "../assets/chartBg.png";  //引用本地的图片
const imgArr = ref([] as any);  //图片数组
columnData.value.forEach((item: any) => {
  imgArr.value.push({
    value: item,
    symbol: "image://" + iconUrl,
  });
});

//option下series配置
series: [
  {
    name: "value",
    type: "bar",
    barWidth: 20,
    itemStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: "#17A8A0",
        },
        {
          offset: 1,
          color: "#5AEA80",
        },
      ]),
    },
    data: columnData.value,   //柱状图数据
    label: {
      show: true,
      color: "#FFFFFF",
      fontSize: 14,
      position: [30, -40],  //文字偏移量
      formatter: "{c} kWh",
    },
  },
  //重要部分：
  {
    name: "glyph",
    type: "pictorialBar",
    barGap: "0%",
    symbolPosition: "end", //图片位置
    symbolSize: [90, 49],  //图片大小
    symbolOffset: ["20%", "-120%"],  //设置偏移量
    data: imgArr.value,  //图片数组
  },
],

It is never too late to learn.