之前在做报表的时候用过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. },
饼图的颜色修改和折线图 环形图不同,他是单独出来的!