echart-漸變色背景

先上圖

為了優化界面，設計采用了 漸變色來填充柱狀圖 

配置項 series 

    series : [
            {
                name: '數量',
                type: 'bar',
                itemStyle: {
                    normal: {
                        //顏色設置
                        color: function(params) {
                            // 漸變色 設置
                            var color1=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#52ce98" // 0% 處的顏色
                            },{
                                offset: 1,
                                color: "#89fac9" // 100% 處的顏色
                            }], false)
                            var color2=new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#ffd835" // 0% 處的顏色
                            }, {
                                offset: 1,
                                color: "#f6f479" // 100% 處的顏色
                            }], false)

                            var colorList = [
                                color2,color1

                                // '#7B68EE','#A020F0' 純色設置
                            ];
                            return colorList[params.dataIndex]
                        },
                        //以下為是否顯示，顯示位置和顯示格式的設置了
                        label: {
                            show: true,
                            position: 'top',
                            formatter: '{b}\n{c}'
                        }
                    }
                },
                //設置柱的寬度，要是數據太少，柱子太寬不美觀~
                barWidth:30,
                data: [26, 74]
            }
        ]

　　 漸變色 方向控制

0, 0, 1, 0  分別指的是 右/下/左/上四個方位.   0, 0, 1, 0代表從左邊開始向右邊漸變

　　　　　　　　　　　　　　　　　　　　　　　　　1， 0 ，0 ，1 代表從右上方向左下方漸變
因為展示的柱狀圖是 橫向的 所以使用了 0, 0, 1, 0，意思是漸變色從左邊開始向右邊漸變 

offset 是0——1之間的數字 0， 0.5 ，1 來分別設置漸變色的顏色，和css的gradient的用法一樣。

new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: "#52ce98" // 0% 處的顏色
                            },{
                                offset: 1,
                                color: "#89fac9" // 100% 處的顏色
                            }], false)

　　

這樣就實現了