先来看下实现效果：

代码：（vue+typescript+Echarts）

HTML部分：

<div class="echarts" ref="box"></div>

TS部分：

public mounted() {
    this.drawBarEcharts();
  }
  public drawBarEcharts() {
    const chart = echarts.init(this.$refs.box as HTMLDivElement);
    const option: any = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none',
        },
        formatter: (params: any) => {
          return params[0].name + ': ' + params[0].value;
        },
      },
      xAxis: {
        data: ['类型1', '类型2', '类型3'],
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: {
          textStyle: {
            color: '#fff',
          },
        },
      },
      yAxis: {
        splitLine: { show: false },
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: { show: false },
      },
      // 设置每个三角柱子不同的颜色
      color: (params: any) => {
        const colorList = ['#FDB628', '#67E0E3', '#249CF9'];
        return colorList[params.dataIndex];
      },
      series: [
        {
          name: 'hill',
          type: 'pictorialBar',
          // barCategoryGap： 同一系列的柱间距离，默认为类目间距的20%，可设固定值
          barCategoryGap: '-100%',
          symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
          itemStyle: {
            // 每根柱子的透明度为 0.7
            normal: {
              opacity: 0.7,
            },
            // 鼠标移入柱子上 透明度变为 1
            emphasis: {
              opacity: 1,
            },
          },
          data: [15, 18, 12],
          z: 10,
          label: {
            normal: {
              // 设置每根柱子上字的位置和颜色
              show: true,
              position: 'top',
              color: '#fff',
            },
          },
        },
      ],
    };
    chart.setOption(option);
  }

CSS部分：

.echarts {
  width: 600px;
  height: 500px;
  margin: 0 auto;
  background: rgba(26, 128, 137, 0.7);
  border: 2px solid rgba(0, 107, 108, 0.7);
  box-shadow: inset 0px -8px 57px 0px rgba(20, 196, 164, 0.7);
}