之前在做报表的时候用过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:[]// 注意这里的这个括号是要保留虽然返回的数据带着括号!
}
]
其中的series 中的lineStyle中的 color 就是折现的颜色!
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
},
饼图的颜色修改和折线图 环形图不同,他是单独出来的!