使⽤echart画出渐变⾊饼图（圆环图环形渐变）
使⽤echart画出渐变⾊饼图（圆环图环形渐变）
说明
常⽤的渐变有径向渐变和线性渐变，
环形图是 echarts 中 pie 图的⼀个变种，echarts 官⽅对于 pie 图的颜⾊渐变只⽀持两种：
linear 线性渐变
与 css 3 的 Linear Gradients 相似，即向下/向上/向左/向右/⾓度⽅向渐变
radial 镜像渐变
与 css 3 的 Radial Gradients 相似，即从圆⼼向外⼀圈圈渐变出去
此次的需求是跟着圆环渐变。此效果本⼈再⽹上没有到（是我查能⼒不⾏—— _ ——)，是偶然间尝试出来的，或许有参数漏洞，但是能达到想要的效果
效果图
这是最终现有要的效果（将x,x2,y,y2注释）
这是另外⼀种渐变（未将x,x2,y,y2注释）
代码如下
const{ random,PI, cos, sin }= Math;
// 数据源
const val1 =(120/360)*100;
const val2 =(240/360)*100;
// 圆⼼⾓的⼀半
// 圆⼼⾓的⼀半
const angle1 =PI* val1 /50/2;
const angle2 =PI* val2 /50/2;
// 渐变起点
const pointStart =[
0.5-0.5*cos(angle1)*sin(angle1),
0.5+0.5*cos(angle1)*cos(angle1)
];
// 渐变终点
const pointEnd1 =[
0.5-0.5*sin(angle1),
0.5+0.5*cos(angle1)
];
const pointEnd2 =[
0.5-0.5*sin(angle2),
0.5+0.5*cos(angle2)
];
var option3 ={
tooltip:{
trigger:'item',
formatter:'{a} <br/>{b}({d}%)'
},
legend:{
left:50,
top:'bottom',
textStyle:{
color:'#fff',
fontSize:12
},
itemGap:20,
data:['总数','警员','⽂员']
},
series:[
{
name:'警员占⽐',
type:'pie',
startAngle:270,// 环图起始位置：正下发
center:['25%','50%'],// 圆环中⼼相对于容器位置        radius:['40%','50%'],// 圆环内径外径
avoidLabelOverlap:false,
label:{
normal:{
font weight bolder
show:true,
position:'center',
formatter:'120⼈'
},
emphasis:{
show:true
}
},
labelLine:{
normal:{
show:false
}
},
data:[{
name:'警员',
value: val1,
label:{
normal:{
fontSize:18,
color:'#fff',
fontWeight:'bolder'
}
},
},
itemStyle:{
normal:{
color:{
type:'linear',
// x: pointStart[0],
// y: pointStart[1],          //  注意此处注释掉了，若没有注释将是另⼀种效果
// x2: pointEnd1[0],
// y2: pointEnd1[1],
colorStops:[
// !! 在此添加想要的渐变过程⾊ !!
{ offset:0, color:'#00FDFF'},
{ offset:1, color:'#02364F'}
]
},
// color: aphic.LinearGradient(0, 0, 0, 1, [{
//    offset: 0,
//    color: '#01BAFA'
// }, {
//    offset: 1,
//    color: '#03070F'
// }]),
// shadowColor: 'rgba(34,192,245,0.8)',
/
/ shadowBlur: 10
}
}
},{
name:'总数',
value:100- val1,
label:{
normal:{
show:false,
fontSize:0
}
},
itemStyle:{
normal:{
color:'#02364F'
},
emphasis:{
color:'#02364F'
}
},
hoverAnimation:false
}]
},
{
name:'⽂员占⽐',
type:'pie',
startAngle:270,// 环图起始位置：正下发
center:['75%','50%'],
radius:['40%','50%'],
avoidLabelOverlap:false,
label:{
normal:{
show:true,
position:'center',
formatter:'240⼈'
},
emphasis:{
show:true
}
},
labelLine:{
normal:{
show:false
show:false
}
},
data:[{
name:'⽂员',
value: val2,
label:{
normal:{
fontSize:18,
color:'#fff',
fontWeight:'bolder'
}
},
itemStyle:{
normal:{
color:{
type:'linear',
// x: pointStart[0],
// y: pointStart[1],
// x2: pointEnd2[0],      //  注意此处注释掉了，若没有注释将是另⼀种效果
// y2: pointEnd2[1],
colorStops:[
// !! 在此添加渐变过程⾊ !!
{ offset:0, color:'#01BAFA'},
{ offset:1, color:'#02364F'}
]
},
}
}
},{
name:'总数',
value:100- val2,
label:{
normal:{
show:false,
fontSize:0
}
},
itemStyle:{
normal:{
color:'#02364F'
},
emphasis:{
color:'#02364F'
}
},
hoverAnimation:false
}]
}]
};
参考

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。