echarts三角柱形带柱形背景图

先看效果图

分析

1、柱体

使用柱形图series，type为bar，但是查阅文档发现，并未提供可操作柱形图形状的api，虽然可以调整圆角半径，但不是这种效果
但虽然普通柱形图不能实现这种效果，但是官方有提供一个象形柱图series，type为pictorialBar，官方解释象形柱图是可以设置各种具象图形元素的柱状图，它首先是个柱状图，但是柱状图的柱子并不显示。这些柱子我们称为『基准柱（reference bar）』，根据基准柱来定位和显示各种象形图形（包括图片）。进一步查询，发现该柱形图可通过symbol属性来设置 “图形类型” 其中有一个值为 triangle 正好是三角形

2、柱体背景

查阅文档发现普通柱形图可通过设置showBackground来设置是否显示柱条的背景色，然而象形柱图并未提供
虽然不能通过直接设置背景图的方式来解决，那么可否通过其他方式呢，再进一步查阅资料发现，series可设置多套图形配置来实现多图在一张表上堆叠，那么可否通过再设置一个普通柱形图然后将其背景色设置为半透明的方式来实现该效果呢

代码实现

      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              margin: -20,
              backgroundColor: 'transparent'
            }
          }
        },
        grid: {
          left: '8%',
          right: '5%',
          bottom: '5%',
          top: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLine: { // 坐标轴轴线
              show: false
            },
            axisTick: { // 坐标轴刻度
              show: false
            },
            splitLine: { // 坐标轴在 grid 区域中的分隔线。
              show: false
            },
            axisLabel: { // 坐标轴刻度标签
              show: false
            },
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            minInterval: 1, // 自动计算的坐标轴最小间隔大小。设置成1保证坐标轴分割刻度显示成整数
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#33638f'
              }
            },
            axisLabel: {
              show: true,
              formatter: '{value} %',
              color: '#c8e1f7',
            },
          }
        ],
        series: [
          {
            name: '',
            type: 'pictorialBar', // 象形柱图
            symbol: 'triangle', // 图形类型
            z: 100, // 象形柱图组件的所有图形的z值
            tooltip: {
              show: true,
            },
            label: {
              show: true,
              position: 'top',
              color: '#ffffff',
              formatter: '{c}%'
            },
            itemStyle: { // 图形样式,若想给每个柱图都设置单独的颜色则需要单独在data中设置
               color: {
                 type: 'linear',
                 x: 0,
                 y: 0,
                 x2: 0,
                 y2: 1,
                 colorStops: [{
                   offset: 1, color: 'rgba(3, 235, 216, .5)' // 100% 处的颜色
                 }, {
                   offset: 0, color: 'rgba(3, 235, 216, 1) '// 0% 处的颜色
                 }],
                 global: false // 缺省为 false
               }
             },
            barCategoryGap: "20%", // 同一系列的柱间距离
            smooth: true,
            data: []
          },
          {
            type: 'bar',
            tooltip: {show: false}, // 提示框
            itemStyle: {
              color: 'rgba(18, 45, 77, .4)' // rgba第四个参数可设置透明度
            },
            z: 10,
            barCategoryGap: "20%", // 同一系列的柱间距离
            smooth: true,
            data: []
          },
        ]
      },