echarts柱狀圖顏色設置:echarts柱狀圖如何設置不同顏色?(代碼)


xAxis : [

            {

                type : 'category',

//                 name:'額度',

        //這是設置的false,就不不顯示下方的x軸,默認是true的

                show: false,

        //這里呢,就是每個柱的name了,根據實際情況下就好了,我就先寫這三個

                data : ['最多','平均','最少'],

                axisLabel: {

             //這個是傾斜角度,也是考慮到文字過多的時候,方式覆蓋采用傾斜

//                     rotate: 30,

            //這里是考慮到x軸文件過多的時候設置的,如果文字太多,默認是間隔顯示,設置為0,標示全部顯示,當然,如果x軸都不顯示,那也就沒有意義了

                    interval :0

                    }

            }

        ],

        yAxis : [

            {

                type : 'value',

                name:'數量',

          //下面的就很簡單了,最小是多少,最大是多少,默認一次增加多少

                 min: 0,

                 max: 30,

                 interval: 6,

          //下面是顯示格式化,一般來說還是用的上的

                 axisLabel: {

                     formatter: '{value} 包'

                 }

            }

        ],

        series : [

            {

                name: '數量',

                type: 'bar',

                itemStyle: {

                    normal: {

              //好,這里就是重頭戲了,定義一個list,然后根據所以取得不同的值,這樣就實現了,

                        color: function(params) {

                            // build a color map as your need.

                            var colorList = [

                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',

                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',

                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'

                            ];

                            return colorList[params.dataIndex]

                        },

              //以下為是否顯示,顯示位置和顯示格式的設置了

                        label: {

                            show: true,

                            position: 'top',

//                             formatter: '{c}'

                            formatter: '{b}\n{c}'

                        }

                    }

                },

          //設置柱的寬度,要是數據太少,柱子太寬不美觀~

          barWidth:70,

                data: [28,15,9,4,7,8,23,11,17]

            }

        ]

說明:其實還可以利用color來設置柱狀圖顏色,但是有時候color設置是沒有效果的。所以就采用了上述方法。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM