echarts 柱狀圖漸變色背景

如何製作柱狀圖漸變色背景，我們可以先參考 echarts 柱狀圖顏色設置。接下來我們來實戰一下，看看這次的效果圖吧。

首先我們可以看到，X 軸表示數據，Y軸表示類別。柱狀圖上有該地區的數量，同時柱狀圖顏色從左到右是漸變色，在漸變色的盡頭我們可以看到給柱狀圖添加的圓角。

一、設置 XY 座標軸

xAxis: {
    type: 'value',
    show: false
},
yAxis: {
    type: 'category',
    axisLabel: {
        show: true,
        textStyle: {
            color: '#fff'
        }
    },
    axisTick: {
        show: false
    },
    axisLine: {
        show: false
    },
    data: ['西北區', '西南區', '東北區', '華北區', '華東區', '華中區', '華南區']
},

二、設置標籤內容以及位置

series: [
    {
        name: '數量',
        type: 'bar',
        label: {
            normal: {
                show: true,
                formatter:function(params){ //標籤內容
                    return  params.value
                },
                position: 'inside',
                fontSize: 10,
                color:'#000'
            }
        }
    }    
]

三、柱狀圖顏色漸變

series: [
    {
        name: '數量',
        type: 'bar',
        itemStyle: {
            normal: {
                //顏色設置
                color: function(params) {
                    // 漸變色 設置
                    var color1=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#e30430" // 0% 處的顏色
                    },{
                        offset: 1,
                        color: "#f6c6a2" // 100% 處的顏色
                    }], false)
                    var color2=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#d16922" // 0% 處的顏色
                    }, {
                        offset: 1,
                        color: "#fcc09c" // 100% 處的顏色
                    }], false)
                    var color3=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#77bc00" // 0% 處的顏色
                    },{
                        offset: 1,
                        color: "#dbc782" // 100% 處的顏色
                    }], false)
                    var color4=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#1dc4bc" // 0% 處的顏色
                    }, {
                        offset: 1,
                        color: "#f5f7f2" // 100% 處的顏色
                    }], false)
                    var color5=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#1210cd" // 0% 處的顏色
                    },{
                        offset: 1,
                        color: "#e1ebf5" // 100% 處的顏色
                    }], false)
                    var color6=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#ffd835" // 0% 處的顏色
                    }, {
                        offset: 1,
                        color: "#fcf6da" // 100% 處的顏色
                    }], false)
                    var color7=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: "#772ace" // 0% 處的顏色
                    },{
                        offset: 1,
                        color: "#dec7fc" // 100% 處的顏色
                    }], false)

                    var colorList = [
                        color7,color6,color5,color4,color3,color2,color1
                    ];
                    return colorList[params.dataIndex]
                },
            }
        },
    }    
]

四、設置柱狀圖圓角

series: [
    {
        name: '數量',
        type: 'bar',
        itemStyle: {
            normal: {
                barBorderRadius:[0, 30, 30, 0]
            }
        },
    }    
]