echarts鏈接：http://gallery.echartsjs.com/editor.html?c=xByfdMz7mM

代碼：

option = {
    backgroundColor: ‘black‘,
    tooltip: {
        trigger: ‘axis‘,
        backgroundColor: ‘rgba(255,255,255,0.8)‘,
        extraCssText: ‘box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);‘,
        textStyle: {
            color: ‘#6a717b‘,
        },

    },
    grid: {
        top: 
 
‘0.5%‘,
        left: ‘3%‘,
        right: ‘11%‘,
        bottom: ‘2.5%‘,
        containLabel: true
    },
    yAxis: [{
        type: ‘category‘,
        data: [‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘, ‘f‘, ‘g3‘, ‘h‘, ‘i‘, ‘j‘],
        inverse: true,
        axisTick: {
            alignWithLabel: true,


        },
        axisLabel: {
            margin: 
 
10,
            textStyle: {
                fontSize: 18,
                color: ‘white‘
            }
        },
        axisLine: {
            lineStyle: {
                color: ‘#2548ac‘
            }
        },

    }],
    xAxis: [{
        type: ‘value‘,
        axisLabel: {
            margin: 
 
10,
            interval: 1, //橫軸信息全部顯示  
            rotate: -30, //-15度角傾斜顯示  
            textStyle: {
                fontSize: 18,
                color: ‘white‘,
            }
        },
        axisLine: {
            lineStyle: {
                color: ‘#192469‘
            }
        },
        splitLine: {
            lineStyle: {
                color: ‘#17367c‘
            }
        }
    }],
    series: [{
        name: ‘Top 10‘,
        type: ‘bar‘,
        barWidth: 26,
        data: [8827896, 7472072, 7433391, 7137253, 6382192, 5268842, 4827026, 3935701, 3875562, 3839609],
        label: {
            normal: {
                show: true,
                position: ‘insideRight‘,
                textStyle: {
                    color: ‘blue‘, //color of value
                    fontSize: 18,
                }
            }
        },
        itemStyle: {

            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: ‘#0590eb‘ // 0% 處的顏色
                }, {
                    offset: 1,
                    color: ‘#08e3f1‘ // 100% 處的顏色
                }], false),
                barBorderRadius: [0, 15, 15, 0],
                shadowColor: ‘rgba(0,0,0,0.1)‘,
                shadowBlur: 3,
                shadowOffsetY: 3
            }
        }
    }]
};

echarts橫向柱狀圖Demo