echarts 之 立體柱狀圖

本文地址：https://www.cnblogs.com/veinyin/p/14744293.html

 

示例代碼使用版本：echart V4

使用 V5 將有一點點改動，見最下方更新

 

項目需求，實現立體柱狀圖，基於 echarts 實現，如下圖

 

 

思路：普通柱狀圖（bar） + 象形柱圖（pictorialBar），參考 demo

 

需求中柱狀圖是分組的，因此還是給一下具體配置項如下，只是稍微修改了一點內容，幾個重要的地方加了注釋，可直接貼在 echarts 示例中看效果

 option = {
    tooltip: {
        trigger: 'axis',
        confine: true,
        axisPointer: { type: 'none' },
        textStyle: { fontSize: 12, fontWeight: 500 },
        formatter(params) {
            // 只展示柱子對應的內容，把頂部底部的 tooltip 過濾掉
            return params.reduce((pre, i) => {
                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.seriesName} ${i.value}</div>`;
                    return `${pre}${current}`;
                }
                return pre;
            }, '');
        },
    },
    legend: {
        data: ['武漢', '北京', '上海'],
        right: 10,
        top: 12,
        type: 'scroll',
        icon: 'circle',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 16,

        // 因為柱子頂部和底部是通過 offset 跟柱子結合起來的，如果取消選中，柱子數量變化，又要重新計算 offset，為了簡單點就直接禁掉了
        selectedMode: false,
    },
    grid: { left: '3%', right: '4%', bottom: '5%', containLabel: true },
    xAxis: {
        type: 'category',
        data: ['2020', '2021'],
        axisLine: { lineStyle: { color: '#F2F4F7' } },
        axisTick: { show: false },
        axisLabel: { color: '#585D63' },
    },
    yAxis: {
        boundaryGap: [0, 0.01],
        axisLine: { lineStyle: { color: '#F2F4F7' } },
        axisTick: { show: false },
        axisLabel: { color: '#585D63' },
        splitLine: { lineStyle: { color: '#F2F4F7' } },
    },
    series: [
        {
            name: '武漢',
            type: 'bar',
            barWidth: 24,
            barCategoryGap: 12,
            data: ['11.8651', '4.9385'],
            itemStyle: {
　　　　　　　　　 // 柱體漸變色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#E1A4FF',
                    },
                    {
                        offset: 1,
                        color: '#C65FF9',
                    },
                ])
            },
        },
        {
            name: '武漢',
            type: 'pictorialBar',
            symbolSize: [24, 6],

            // 這個屬性很重要，直接決定了頂部跟柱子是否契合
            symbolOffset: [-31, -3],

            z: 12,
            itemStyle: { color: '#C65FF9' },
            symbolPosition: 'end',

            // 要給成武漢這兩個柱子的值，這是圓柱頂部，值不給對高度會對不上
            data: ['11.8651', '4.9385'],
        },
        {
            name: '武漢',
            type: 'pictorialBar',
            symbolSize: [24, 6],
            symbolOffset: [-31, 3],
            z: 12,
            itemStyle: { color: '#C65FF9' },
            symbolPosition: 'start',

　　　　　　　// 這個給成大於 0 的值就行，設置了 position，一定會在柱子底部展示
            data: [1, 1],
        },
        {
            name: '北京',
            type: 'bar',
            barWidth: 24,
            barCategoryGap: 12,
            data: ['3.7493', '1.5536'],
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#FFAC97',
                    },
                    {
                        offset: 1,
                        color: '#FF704C',
                    },
                ])
            },
        },
        {
            name: '北京',
            type: 'pictorialBar',
            symbolSize: [24, 6],
            symbolOffset: [0, -3],
            z: 12,
            itemStyle: { color: '#FF704C' },
            symbolPosition: 'end',
            data: ['3.7493', '1.5536'],
        },
        {
            name: '北京',
            type: 'pictorialBar',
            symbolSize: [24, 6],
            symbolOffset: [0, 3],
            z: 12,
            itemStyle: { color: '#FF704C' },
            symbolPosition: 'start',
            data: ['3.7493', '1.5536'],
        },
        {
            name: '上海',
            type: 'bar',
            barWidth: 24,
            barCategoryGap: 12,
            data: ['56.1131', '23.6478'],
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: '#71A8FE',
                    },
                    {
                        offset: 1,
                        color: '#2872FC',
                    },
                ])
            },
        },
        {
            name: '上海',
            type: 'pictorialBar',
            symbolSize: [24, 6],
            symbolOffset: [31, -3],
            z: 12,
            itemStyle: { color: '#2872FC' },
            symbolPosition: 'end',
            data: ['56.1131', '23.6478'],
        },
        {
            name: '上海',
            type: 'pictorialBar',
            symbolSize: [24, 6],
            symbolOffset: [31, 3],
            z: 12,
            itemStyle: { color: '#2872FC' },
            symbolPosition: 'start',
            data: ['56.1131', '23.6478'],
        },
    ],
    
    // legend 對應的 color，實際上柱狀圖的顏色都是在 itemStyle 里定義的
    color: ['#C65FF9', '#FF704C', '#2872FC'],
}

 

2022.8.21 更新

echarts 版本更新成 v5 了，現在官網示例版本也是 v5，上述代碼是 v4 適用的

版本更新導致的最顯著問題是 象形柱圖和柱體出現了一定的偏移，如下圖紫色柱子

 

原因：barGap 默認值變小了，從 30% 變成了 20%，導致象形柱圖的橫向 offset 不太對

 

橫向 offfset 計算：

如下圖所示，默認是0，位於正中間，橙色橢圓的 offsetX 就是 0。與數軸類似，向左是負，向右是正

不考慮正負，奇數個柱體 offset = n * (barWidth + barGap)，偶數個 offset = (n - 1 / 2) * (barWidth + barGap)

 

柱體寬通過 barWidth 設置，比如本文中設置的是 24

間隙寬通過 barGap 設置，本文中未設置則采用默認值 barWidth * 30% = 8，v5 版本是 20% ，算出來是 4.8

 

藍色柱子的橢圓橫向 offset 就應該是 24 + 4.8 = 29 

對應到配置項： symbolOffset: [29, -3]