echart折線圖，柱狀圖，餅圖設置顏色

之前在做報表的時候用過echart 用完也就完了，而這次在用的時候已經忘了，所以這里簡單記錄一下，好記性不如爛筆頭！！！

1、折線圖修改顏色：

xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['年齡','20歲以下','30歲','40歲','50歲','60歲','60歲以上']
    },
    yAxis: {
        type: 'value'

    },
    series: [
        {
            name:'員工數',
            type:'line',
            stack: '總量',
            itemStyle:{
                normal:{
                     lineStyle:{
                         color:'#b5b5b6'
                     }
                 }
            },
            data:[]// 注意這里的這個括號是要保留雖然返回的數據帶着括號！
        }
    ]

其中的series 中的lineStyle中的 color 就是折現的顏色！

 

2、環形圖修改顏色：

function queryData2(){
 var i=0;
 var colors=['#393939','#f5b031','#fad797','#59ccf7','#c3b4df'];
 myChart2 = echarts.init(document.getElementById('main2'));
    option2 = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:['女','男']
    },
    toolbox: {
        show : true,
        feature : {

            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'性別結構',
            type:'pie',
            radius : ['30%', '70%'],
            itemStyle : {
                normal : {
                    color:function(){
                        return colors[i++];
                        },
                    label : {
                        show : false
                    },
                    labelLine : {
                        show : false
                    }
                },
                emphasis : {
                    label : {
                        show : true,
                        position : 'center',
                        textStyle : {
                            fontSize : '30',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
            data:[]
        }
    ]
};

}

其中 函數開始定義了一個 colors 對象這里保存的都是顏色值，而在series中的itemStyle中的normal 中定義了一個color：function(){ return colors[i++]} 函數，這個函數的作用就是隨機獲取顏色值。這樣就修改了

 

3、柱狀圖：

yAxis : [
             {
                 type : 'value'
             }
         ],
         series : [
             {
                 name:'部門人數',
                 type:'bar',
                 data:[],
                 //顏色
                 itemStyle:{
                     normal:{
                       color:'#f5b031',
                       }
                },
                 markPoint : {
                     data : [
                         {type : 'max', name: '最大值'},
                         {type : 'min', name: '最小值'}
                     ]
                 },
                 markLine : {
                     data : [
                         {type : 'average', name: '平均值'}
                     ]
                 }
             }
         ]

顏色的修改還是在series 中的itemStyle 中的normal 中的color這個值。

 

4、餅圖顏色修改：

var  option = {
              tooltip: {
               trigger: 'item',
               formatter: "{a} <br/>{b}: {c} ({d}%)"
                 },
              //設置餅圖的顏色
             color:['#f6da22','#bbe2e8','#6cacde'],
             legend: {
                      orient: 'vertical',
                      x: 'left',
                      data:['柴油','汽油','附屬油'],
                      show:false
                    },

餅圖的顏色修改和折線圖 環形圖不同，他是單獨出來的！