码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2017-12-23 15:59:13      阅读：181      评论：0      收藏：0      [点我收藏+]

标签：save   报表   on()   记录   charts   var   trigger   saveas   pie   

转载：

之前在做报表的时候用过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.                     },  


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

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

标签：save   报表   on()   记录   charts   var   trigger   saveas   pie   

原文地址：http://www.cnblogs.com/zjdxr-up/p/8093385.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！