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

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

1、折线图修改颜色：

[javascript] view plain copy

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:[]// 注意这里的这个括号是要保留虽然返回的数据带着括号！

}

]

其中的series 中的lineStyle中的 color 就是折现的颜色！

2、环形图修改颜色：

[javascript] view plain copy

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、柱状图：

[javascript] view plain copy

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、饼图颜色修改：

[javascript] view plain copy

var option = {

tooltip: {

trigger: 'item',

formatter: "{a} <br/>{b}: {c} ({d}%)"

},

//设置饼图的颜色

color:['#f6da22','#bbe2e8','#6cacde'],

legend: {

orient: 'vertical',

x: 'left',

data:['柴油','汽油','附属油'],

show:false

},

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