echart折线图，柱状图，饼图设置颜色

之前在做报表的时候用过echart 用完也就完了，而这次在用的时候已经忘了，所以这里简单记录一下，好记性不如烂笔头！！！

1、折线图修改颜色：

1. xAxis: {  
2. 'category',  
3. false,  
4. '年龄','20岁以下','30岁','40岁','50岁','60岁','60岁以上']  
5.     },  
6.     yAxis: {  
7. 'value'  
8.           
9.     },  
10.     series: [  
11.         {  
12. '员工数',  
13. 'line',  
14. '总量',  
15.             itemStyle:{  
16.                 normal:{    
17.                      lineStyle:{    
18. '#b5b5b6'    
19.                      }    
20.                  }  
21.             },  
22. // 注意这里的这个括号是要保留虽然返回的数据带着括号！  
23.         }  
24.     ]

其中的series 中的lineStyle中的 color 就是折现的颜色！

2、环形图修改颜色：

1. function queryData2(){  
2. var i=0;  
3. var colors=['#393939','#f5b031','#fad797','#59ccf7','#c3b4df'];  
4. 'main2'));  
5.     option2 = {  
6.     tooltip : {  
7. 'item',  
8. "{a} <br/>{b} : {c} ({d}%)"  
9.     },  
10.     legend: {  
11. 'vertical',  
12. 'left',  
13. '女','男']  
14.     },  
15.     toolbox: {  
16. true,  
17.         feature : {  
18.           
19. true}  
20.         }  
21.     },  
22. true,  
23.     series : [  
24.         {  
25. '性别结构',  
26. 'pie',  
27. '30%', '70%'],  
28.             itemStyle : {  
29.                 normal : {  
30. function(){  
31. return colors[i++];   
32.                         },  
33.                     label : {  
34. false  
35.                     },  
36.                     labelLine : {  
37. false  
38.                     }  
39.                 },  
40.                 emphasis : {  
41.                     label : {  
42. true,  
43. 'center',  
44.                         textStyle : {  
45. '30',  
46. 'bold'  
47.                         }  
48.                     }  
49.                 }  
50.             },  
51.             data:[]  
52.         }  
53.     ]  
54. };  
55.    
56. }

其中 函数开始定义了一个 colors 对象这里保存的都是颜色值，而在series中的itemStyle中的normal 中定义了一个color：function(){ return colors[i++]} 函数，这个函数的作用就是随机获取颜色值。这样就修改了

3、柱状图：

1. yAxis : [  
2.              {  
3. 'value'  
4.              }  
5.          ],  
6.          series : [  
7.              {  
8. '部门人数',  
9. 'bar',  
10.                  data:[],  
11. //颜色  
12.                  itemStyle:{  
13.                      normal:{  
14. '#f5b031',  
15.                        }  
16.                 },  
17.                  markPoint : {  
18.                      data : [  
19. 'max', name: '最大值'},  
20. 'min', name: '最小值'}  
21.                      ]  
22.                  },  
23.                  markLine : {  
24.                      data : [  
25. 'average', name: '平均值'}  
26.                      ]  
27.                  }  
28.              }  
29.          ]

颜色的修改还是在series 中的itemStyle 中的normal 中的color这个值。

4、饼图颜色修改：

1. var  option = {  
2.               tooltip: {  
3. 'item',  
4. "{a} <br/>{b}: {c} ({d}%)"  
5.                  },  
6. //设置饼图的颜色  
7. '#f6da22','#bbe2e8','#6cacde'],  
8.              legend: {  
9. 'vertical',  
10. 'left',  
11. '柴油','汽油','附属油'],  
12. false  
13.                     },

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