利用饼状图来设计三个嵌套的半空心圆

      之前在工作中做过如下图设计的图表，今天闲来无事把我做的记录下来，可以帮助更多的人少绕弯路，提高工作效率，少死几个脑细胞，

      起初我做这个图的时候毫无头绪，后来请教了同一个公司不同部门的一个前端大神，后来结合自己的思考，利用一下午的时间做出来的，经历了很多痛苦的咀嚼，吭下来了，以此记录工作中的点点滴滴，上代码：

// 半圆配置
      setOptionPie:function(oneCount,twoData,threeData){
        let maxData=Math.max(oneCount,twoData,threeData);//选出三个值中最大的一个
        let first=(oneCount/maxData*180).toFixed(2);//计算出每个值在最大值所占的比例
        let first1=180-first;//180减去这个比例是显示白色的比例
        let second=(twoData/maxData*180).toFixed(2);//计算出每个值在最大值所占的比例
        let second1=180-second;//180减去这个比例是显示白色的比例
        let third=(threeData/maxData*180).toFixed(2);//计算出每个值在最大值所占的比例
        let third1=180-third;//180减去这个比例是显示白色的比例
        return {
          series: [
            {//第一个半圆，最外层的
              type: 'pie',
              radius: ['80%', '95%'],//显示的空心半圆的大小
              avoidLabelOverlap: false,//不放纸鼠标重叠
              itemStyle : {
                normal: {
                  label: {show:false},
                  labelLine: {show:false}
                }
              },
              label: {
                normal: {
                  show: false,
                  position: 'center'
                }
              },
              grid: [
                {top:'2%',width: '100%', height: '100%'},
                {top:'2%',width: '100%', height: '100%'},
                {top:'2%',width: '100%', height: '100%'},
                {top:'2%',width: '100%', height: '100%'}
              ],
              hoverAnimation: true,//鼠标经过放大动画效果
              hoverOffset:5,//放大偏移量
              minAngle:0,
              startAngle: 0,
              data: [
                {
                  value: 180,//总共180
                  itemStyle: {//设置颜色
                    normal: {
                      color: 'rgba(0,0,0,0)'
                    }
                  }
                },
                {
                  value: first,//显示想要的颜色的值
                  itemStyle: {//设置颜色
                    normal: {
                      color: '#FBDA55'
                    }
                  }
                },
                {
                  value: first1,//显示白色的值
                  itemStyle: {//设置颜色
                    normal: {
                      color: 'rgba(0,0,0,0)'
                    }
                  }
                }
              ]
            },
            {
              type: 'pie',
              radius: ['60%', '75%'],
              avoidLabelOverlap: false,
              itemStyle : {
                normal: {
                  label: {show:false},
                  labelLine: {show:false}
                }
              },
              label: {
                normal: {
                  show: false,
                  position: 'center'
                }
              },
              grid: [
                {top:'2%',width: '100%', height: '100%'},
                {top:'2%',width: '100%', height: '100%'},
                {top:'2%',width: '100%', height: '100%'},
                {top:'2%',width: '100%', height: '100%'}
              ],
              hoverAnimation: true,
              hoverOffset:5,
              minAngle:0,
              startAngle: 0,
              data: [
                {
                  value: 180,
                  itemStyle: {
                    normal: {
                      color: 'rgba(0,0,0,0)'
                    }
                  }
                },
                {
                  value: second,
                  itemStyle: {
                    normal: {
                      color: '#69D288'
                    }
                  }
                },
                {
                  value: second1,
                  itemStyle: {
                    normal: {
                      color: 'rgba(0,0,0,0)'
                    }
                  }
                }
              ]
            },
            {
              type: 'pie',
              radius: ['40%', '55%'],
              avoidLabelOverlap: false,
              itemStyle : {
                normal: {
                  label: {show:false},
                  labelLine: {show:false}
                }
              },
              label: {
                normal: {
                  show: false,
                  position: 'center'
                }
              },
              grid: [
                {top:'2%',width: '100%', height: '100%'},
                {top:'2%',width: '100%', height: '100%'},
                {top:'2%',width: '100%', height: '100%'},
                {top:'2%',width: '100%', height: '100%'}
              ],
              hoverAnimation: true,
              hoverOffset:5,
              minAngle:0,
              startAngle: 0,
              data: [
                { value: 180,
                  itemStyle: {
                    normal: {
                      color: 'rgba(0,0,0,0)'
                    }
                  }
                },
                {
                  value: third,
                  itemStyle: {
                    normal: {
                      color: '#3BA1FF'
                    }
                  }
                },
                {
                  value: third1,
                  itemStyle: {
                    normal: {
                      color: 'rgba(0,0,0,0)'
                    }
                  }
                }
              ]
            }
          ]
        };
      },

      写了这么一大坨，感觉脑袋要炸，幸好做出来了，即使掉几根头发也无所谓

最后

以上就是典雅大炮为你收集整理的利用饼状图来设计三个嵌套的半空心圆的全部内容，希望文章能够帮你解决利用饼状图来设计三个嵌套的半空心圆所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。