300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > echart折线图 柱状图 饼图设置颜色

echart折线图 柱状图 饼图设置颜色

时间:2023-04-07 08:21:43

相关推荐

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 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 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 varoption={tooltip:{trigger:'item',formatter:"{a}<br/>{b}:{c}({d}%)"},//设置饼图的颜色color:['#f6da22','#bbe2e8','#6cacde'],legend:{orient:'vertical',x:'left',data:['柴油','汽油','附属油'],show:false},

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。