使用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: {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: new echarts.graphic.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}},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}]}]};
参考
参考1：/qq_25125327/article/details/90690418
参考2：/Mr_dong_ya_yun/article/details/80770658
