echart 折线图、柱状图、饼图、环形图颜色修改

之前在做报表的时候用过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. series: [
10. {
11. name:‘员工数‘,
12. type:‘line‘,
13. stack: ‘总量‘,
14. itemStyle:{
15. normal:{
16. lineStyle:{
17. color:‘#b5b5b6‘
18. }
19. }
20. },
21. data:[]// 注意这里的这个括号是要保留虽然返回的数据带着括号！
22. }
23. ]

其中的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. saveAsImage : {show: true}
19. }
20. },
21. calculable : true,
22. series : [
23. {
24. name:‘性别结构‘,
25. type:‘pie‘,
26. radius : [‘30%‘, ‘70%‘],
27. itemStyle : {
28. normal : {
29. color:function(){
30. return colors[i++];
31. },
32. label : {
33. show : false
34. },
35. labelLine : {
36. show : false
37. }
38. },
39. emphasis : {
40. label : {
41. show : true,
42. position : ‘center‘,
43. textStyle : {
44. fontSize : ‘30‘,
45. fontWeight : ‘bold‘
46. }
47. }
48. }
49. },
50. data:[]
51. }
52. ]
53. };
54. }

其中 函数开始定义了一个 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. },

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

原文地址：https://www.cnblogs.com/telwanggs/p/8521385.html