echart中如何实现使用自定义单个柱状颜色(附代码)
程序员文章站
2022-04-18 23:18:10
...
本篇文章给大家带来的内容是关于echart中如何实现使用自定义单个柱状颜色(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
项目实践中遇到一个根据需要,当X轴等于某个值是,柱状变成特殊颜色的需求,大致有两个方案实现:
1、在前台遍历数据对象,判断设置;
2、在后台拼装数据是,按照格式要求拼装好;
具体代码如下:
方法一:
option = { title: { text: 'ECharts 示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], axisLabel: {color: 'green'} }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20], itemStyle: { color: function(params){ var c =''; if(params.value>20){ c='red' }else{ c='green' } return c; } } }] };
方法二:
option = { title: { text: 'ECharts 示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"], axisLabel: {color: 'green'} }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, { value:'35', itemStyle: { color: 'orange' } }, 10, 10, 20] }] };
也可以二者结合使用,实现自己的特殊需求,如果让后台实现则按照这个格式拼装数据返回到前台即可。希望对有类似需求的小伙伴,有所帮助。
以上就是echart中如何实现使用自定义单个柱状颜色(附代码)的详细内容,更多请关注其它相关文章!