echarts 双立体柱状图

// 代码示例

const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const scale = shape.barWidth / 2;
    const deep = shape.barWidth / 4;
    const c0 = [shape.x, shape.y];
    const c1 = [shape.x - scale, shape.y - deep];
    const c2 = [xAxisPoint[0] - scale, xAxisPoint[1] - deep];
    const c3 = [xAxisPoint[0], xAxisPoint[1]];
    ctx
      .moveTo(c0[0], c0[1])
      .lineTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .closePath();
  }
});
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint;
    const scale = shape.barWidth / 2;
    const deep = shape.barWidth / 4;
    const c1 = [shape.x, shape.y];
    const c2 = [xAxisPoint[0], xAxisPoint[1]];
    const c3 = [xAxisPoint[0] + scale, xAxisPoint[1] - deep];
    const c4 = [shape.x + scale, shape.y - deep];
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath();
  }
});
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const scale = shape.barWidth / 2;
    const deep = shape.barWidth / 4;
    const c1 = [shape.x, shape.y];
    const c2 = [shape.x + scale, shape.y - deep];
    const c3 = [shape.x, shape.y - scale];
    const c4 = [shape.x - scale, shape.y - deep];
    ctx
      .moveTo(c1[0], c1[1])
      .lineTo(c2[0], c2[1])
      .lineTo(c3[0], c3[1])
      .lineTo(c4[0], c4[1])
      .closePath();
  }
});
echarts.graphic.registerShape('CubeLeft', CubeLeft);
echarts.graphic.registerShape('CubeRight', CubeRight);
echarts.graphic.registerShape('CubeTop', CubeTop);
const xData = ['南京', '苏州', '连云港', '扬州', '无锡'];
const seriesData = [8627, 7083, 6247, 3055, 2217];
const seriesData1 = [9627, 3083, 5247, 355, 2117];
const seriesData2 = [627, 83, 247, 355, 117];
const barWidth = 20;
let a = Math.max.apply(null, seriesData);
let b = Math.max.apply(null, seriesData1);
let c = Math.max.apply(null, seriesData2);
var maxValue = a > b ? a : b;
maxValue = maxValue > c ? maxValue : c;
var dataBg = [];
//data1存放背景条的数值，for循环使其数量与value一致
for (var i = seriesData.length - 1; i >= 0; i--) {
  dataBg.push(maxValue);
}
option = {
  backgroundColor: 'rgba(17, 42, 62, 1)', //"#012366",
  title: {
    text: '',
    top: 32,
    left: 18,
    textStyle: {
      color: '#00F6FF',
      fontSize: 24
    }
  },
  grid: {
    left: 20,
    right: 40,
    bottom: '19%',
    containLabel: true
  },
  tooltip: {
    show: true
  },
  legend: {
    data: ['市政管道', '庭院管道', '立管'],
    textStyle: {
      color: '#fff'
    }
    // itemWidth: 12,
    // itemHeight: 10,
    // itemGap: 35
  },
  xAxis: {
    type: 'category',
    data: xData,
    axisLine: {
      show: false,
      lineStyle: {
        color: '#fff'
      }
    },
    offset: 10,
    axisTick: {
      show: false
    },
    axisLabel: {
      fontSize: 14
    }
  },
  yAxis: {
    name: '单位（公里）',
    type: 'value',
    axisLine: {
      show: true, // 是否显示坐标轴轴线
      lineStyle: {
        color: '#fff',
        type: 'dashed'
      }
    },

    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      fontSize: 16
    }
  },
  dataZoom: [
    {
      show: true,
      height: 12,
      xAxisIndex: [0],
      bottom: '9%',
      start: 10,
      end: 90,
      handleIcon:
        'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleSize: '110%',
      handleStyle: {
        color: '#d3dee5'
      },
      textStyle: {
        color: '#fff'
      },
      borderColor: '#90979c'
    },
    {
      type: 'inside',
      show: true,
      height: 15,
      start: 1,
      end: 35
    }
  ],
  series: [
    {
      name: '市政管道',
      type: 'custom',
      renderItem: function (params, api) {
        const location = api.coord([api.value(0), api.value(1)]);
        return {
          type: 'group',
          x: -30,
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: '#2f5a9d'
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: '#2f5a9d'
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: '#2f5a9d'
              }
            }
          ]
        };
      },
      tooltip: {
        show: false
      },
      data: dataBg
    },
    {
      type: 'custom',
      name: '庭院管道',
      renderItem: function (params, api) {
        const location = api.coord([api.value(0), api.value(1)]);
        return {
          type: 'group',
          x: 0,
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: '#2f5a9d'
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: '#2f5a9d'
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: '#2f5a9d'
              }
            }
          ]
        };
      },
      tooltip: {
        show: false
      },
      data: dataBg
    },
    {
      type: 'custom',
      name: '立管',
      renderItem: function (params, api) {
        const location = api.coord([api.value(0), api.value(1)]);
        return {
          type: 'group',
          x: 30,
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: '#2f5a9d'
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: '#2f5a9d'
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: '#2f5a9d'
              }
            }
          ]
        };
      },
      tooltip: {
        show: false
      },
      data: dataBg
    },
    {
      type: 'custom',
      name: '市政管道',
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)]);
        return {
          type: 'group',
          x: -30,
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#9bfff5'
                  },
                  {
                    offset: 1,
                    color: '#6dd2ff'
                  }
                ])
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#9bfff5'
                  },
                  {
                    offset: 1,
                    color: '#6dd2ff'
                  }
                ])
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#9bfff5'
                  },
                  {
                    offset: 1,
                    color: '#6dd2ff'
                  }
                ])
              }
            }
          ]
        };
      },
      data: seriesData
    },
    {
      type: 'custom',
      name: '庭院管道',
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)]);
        return {
          type: 'group',
          x: 0,
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#9bfff5'
                  },
                  {
                    offset: 1,
                    color: '#6dd2ff'
                  }
                ])
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#9bfff5'
                  },
                  {
                    offset: 1,
                    color: '#6dd2ff'
                  }
                ])
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#9bfff5'
                  },
                  {
                    offset: 1,
                    color: '#6dd2ff'
                  }
                ])
              }
            }
          ]
        };
      },
      data: seriesData1
    },
    {
      type: 'custom',
      name: '立管',
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)]);
        return {
          type: 'group',
          x: 30,
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#9bfff5'
                  },
                  {
                    offset: 1,
                    color: '#6dd2ff'
                  }
                ])
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#9bfff5'
                  },
                  {
                    offset: 1,
                    color: '#6dd2ff'
                  }
                ])
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0]),
                barWidth
              },
              style: {
                fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#9bfff5'
                  },
                  {
                    offset: 1,
                    color: '#6dd2ff'
                  }
                ])
              }
            }
          ]
        };
      },
      data: seriesData2
    }
  ]
};