echarts-----漸變色橫向柱狀圖

效果圖：

 

代碼如下：

 

option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        // 坐標軸指示器，坐標軸觸發有效
                        type: "shadow" // 默認為直線，可選為：'line' | 'shadow'
                    }
                },

                grid: {
                    left: "4%",
                    right: "10%",
                    bottom: "0%",
                    top: '0%', //去掉標題，圖表整體往上移動
                    containLabel: true
                },
                xAxis: {
                    type: "value",
                    show: false,//直接設置show|的屬性的話x軸的軸線和垂直於它的網格線以及x軸數據會一起顯示隱藏，這里需要全部隱藏包括所以直接show，如果需要單獨給它們設置顯示隱藏詳見以下設置
                    // axisLine: {//y軸軸線
                    //     show: false
                    // },
                    // axisTick: {
                    //     //y軸刻度線
                    //     show: false
                    // },
                    // splitLine: {//去除網格線
                    //     show: false
                    // },
                    bottom: 2,
                    boundaryGap: ['0%', '1%'],//留白大小，坐標軸1邊留白,橫向柱狀圖的右側label**人不會超出寬度被隱藏
                },
                yAxis: {
                    boundaryGap: ['0%', '1%'],//留白大小，坐標軸1邊留白
                    axisLabel: {
                        fontSize: 15,
                        color: '#05CCCA',
                        interval: 0,
                        //margin: 95,
                        margin: 25,
                        //textStyle: {
                        //    align: 'left',
                        //    baseline: 'left'
                        //}
                    },
                    type: "category",
                    data: ['道院', '正山門', '觀音崖', '感恩閣','仙橋'],
                    axisTick: {
                        //y軸刻度線
                        show: false
                    },
                    axisLine: {//y軸軸線
                        show: false
                    }

                },
                series: [{
                    name: "在線用戶數",
                    top: 10,
                    color: "#00A6FC",
                    type: "bar",
                    stack: "總量",
                    barCategoryGap: 2,
                    itemStyle: {
                        //通常情況下：
                        normal: {

                            barBorderRadius: 8,
                            //每個柱子的顏色即為colorList數組里的每一項，如果柱子數目多於colorList的長度，則柱子顏色循環使用該數組
                            color: function (params) {
                                var colorList = [
                                    ['#039EE6', '#7006D9'],
                                    ['#E9EE1C', '#08C6E2'],
                                    ['#61dbe8', '#0785de'],
                                    ['#ff9717', '#ff4518'],
                                ];
                                var index = params.dataIndex;
                                if (params.dataIndex >= colorList.length) {
                                    index = params.dataIndex - colorList.length;
                                }
                                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                    offset: 0,
                                    color: colorList[index][0]
                                },
                                {
                                    offset: 1,
                                    color: colorList[index][1]
                                }
                                ]);
                            }
                        },
                    },
                    label: {
                        formatter: "{c}人",
                        right: '3%',
                        show: true,
                        textStyle: {
                            fontWeight: 400,
                            fontSize: 14,
                            color: "#069AE6"
                        },
                        position: "right"
                    },
                    //設置柱的寬度
                    barWidth: 12,
                    //  height:'70%',
                    data: [820, 832, 901, 934, 790]
                    // data: countData
                }]
            }