当前位置: 首页 > Web前端 > HTML

echart使用自定义单栏颜色实现

时间:2023-04-02 23:05:52 HTML

项目实践。根据要求,当X轴等于某个值时,该列变为特殊颜色。解决方案大致有两种:1、遍历前台Object中的数据,判断设置;2.后台拼装数据,按照格式要求拼装;具体代码如下:方法一:option={title:{text:'EChartsexample'},tooltip:{},legend:{data:['Sales']},xAxis:{data:["shirt","开衫","雪纺衫","裤子","高跟鞋","袜子"],axisLabel:{color:'green'}},yAxis:{},series:[{name:'sales',类型:'bar',数据:[5,20,36,10,10,20],itemStyle:{itemcolor(pars){varc='';if(params.value>20){c='red'}else{c='green'}returnc;}}]};方法二:option={tEXT:'EChartsexample'},tooltip:{},legend:{data:['sales']},xAxis:{data:["shirt","cardigan","chiffonsweater",“裤子”,“高跟鞋”,“袜子”],axisLabel:{color:'green'}},yAxis:{},系列:[{name:'sales',type:'bar',data:[5,20,{value:'35',itemStyle:{color:'orange'}}]0,2,也可以组合},10],实现你的自己有特殊需求,如果让后台实现,可以按照这个格式拼装数据,返回给前台。希望对有类似需求的朋友有所帮助。