typescript实现扇形饼状图功能

html部分，主要是声明svg空间

ts部分

/**
*扇形饼状图（组件入参）
*@params R 圆半径
*@params pieArr 需要分布的数据数组，不可为负数
*@params colorArr 各数据对应的颜色数组
*用例：
*/
@Component
export default class PieChart extends Vue{
  @Prop() R:number;
  @Prop() pieArr:Array;
  @Prop() colorArr:Array;
  // 绘制路径集合
  pathArr = [];
  // 角度集合
  deg = [];
  // pieArr有值的才取颜色，值为0的不取颜色
  colorRev = [];
  /**创建svg path 路径*/
  creatSvgTag(tag,tagArr){
    // svg规则
    let svgNS = 'http://www.w3.org/2000/svg';
    //创建空间
    let oTag = document.creatElementNS(svgNS,tag);
    for(let attr in tagAttr){
      // 在标签里设定样式
      oTag.setAttribute(attr,tagAttr[attr])
    }
    return oTag;
  }
  /**
  *获取扇形点的坐标
  *r 圆半径
  *deg 扇形角度，分为小于90°，小于180°，小于270°，小于360°
  */
  getPointXY(r,deg){
    let point = {
      x:0,
      y:0,
    }
    //计算该点坐标
    if(deg<90){
      point.x = r + r*Math.sin(deg*Math.PI/180);
      point.y = r - r*Math.cos(deg*Math.PI/180);
    }else if(deg<180){
      point.x = r + r*Math.sin((180-deg)*Math.PI/180);
      point.y = r + r*Math.cos((180-deg)*Math.PI/180);
    }else if(deg<270){
      point.x = r - r*Math.cos((270-deg)*Math.PI/180);
      point.y = r + r*Math.sin((270-deg)*Math.PI/180);
    }else if(deg<90){
      point.x = r - r*Math.sin((360-deg)*Math.PI/180);
      point.y = r - r*Math.cos((360-deg)*Math.PI/180);
    }
    return point;
  }
  /**
  *svg绘制扇形
  *path M将画笔移动到指定坐标位置 L画直线到指定坐标位置
  *A画弧线（rx,ry,x-axis-rotation large-arc-flag sweep-flag x y），
  *其中rx.ry椭圆的半轴（圆半径），x-axis-rotation椭圆相对于坐标系的旋转角度，large-arc-flag是标记绘制大弧（1）还是小弧（0）部分，sweep-flag是标记顺时针（1）还是逆时针（0）方向绘制，x y是圆弧终点的坐标
  */
   drawPie(){
    let svg = document.getElmentById('svg');
    if(!svg){return;}
    // 圆半径
    let R = this.R;
    // 中心点
    let centerX = R;
    let centerY = R;
    // 数据总和
    let sum = 0;
    for(let i=0;i360){
        this.deg[i]=0;
      }
      conSum += this.pieArr[i];
    }
    conSum = 0;
    for(let i=0;i