echart立體柱狀圖

var MyCubeRect = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        const api = shape.api;
        const xAxisPoint = api.coord([shape.xValue, 0]);
        const p0 = [shape.x - 18, shape.y - 10];
        const p1 = [xAxisPoint[0] - 18, xAxisPoint[1] - 5]
        const p2 = [xAxisPoint[0], xAxisPoint[1]]
        const p3 = [shape.x, shape.y]
        
      
        ctx.moveTo(p0[0], p0[1]); //4
        ctx.lineTo(p1[0], p1[1]); //3
        ctx.lineTo(p2[0], p2[1]); //3
        ctx.lineTo(p3[0], p3[1]); //3
        ctx.closePath();
    }
});
var MyCubeShadow = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        const api = shape.api;
        const xAxisPoint = api.coord([shape.xValue, 0]);
        const p0 = [shape.x + 18, shape.y - 8];
        const p1 = [xAxisPoint[0] + 18, xAxisPoint[1] - 5]
        const p2 = [xAxisPoint[0], xAxisPoint[1]]
        const p3 = [shape.x, shape.y]
        
      
        ctx.moveTo(p0[0], p0[1]); //4
        ctx.lineTo(p1[0], p1[1]); //3
        ctx.lineTo(p2[0], p2[1]); //3
        ctx.lineTo(p3[0], p3[1]); //3
        ctx.closePath();
    }
});
var MyCubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath: function(ctx, shape) {
    const c1 = [shape.x, shape.y]
    const c2 = [shape.x + 19, shape.y - 8]
    const c3 = [shape.x + 5, shape.y - 22]
    const c4 = [shape.x - 18, shape.y - 10]
    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('MyCubeRect', MyCubeRect);
echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow);
echarts.graphic.registerShape('MyCubeTop', MyCubeTop);
var seriesData =  [20,100,50,44,12];
option = {
    grid: {
        height: 300
    },
    xAxis: {
        data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
    },
    yAxis: {
        type: 'value'
    },

tooltip: {
　　　　trigger: 'axis',
　　　　axisPointer: {
　　　　type: 'cross',
　　　　crossStyle: {
　　　　　　color: '#999'
　　　　}
　　}
},

    series: [{
        type: 'custom',
        data: seriesData,
        renderItem: function (params, api) {
            let location = api.coord([api.value(0), api.value(1)]);
            return {
                type: 'group',
                children: [
               {
                    type: 'MyCubeRect',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1]
                    },
                    style: {
                        fill: 'rgba(0,178,255,1)',//平面顏色
                        stroke: '#555',
                    }
                },
                {
                    type: 'MyCubeShadow',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1]
                    },
                    style: {
                        fill: 'rgba(0,178,255,1)',//平面顏色
                        stroke: '#555',
                    }
                },
                {
                    type: 'MyCubeTop',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                        fill: 'rgba(0,178,255,1)',//平面顏色
                        stroke: '#555',
                    }
                }
                ]
            };
        }
    }]
};