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

Posted 2020-10-18 香吧香

转载：

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

1、折线图修改颜色：

[javascript] view plain copy

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

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

 

2、环形图修改颜色：

[javascript] view plain copy

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

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

 

3、柱状图：

[javascript] view plain copy

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

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

 

4、饼图颜色修改：

[javascript] view plain copy

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

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