关于vue.js:svgjs-实现echarts仪表盘统计图

emmmmm，svg 也能像 canvas 一样绘制图像，两者的区别，大家能够本人去查一下，接下来我来给大家分享一下怎么用 svg 绘制 echarts 的仪表盘，次要应用 path 门路中的弧形命令 A 加 stroke 来实现的，后续会学习更多 svg 绘制图形，再分享给大家。

<template>
  <svg
    class="time-circle"
    xmlns="http://www.w3.org/2000/svg"
    height="120"
    width="120"
    viewBox="0 0 120 120"
  >
    <path
      v-for="(item, index) in pointArray"
      :key="index"
      :d="getPathByIndex(index)"
      :stroke="colors[index]"
      stroke-width="13"
      fill="none"
      stroke-dasharray="3,2"
      transform="translate(10,10)"
    ></path>
  </svg>
</template>
<script>
export default {
  props: {
    nums: {
      type: Array,
      default: () => [10, 10, 20]
    },
    colors: {
      type: Array,
      default: () => ['#FBBC00', '#00A8FF', '#07FE82']
    }
  },
  data() {return {};
  },
  computed: {pathStr() {
      const r = this.radius;
      return `M${r} 0 M@1 @2 A${r} ${r} 0 @5 1 @3 @4`;
      /**
      A 命令的参数：A rx ry x-axis-rotation large-arc-flag sweep-flag x y

      弧形命令 A 的前两个参数别离是 x 轴半径和 y 轴半径，弧形命令 A 的第三个参数示意弧形的旋转状况，large-arc-flag（角度大小）和 sweep-flag（弧线方向），large-arc-flag 决定弧线是大于还是小于 180 度，0 示意小角度弧，1 示意大角度弧。sweep-flag 示意弧线的方向，0 示意从终点到起点沿逆时针画弧，1 示意从终点到起点沿顺时针画弧

      path 门路，@1 @2 以后终点坐标，@5 决定弧线是大于还是小于 180 度，0 示意小角度弧，1 示意大角度弧
       */ 
    },
    radius() { // 圆的半径
      return 50;
    },
    totalNum() { // 总数，依据总数算出 1 对应的角度数
      return this.nums.reduce((total, curValue) => total + curValue);
    },
    pointArray() {
      const r = this.radius;
      // 每个数字对应的角度
      const deg = 360 / this.totalNum;
      // 第三位示意弧度 0 是小圆，1 是大圆
      const pAarray = [];
      let total = 0;
      this.nums.forEach((item, index) => {
        // 以后数字之前的角度，算出起始角度
        const preDeg = deg * total;
        // 之前存在的弧度
        const preRad = (preDeg / 180) * Math.PI;  // 依据三角函数算出坐标点
        const sx = r + r * Math.sin(preRad);
        const sy = r - r * Math.cos(preRad);
        // 依据本人的角度，计算是大圆还是小圆
        const dmax = deg * item <= 180 ? 0 : 1;
        pAarray.push([sx, sy, dmax]);
        total += item;
      });
      return pAarray;
    }
  },
  methods: {getPathByIndex(index) {
      // 终点
      const sp = this.pointArray[index];
      // 起点
      const ep = this.pointArray[index + 1 === this.nums.length ? 0 : index + 1];
      return this.pathStr
        .replace('@1', sp[0])
        .replace('@2', sp[1])
        .replace('@3', ep[0])
        .replace('@4', ep[1])
        .replace('@5', sp[2]);
    }
  }
};
</script>