使用echarts模擬立體柱形圖

注意：請使用echarts v4.4.0以上版本

相關API介紹

• graphic——ECharts 圖表中原生圖形元素組件 graphic 可以支持包括：image，circle，ring，polygon，rect，bezierCurve，arc 等圖形元素，我們可以用這些元素組合成我們想要的圖形。

• graphic.registerShape——創建一個新的 shape class， 用 echarts.graphic.extendShape 註冊生成以後，可用 getShapeClass得到。

相關配置項介紹

renderItem 函數提供了兩個參數：

1. params：包含了如下信息：

參數	數據類型	說明
context:	Object	一個可供開發者暫存東西的對象。生命週期只爲：當前次的渲染
seriesId	string	本系列 id
seriesName:	string	本系列 name
seriesIndex	number	本系列 index
dataIndex	number	數據項的 index
dataIndexInside	number	數據項在當前座標系中可見的數據的 index
dataInsideLength	number	當前座標系中可見的數據長度
actionType	string	觸發此次重繪的 action 的 type

2. api：是一些開發者可調用的方法集合（如 api.value()、api.coord()）。

• api.coord ——將數據值映射到座標系上，畫布上的點的座標，至少包含：[x, y]
• api.style ——定義的樣式信息和視覺映射得到的樣式信息，以下爲部分參考：

名稱	類型	默認值	描述
culling	boolean	false	是否進行裁剪
progressive	number	-1	是否漸進式渲染
fill	string	‘#000’	描邊樣式
stroke	string	‘#000’	填充樣式
opacity	string	null	不透明度
lineDash	number	null	描邊虛線樣式
text	string	null	在圖形中顯示的文字
font	string	null	文字樣式

上代碼😄

var MyCubeRect = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
        width: 24, //柱寬        
        zWidth: 4, //陰影折角寬        
        zHeight: 0, //陰影折角高 
    },
    buildPath: function (ctx, shape) {
        const api = shape.api;
        //座標系列
        const xAxisPoint = api.coord([shape.xValue, 0]);
        const p0 = [shape.x, shape.y];
        const p1 = [shape.x - 15, shape.y];
        const p4 = [shape.x + 15, shape.y];
        const p2 = [xAxisPoint[0] - 15, xAxisPoint[1]];
        const p3 = [xAxisPoint[0] + 15, xAxisPoint[1]];
        // 描繪的圖形 
        ctx.moveTo(p0[0], p0[1]); //0
        ctx.lineTo(p1[0], p1[1]); //1
        ctx.lineTo(p2[0], p2[1]); //2
        ctx.lineTo(p3[0], p3[1]); //3
        ctx.lineTo(p4[0], p4[1]); //4
        ctx.lineTo(p0[0], p0[1]); //0
        ctx.closePath();
    }
});
var MyCubeShadow = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
        width: 15,
        zWidth: 6,
        zHeight: 4,
    },
    buildPath: function (ctx, shape) {
        const api = shape.api;
        const xAxisPoint = api.coord([shape.xValue, 0]);
        const p0 = [shape.x, shape.y];
        const p1 = [shape.x - 15, shape.y];
        const p4 = [shape.x + 15, shape.y];
        const p6 = [shape.x + 15 + 8, shape.y - 4];
        const p7 = [shape.x - 15 + 8, shape.y - 4];
        const p3 = [xAxisPoint[0] + 15, xAxisPoint[1]];
        const p5 = [xAxisPoint[0] + 15 + 8, xAxisPoint[1] - 4];
      
        ctx.moveTo(p4[0], p4[1]); //4
        ctx.lineTo(p3[0], p3[1]); //3
        ctx.lineTo(p5[0], p5[1]); //5
        ctx.lineTo(p6[0], p6[1]); //6
        ctx.lineTo(p4[0], p4[1]); //4
      
        ctx.moveTo(p4[0], p4[1]); //4
        ctx.lineTo(p6[0], p6[1]); //6
        ctx.lineTo(p7[0], p7[1]); //7
        ctx.lineTo(p1[0], p1[1]); //1
        ctx.lineTo(p4[0], p4[1]); //4
        ctx.closePath();
    }
});
echarts.graphic.registerShape('MyCubeRect', MyCubeRect);
echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow);
var seriesData =  [20,100,50,44,12];
option = {
    grid: {
        height: 300
    },
    xAxis: {
        data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
    },
    yAxis: {
        type: 'value'
    },
    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 屬性描述了這個矩形的像素位置和大小
                    shape: {
                        api,
                        xValue: api.value(0),//表示取出當前 dataItem 中第一個維度的數值
                        yValue: api.value(0), 
                        x: location[0],
                        y: location[1]
                        
                    },
                    style: {
                        stroke: 'yellow', //邊框顏色
                        fill: '#3773e1', //平面顏色
                        text:seriesData[params.dataIndex],
                        textPosition:[10,-20] //文字顯示位置
                    }
                },
               
                {
                    type: 'MyCubeShadow',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1]
                    },
                    style: {
                        stroke: 'yellow', //邊框顏色
                        fill: '#3773e1'//平面顏色

                    }
                }]
            };
        }
    }]
};

效果圖