繪制這個(gè)立體的圓柱體柱狀圖主要由三塊組成: 底部 主體 頂部

實(shí)現(xiàn)這種效果主要是: ECharts中的 series 屬性,通過兩種不同類型的圖表組合而成.

其中里面的柱體漸變色是通過 ECharts中內(nèi)置的漸變色生成器 echarts.graphic.LinearGradient

可以用來設(shè)置漸變色.

itemStyle: { // 圖形樣式
    // echarts.graphic.LinearGradient(echarts內(nèi)置的漸變色生成器)
    // 4個(gè)參數(shù)用于配置漸變色的起止位置,這4個(gè)參數(shù)依次對(duì)應(yīng)右 下 左 上
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
       // 這里 offset: 0 1 ,表示從下往上的漸變色
        {
             offset: 0, // 0%處的顏色
             color: "rgba(31,155,255,1)"
        },
        {
             offset: 1, // 100%處的顏色
             color: "rgba(0,229,255,1)"
        }
    ])
 }

在柱狀圖中我們也可以使用下面來實(shí)現(xiàn)漸變色:

Documentation - Apache ECharts文章來源地址http://www.zghlxwxcb.cn/news/detail-537367.html

itemStyle: { // 圖形樣式
    // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持漸變色和紋理填充)
    // 下面就是使用線性漸變
    color: {
        "x": 0,
        "y": 0,
        "x2": 0,
        "y2": 1,
        "type": "linear",
        "global": false,
        "colorStops": [{
        ? ? "offset": 0, // 0%處的顏色
        ? ? "color": "rgba(0,229,255,0.5)"
        },
? ? ? ? {
        ? ? "offset": 1, // 100%處的顏色
         ? ? "color": "#1F9BFF"
         }]
    }
}

完整代碼:

<div id="fftjChart"></div>

let fftjChart = null;

onMounted(()=>{
? ? fftjChart = echarts.init(document.getElementById('fftjChart'));
? ? drawFftjChart();

? ? window.addEventListener('resize', () => {
? ? ? ? fftjChart.resize();
? ? })
})

function drawFftjChart() {
        let yData = [300, 498, 778, 382, 299, 372];
        fftjChart.setOption({
            grid: {
                left: '5%',
                right: '5%',
                top: '5%',
                bottom: '5%',
                containLabel: true
            },
            tooltip: {
                trigger: 'item',
                formatter: function (parms) {
                    return parms.marker + " " + parms.name + "：" + parms.value + "萬元";
                }
            },
            xAxis: {
                type: 'category', // category(坐標(biāo)軸類型)
                data: ['建安區(qū)', '魏都區(qū)', '長(zhǎng)葛市', '禹州市', '襄城縣', '鄢陵縣'],
                axisTick: { // 坐標(biāo)軸刻度相關(guān)配置
                    show: false // 是否顯示坐標(biāo)軸刻度
                },
                axisLine: { // 坐標(biāo)軸軸線相關(guān)配置
                    lineStyle: { // 坐標(biāo)軸軸線樣式
                        color: 'rgba(255,255,255,0.15)' // 坐標(biāo)軸軸線顏色
                    }
                },
                axisLabel: { // 坐標(biāo)軸刻度標(biāo)簽相關(guān)配置
                    color: '#ffffff',
                    fontSize: 14,
                    margin: 20
                }
            },
            yAxis: {
                type: 'value', // value(數(shù)值軸,適用于連續(xù)數(shù)據(jù))
                axisTick: { // 坐標(biāo)軸刻度相關(guān)配置
                    show: false  // 是否顯示坐標(biāo)軸刻度
                },
                axisLine: { // 坐標(biāo)軸軸線相關(guān)配置
                    show: false // 是否顯示坐標(biāo)軸軸線
                },
                axisLabel: { // 坐標(biāo)軸刻度標(biāo)簽相關(guān)配置
                    color: '#ffffff',
                    fontSize: 14
                },
                splitLine: { // 坐標(biāo)軸在 grid 區(qū)域中的分隔線
                    lineStyle: { // 分割線配置
                        color: 'rgba(255,255,255,0.15)' // 分割線顏色
                    }
                }
            },
            series: [
                // 底部的橢圓形(象形柱圖):pictorialBar
                {
                    type: "pictorialBar", // pictorialBar(象形柱圖)
                    label: { // 圖形上的文本標(biāo)簽,可用于說明圖像的一些數(shù)據(jù)信息,比如值,名稱等
                        show: true, //是否顯示標(biāo)簽
                        position: ['17', '-30'], // 標(biāo)簽的位置(可以是絕對(duì)的像素值或者百分比['50%','50%',也可以是top,left等])
                        color: '#01E4FF',
                        fontSize: 14
                    },
                    symbolSize: [40, 20], // 圖形的大小用數(shù)組分別比表示寬和高,也樂意設(shè)置成10相當(dāng)于[10,10]
                    symbolOffset: [0, 10], // 圖形相對(duì)于原本位置的偏移
                    z: 12, // 象形柱狀圖組件的所有圖形的 z 值.控制圖形的前后順序.z 值小的圖形會(huì)被 z 值大的圖形覆蓋.
                    itemStyle: { // 圖形樣式
                        // echarts.graphic.LinearGradient(echarts內(nèi)置的漸變色生成器)
                        // 4個(gè)參數(shù)用于配置漸變色的起止位置,這4個(gè)參數(shù)依次對(duì)應(yīng)右 下 左 上
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            // 這里 offset: 0 1 ,表示從下往上的漸變色
                            {
                                offset: 0, // 0%處的顏色
                                color: "rgba(31,155,255,1)"
                            },
                            {
                                offset: 1, // 100%處的顏色
                                color: "rgba(0,229,255,1)"
                            }
                        ])
                    },
                    data: yData
                },
                // 中間的長(zhǎng)方形柱狀圖(柱狀圖):bar
                {
                    type: 'bar', // 柱狀圖
                    barWidth: 40, // 柱條的寬度,不設(shè)時(shí)自適應(yīng)
                    barGap: '0%', // 柱子與柱子之間的距離
                    itemStyle: { // 圖形樣式
                        // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持漸變色和紋理填充)
                        // 下面就是使用線性漸變
                        color: {
                            "x": 0,
                            "y": 0,
                            "x2": 0,
                            "y2": 1,
                            "type": "linear",
                            "global": false,
                            "colorStops": [{
                                "offset": 0, // 0%處的顏色
                                "color": "rgba(0,229,255,0.5)"
                            }, {
                                "offset": 1, // 100%處的顏色
                                "color": "#1F9BFF"
                            }]
                        }
                    },
                    data: yData
                },
                // 頂部的橢圓形(象形柱圖):pictorialBar
                {
                    type: "pictorialBar",
                    symbolSize: [40, 20],
                    symbolOffset: [0, -10],
                    z: 12,
                    symbolPosition: "end",
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "rgba(31,155,255,1)"
                            },
                            {
                                offset: 1,
                                color: "rgba(0,229,255,1)"
                            }
                        ], false)
                    },
                    data: yData
                }
            ]
        });
    }