之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!!
1、折线图修改颜色:
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['年龄','20岁以下','30岁','40岁','50岁','60岁','60岁以上']
- },
- yAxis: {
- type: 'value'
- },
- series: [
- {
- name:'员工数',
- type:'line',
- stack: '总量',
- itemStyle:{
- normal:{
- lineStyle:{
- color:'#b5b5b6'
- }
- }
- },
- data:[]// 注意这里的这个括号是要保留虽然返回的数据带着括号!
- }
- ]
2、环形图修改颜色:
- function queryData2(){
- var i=0;
- var colors=['#393939','#f5b031','#fad797','#59ccf7','#c3b4df'];
- myChart2 = echarts.init(document.getElementById('main2'));
- option2 = {
- tooltip : {
- trigger: 'item',
- formatter: "{a} <br/>{b} : {c} ({d}%)"
- },
- legend: {
- orient : 'vertical',
- x : 'left',
- data:['女','男']
- },
- toolbox: {
- show : true,
- feature : {
- saveAsImage : {show: true}
- }
- },
- calculable : true,
- series : [
- {
- name:'性别结构',
- type:'pie',
- radius : ['30%', '70%'],
- itemStyle : {
- normal : {
- color:function(){
- return colors[i++];
- },
- label : {
- show : false
- },
- labelLine : {
- show : false
- }
- },
- emphasis : {
- label : {
- show : true,
- position : 'center',
- textStyle : {
- fontSize : '30',
- fontWeight : 'bold'
- }
- }
- }
- },
- data:[]
- }
- ]
- };
- }
其中 函数开始定义了一个 colors 对象这里保存的都是颜色值,而在series中的itemStyle中的normal 中定义了一个color:function(){ return colors[i++]} 函数,这个函数的作用就是随机获取颜色值。这样就修改了
3、柱状图:
- yAxis : [
- {
- type : 'value'
- }
- ],
- series : [
- {
- name:'部门人数',
- type:'bar',
- data:[],
- //颜色
- itemStyle:{
- normal:{
- color:'#f5b031',
- }
- },
- markPoint : {
- data : [
- {type : 'max', name: '最大值'},
- {type : 'min', name: '最小值'}
- ]
- },
- markLine : {
- data : [
- {type : 'average', name: '平均值'}
- ]
- }
- }
- ]
颜色的修改还是在series 中的itemStyle 中的normal 中的color这个值。
4、饼图颜色修改:
- var option = {
- tooltip: {
- trigger: 'item',
- formatter: "{a} <br/>{b}: {c} ({d}%)"
- },
- //设置饼图的颜色
- color:['#f6da22','#bbe2e8','#6cacde'],
- legend: {
- orient: 'vertical',
- x: 'left',
- data:['柴油','汽油','附属油'],
- show:false
- },
饼图的颜色修改和折线图 环形图不同,他是单独出来的!