之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!!
1、折线图修改颜色:
[javascript]view plaincopy 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 plaincopy functionqueryData2(){vari=0;varcolors=['#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(){returncolors[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 plaincopy 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 plaincopy varoption={tooltip:{trigger:'item',formatter:"{a}<br/>{b}:{c}({d}%)"},//设置饼图的颜色color:['#f6da22','#bbe2e8','#6cacde'],legend:{orient:'vertical',x:'left',data:['柴油','汽油','附属油'],show:false},
饼图的颜色修改和折线图 环形图不同,他是单独出来的!
如果觉得《echart 折线图 柱状图 饼图 环形图颜色修改》对你有帮助,请点赞、收藏,并留下你的观点哦!