怎么用Echarts实现多段圆环图

魁首哥

作者

怎么用Echarts实现多段圆环图

这篇文章主要介绍“怎么用Echarts实现多段圆环图”，在日常操作中，相信很多人在怎么用Echarts实现多段圆环图问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用Echarts实现多段圆环图”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

完美实现

最终在玫瑰图的网站上找到一个比较复杂的实现,通过修改各项配置基本完美的使用ehcarts实现了这个图形. 首先是echarts的一个option的配置代码,为了方便将series与option做了一个分离

constcolorDataHandle=(data,total,width=375)=>{letnum=0letoption={angleAxis:{axisLine:{show:false,},axisLabel:{show:false,},splitLine:{show:false,},axisTick:{show:false,},min:'dataMin',max:'dataMax',startAngle:135,},radiusAxis:{type:'category',axisLine:{show:false,},axisTick:{show:false,},axisLabel:{show:false,},},polar:{radius:'95%'},series:[]}//option是对传入的数据的一个处理constoptions=data.map((item,index)=>{num+=itemconsta={type:'bar',data:[0,0,0,num],coordinateSystem:'polar',z:9999-index,roundCap:true,color:colors[index],barGap:'-100%',//barWidth:'30%',itemStyle:{//控制弧的宽,弧的宽的控制并没有做太多的情况判断,简单的区分了一下borderWidth:index===0?4:index===1?2:0,//shadowBlur:5,//color:'transparent',borderColor:colors[index],shadowColor:colors[index],},}returna})option.series=optionsreturnoption}

然后是对3种颜色区域的一个处理

constcolors=[{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:'#1DBC3F',//0%处的颜色},{offset:1,color:'#1DBC3F',//100%处的颜色},],},{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:'#CB3939',//0%处的颜色},{offset:1,color:'#CB3939',//100%处的颜色},],},{type:'linear',x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:'#C0C0C0',//0%处的颜色},{offset:1,color:'#C0C0C0',//100%处的颜色},],},];

这里是灵活使用了echarts type为linear的组件,具体的一个配置项是怎么实现我并没有深入探究.