Simoneecharts环形图百分数占比且图形颜色渐变实现
的有关信息介绍如下：
echarts官网有饼图的实例，但是没有环形图，其实环形图就是饼图进行一些属性的设置产生的效果。具体哪些属性？一起来看看吧！
首先，在series里依然设置type:"pie", 再设置radius:["60%","80%"]就是一个环形图的效果。
然后再写data里面的内容，最重要的是vlaue值分别设置value，100-value，颜色分别为不同的，就是一个百分比的效果。注意这个data设置的是series里面的。
再设置一下颜色渐变，这里我只写了一个颜色的渐变，另外一个方法相同，不做演示，具体也可参考官方社区示例https://gallery.echartsjs.com/editor.html?c=xa9aPNIoiN
具体代码如下：
series:[
{
name:"",
type:"pie",
radius:["59%","82%"],
center:["50%","50%"],
zlevel:0,
label:{
normal:{
show:false
}
},
data:[]
},
{
name:"",
type:"pie",
radius:["59%","82%"],
center:["50%","50%"],
silent:false,
clockwise:true,
z:0,
zlevel:10,
labelLine:{
show:false
},
data:[
{
value:9,
itemStyle:{
normal:{
borderColor:{
colorStops:[
{
offset:0,
color:"#229dfe"//0%处的颜色
},
{
offset:0.5,
color:"#4ec7e1"//0%处的颜色
},
{
offset:1,
color:"#49c3e3"//100%处的颜色
}
]
},
color:{
//完成的圆环的颜色
colorStops:[
{
offset:0,
color:"#229dfe"//0%处的颜色
},
{
offset:0.5,
color:"#4ec7e1"//0%处的颜色
},
{
offset:1,
color:"#49c3e3"//100%处的颜色
}
]
},
label:{
show:false
}
}
}
},
{
value:91,
itemStyle:{
color:"orange"
}
}
]
}
]
就完成了一个百分比渐变色的环形效果图，效果图如下：
