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
                    },

饼图的颜色修改和折线图 环形图不同，他是单独出来的！