svg 占比环形图

柔情只为你懂 2021-07-24 14:43 470阅读 0赞

思路:
    	确定内外圈半径和中心坐标->按照中心坐标水平向右的两个坐标为起点->
    	三角函数通过每部分占比计算出每部分扇形的四个角度存进数组里->遍历
    	数组画扇形->扇形通过path的M起点A画弧度和L后续点加Z首尾连接

代码示例:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box{ 
                width:780px;
                height:400px;
                margin:0 auto;
            }
        </style>
    </head>
    <body>
        <div style="border:solid 1px orange;" class='box'>
    
            <svg  id='svg' width='100%' height='100%'
            xmlns="http://www.w3.org/2000/svg">
    
                <path d=''fill='none' stroke='blue'></path>
            </svg>
            
            
        </div>
    
        <script>
    window.onload=function(){ 
    
        //命名空间
        let svgNS="http://www.w3.org/2000/svg";
    
        //获取父级元素
        var div=document.querySelector('.box');
        //获取svg
        let svg=document.querySelector('#svg');
    
        //占比例
        var arrNum=[23.61,17.10,16.05,15.40,11.72,14.95];
        var angle=360;
        //累加的角度
        var sumNum=0;
        //内外圈半径
        var outerR=120;
        var innerR=70;
        //中心坐标
        var cx=200;
        var cy=200;
        //外圆起始坐标
        var outerXY=[{ x:320,y:200}];
        //内圆起始坐标
        var innerXY=[{ x:270,y:200}];
        var color=['red','orange','yellow','green','blue','purple'];
    
        //循环比例获得内外圈坐标
        for(var i=0;i<arrNum.length;i++)
        { 
            
            //通过比例获取角度值
            var angNum=arrNum[i]*360/100;
            sumNum+=angNum;
            //当最后一个比例时,将角度变成360,避免中途小数累加的误差
            if(i==arrNum.length-1){ 
                sumNum=360;
            }
            //三角函数获取角度偏离后圆弧上的坐标
            //外圆
            var outerX=120*Math.cos(sumNum*Math.PI/180)+cx;
            var outerY=120*Math.sin(sumNum*Math.PI/180)+cy;
            //内圆
            var innerX=70*Math.cos(sumNum*Math.PI/180)+cx;
            var innerY=70*Math.sin(sumNum*Math.PI/180)+cy;
            outerXY.push({ x:outerX,y:outerY});
            innerXY.push({ x:innerX,y:innerY});
        }
    
        //画扇形
        for(var i=0;i<outerXY.length;i++){ 
    
            if(i==outerXY.length-1)
            { 
    
                break;
            }
            var opath=createTag('path',{ 'fill':color[i],'d':'M'+outerXY[i].x+" "+outerXY[i].y+"A"+outerR+" "+outerR+' 0 0 1 '+outerXY[i+1].x+" "+outerXY[i+1].y+"L"+innerXY[i+1].x+" "+innerXY[i+1].y+"A"+innerR+" "+innerR+" 0 0 0 "+innerXY[i].x+" "+innerXY[i].y+"Z"});
    
    
            svg.appendChild(opath);
        }
    
    
        //创建标签
        function createTag(tag,obj){ 
            var oTag=document.createElementNS(svgNS,tag);
            for(var attr in obj){ 
                oTag.setAttribute(attr,obj[attr]);
            }
    
            return oTag;
    
        }
    }
    
    
        </script>
    </body>
    </html>