技術標籤：web前端Echarts

非常簡單，直接上程式碼，修改option->series->bar的配置

 {
            type: 'bar',
            data: [100, 200, 800, 100],
            barWidth: 30,
            showBackground: true,
            backgroundStyle: {
                color: '#0F173F'
            },
            z: 10,
            label: {
 

                show: true,
                position: 'top',
                color: "#fff",
                fontSize: 15,
            },
            itemStyle: {
                normal: {
                    //每根柱子顏色設定
                    color: function (params) {
                        let
 
 colorList = [
                            new echarts.graphic.LinearGradient(
                                1, 1, 1, 0,
                                [
                                    { offset: 0, color: '#121D30' },                   //柱圖漸變色
                                    { offset: 1, color:
 
 '#FA1F2B' },                   //柱圖漸變色
                                ]
                            ),
                            new echarts.graphic.LinearGradient(
                                1, 1, 1, 0,
                                [
                                    { offset: 0, color: '#121D30' },                   //柱圖漸變色
                                    { offset: 1, color: '#FFB526' },                   //柱圖漸變色
                                ]
                            ),
                            new echarts.graphic.LinearGradient(
                                1, 1, 1, 0,
                                [
                                    { offset: 0, color: '#121D30' },                   //柱圖漸變色
                                    { offset: 1, color: '#28B1FF' },                   //柱圖漸變色
                                ]
                            ),
                            new echarts.graphic.LinearGradient(
                                1, 1, 1, 0,
                                [
                                    { offset: 0, color: '#121D30' },                   //柱圖漸變色
                                    { offset: 1, color: '#00E4FF' },                   //柱圖漸變色
                                ]
                            )
                        ];
                        return colorList[params.dataIndex];
                    }
                } 
            },
        },

實現的效果為：