博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
echart 折线图、柱状图、饼图、环形图颜色修改
阅读量:5905 次
发布时间:2019-06-19

本文共 1865 字,大约阅读时间需要 6 分钟。

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

1、折线图修改颜色:

 

[javascript] 
 
 
  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] 
 
 
  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] 
 
 
  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] 
 
 
  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.                     },  

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

转载地址:http://pccpx.baihongyu.com/

你可能感兴趣的文章
如何彻底删除文件,让文件没办法恢复,保证数据安全?
查看>>
使用Supervisor管理进程
查看>>
nodejs pm2配置使用教程
查看>>
The given object has a null identifier解决.
查看>>
GreenPlum简单性能测试与分析
查看>>
reactJS -- 10 独立组件间共享Mixins
查看>>
【HIMI转载推荐之三】基于Cocos2dx引擎UI扩展引擎包[cocos2d-x-3c]
查看>>
教大家提高Vista系统的安全
查看>>
bash的case语句,for语句
查看>>
《罗一笑,你给我站住》被指为P2P公司炒作
查看>>
轻量级 Linux 发行版CRUX 发布 3.4 版
查看>>
IPSEC-×××
查看>>
vim常用命令
查看>>
【python笔记 三 】python脚本实战---数字密码小游戏
查看>>
Liferay中页面的权限控制
查看>>
elasticsearch 5.1.1安装
查看>>
Java中存储金额用什么数据类型?
查看>>
maven报错需要引入这个
查看>>
Selenium+Python对开源中国官网进行模拟登录
查看>>
linux centos7.2 安装rabbitmq------安装erlang
查看>>