echarts 实现形状为圆柱形、三角形的柱状图表

实现形状为圆柱形的柱状图表

先上图：

外观上是一个圆柱形，实际上是由一个柱形图和两个象形柱图拼接而成。
柱形图的类型是bar；象形柱图的类型是pictorialBar，是一种可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。

option = {
   
  // 数据过多，鼠标滚轮查看数据
  dataZoom: [
    // 横向，使用滚动条
    {
   
      type: 'slider', // 有单独的滑动条，用户在滑动条上进行缩放或漫游。inside是直接可以是在内部拖动显示
      show: true, // 是否显示拖拽组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
      start: 0, // 数据窗口范围的起始百分比0-100
      end: 40, // 数据窗口范围的结束百分比0-100
      xAxisIndex: [0] // 此处表示控制第一个xAxis，设置 dataZoom-slider 组件控制的 x轴 可是已数组[0,2]表示控制第一，三个；xAxisIndex: 2 ，表示控制第二个。yAxisIndex属性同理
      // bottom: -10 //距离底部的距离
    },
    // 横向，内置于坐标系中，鼠标滚轮滚动
    {
   
      type: 'inside',
      start: 0,
      end: 40
    }
  ],
  tooltip: {
   
    trigger: 'axis',
    confine: true,
    axisPointer: {
    type: 'none' },
    borderColor: 'transparent',
    backgroundColor: 'rgba(0, 183, 255, .3)',
    textStyle: {
    fontSize: 14, fontWeight: 500, color: '#fff' },
    formatter(params) {
   
      return params.reduce((pre, i) => {
   
        // 只展示柱子对应的内容，把顶部和底部的 tooltip 过滤掉
        if (i.componentSubType === 'bar') {
   
          i.marker = i.marker.replace(
            /\[object Object\]/,
            i.color.colorStops[1].color
          );
          i.value = `<span style="flex: 1; text-align: right; margin-left: 16px;">${
     i.value}</span>`;
          const current = `<div style="display: flex; align-items: center; height: 26px;">${
     i.marker}${
     i.axisValueLabel} ${
     i.value}</div>`;
          return `${
     pre}${
     current}`;
        }
        return pre;
      }, '');
    }
  },
  // 设置组件在容器内的位置
  grid: {
   
    left: