echarts每個柱條設置不同的顏色

本來好好的柱子,今天要求柱條顏色要用系統名稱對應的顏色,如下圖。(花裏胡哨的,但是我不發表任何意見,讓我改我就改-------一個莫得感情的代碼搬運工)

 實現代碼

var provideNumber = 4;
    if($(document.body).width() > 1800){
        provideNumber = 6;
    }
    var myCharts = echarts.init(document.getElementById('usersChart'));
    var option = {
        tooltip : {
            trigger: 'axis',
        },
        grid: {
            left: '22%',
        },
        xAxis:  {
            type: 'value',
            splitLine:{show: false},//去除網格線
            position:'top',//座標軸位置
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1,//這裏是爲了突出顯示加上的
                }
            }
        },
        yAxis: {
            type: 'category',
            // name:'系統名稱',
            data: [],
            splitLine:{show: false},//去除網格線
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1,//這裏是爲了突出顯示加上的
                }
            },
            axisLabel : {//座標軸刻度標籤的相關設置。
                formatter : function(params){
                   var newParamsName = "";
                    var paramsNameNumber = params.length;

                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber) {
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = "";
                            var start = p * provideNumber;// 開始截取的位置
                            var end = start + provideNumber;// 結束截取的位置
                            if (p == rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                tempStr = params.substring(start, end) + "\n";
                            }
                            newParamsName += tempStr;// 最終拼成的字符串
                        }
                    } else {
                        newParamsName = params;
                    }
                    return newParamsName
                },
                fontSize: 16,//字體大小
            }
        },
        series: [
            {
                name: '個數',
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'inside'
                    }
                },
                data: [],
                itemStyle:{
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                            {offset: 1, color: '#00adff'},
                            {offset: 0.5, color: '#007dfe'},
                            {offset: 0, color: '#0054fd'},                   // 原本的柱圖漸變色
                        ]
                    )
                },
                barMaxWidth:40
            },
        ]
    };
    myCharts.setOption(option,true);
    myCharts.showLoading();     //顯示加載動畫

    var sysdata = [];
    var countdata = [];
    var selectnum = 0;
    var colors = [];

    $.ajax({
        url: "/users/get_count_by_selected_sys",
        type: 'GET',
        data:{
            "sys_name":chartparams
        },
        dataType: "json",
        success: function (data) {
               var code = data['code']; //狀態標示<0處理異常,>=0正常處理
               var msg = data['msg']; //狀態消息,如:成功,失敗,等信息
               var datalist = data['data'];

               if (code < 0) {

               } else {
                   for(var i = 0; i < datalist.length; i ++){
                       sysdata.push(datalist[i].short_name);
                       countdata.push(datalist[i].user_count);
                       selectnum += datalist[i].user_count;
                        colors.push(datalist[i].icon_colour);
                   }
               }
               $("#selectednum").html(selectnum);
                    myCharts.hideLoading();             //隱藏加載效果
                    myCharts.setOption({
                         yAxis: {
                            type: 'category',
                            data: sysdata
                        },
                         series: [
                            {
                                data: countdata,
                                itemStyle:{
                                    normal:{
                            //每個柱子的顏色即爲colors數組裏的每一項,如果柱子數目多於colors的長度,則柱子顏色循環使用該數組
                                        color: function (params){
                                            return colors[params.dataIndex];
                                        }
                                    },
                                },
                            },

                        ]
                     });
                    window.addEventListener("resize", function () {
                        myCharts.resize();
                    });
           },
        error:function (errorlog) {
        }
    });

 其實實現這個功能的代碼就下圖的一點,上面的代碼是貼上了完整的代碼

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章