300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > echarts柱状图自定义颜色

echarts柱状图自定义颜色

时间:2024-01-17 16:57:32

相关推荐

echarts柱状图自定义颜色

xAxis : [{type : 'category',// name:'额度',//这是设置的false,就不不显示下方的x轴,默认是true的show: false,//这里呢,就是每个柱的name了,根据实际情况下就好了,我就先写这三个data : ['最多','平均','最少'],axisLabel: {//这个是倾斜角度,也是考虑到文字过多的时候,方式覆盖采用倾斜// rotate: 30,//这里是考虑到x轴文件过多的时候设置的,如果文字太多,默认是间隔显示,设置为0,标示全部显示,当然,如果x轴都不显示,那也就没有意义了interval :0}}],yAxis : [{type : 'value',name:'数量',//下面的就很简单了,最小是多少,最大是多少,默认一次增加多少min: 0,max: 30,interval: 6,//下面是显示格式化,一般来说还是用的上的axisLabel: {formatter: '{value} 包'}}],series : [{name: '数量',type: 'bar',itemStyle: {normal: {//好,这里就是重头戏了,定义一个list,然后根据所以取得不同的值,这样就实现了,color: function(params) {// build a color map as your need.var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B','#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD','#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'];return colorList[params.dataIndex]},//以下为是否显示,显示位置和显示格式的设置了label: {show: true,position: 'top',// formatter: '{c}'formatter: '{b}\n{c}'}}},//设置柱的宽度,要是数据太少,柱子太宽不美观~barWidth:70,data: [28,15,9,4,7,8,23,11,17]}]```

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