Emmmmm and SVG can also draw images like Canvas. You can check the differences between the two. Next, I will share with you how to draw echarts dashboard using SVG. I’ll share it with you.
<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" </path> </path> </path> </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`; /** the parameters of the A command: A rx ry x-axis-rotation large-ark-flag x y-sweep A rx ry x-axis-rotation large-ark-flag x y-sweep A rx ry x-axis-rotation large-ark-flag x y-sweep A rx ry x-axis-rotation large-ark-flag x y-sweep A rx ry x-axis-rotation large-ark-flag x y-sweep A rx ry x-axis-rotation large-ark-flag x y-sweep A rx ry x-axis-rotation large-ark-flag x y-sweep Large-arc-flag (size of the Angle) and sweep-flag (direction of the arc), large-arc-flag determines whether the arc is greater or less than 180 degrees, with 0 for small arcs and 1 for large arcs. 0 indicates that the arc is drawn counterclockwise from the starting point to the end point; 1 indicates that the arc is drawn clockwise from the starting point to the end point; @1 @2 indicates the coordinate of the current starting point; @5 determines whether the arc is greater than or less than 180 degrees; 0 indicates the arc of small Angle; 1 = large Angle arc */}, radius() {// circle radius return 50; Return this.nums.reduce((total, curValue) => total + curValue); return this.nums.reduce((total, curValue) => total + curValue); }, pointArray() { const r = this.radius; Const deg = 360 / this.totalNum; Const pAarray = []; // 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>