SOURCE

const canvas = document.getElementById('dashboard');
const ctx = canvas.getContext('2d');

// 设置中心点和半径
const centerX = canvas.width / 2;
const centerY = canvas.height / 2 + 50;
const radius = 150;

// 绘制外边的蓝色渐变环线
function drawOuterGradientArc() {
    const outerRadius = radius + 15; // 外环比仪表盘稍大
    const gradient = ctx.createLinearGradient(centerX - outerRadius, centerY, centerX + outerRadius, centerY);
    gradient.addColorStop(0, "#00cfff");
    gradient.addColorStop(1, "#006eff");

    ctx.beginPath();
    ctx.arc(centerX, centerY, outerRadius, Math.PI, 2 * Math.PI);
    ctx.lineWidth = 10;
    ctx.strokeStyle = gradient;
    ctx.stroke();
}

// 绘制渐变圆弧
function drawGradientArc() {
    const gradient = ctx.createLinearGradient(centerX - radius, centerY, centerX + radius, centerY);
    gradient.addColorStop(0, "#F39C12"); // 黄色
    gradient.addColorStop(0.25, "#E74C3C"); // 红色
    gradient.addColorStop(0.5, "#3498DB"); // 蓝色
    gradient.addColorStop(1, "#1ABC9C"); // 青色

    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, Math.PI, 2 * Math.PI);
    ctx.lineWidth = 20;
    ctx.strokeStyle = gradient;
    ctx.stroke();
}

// 绘制刻度
function drawTicks() {
    const tickCount = 20;
    for (let i = 0; i <= tickCount; i++) {
        const angle = Math.PI + (i * Math.PI) / tickCount;
        const xStart = centerX + (radius - 20) * Math.cos(angle);
        const yStart = centerY + (radius - 20) * Math.sin(angle);
        const xEnd = centerX + radius * Math.cos(angle);
        const yEnd = centerY + radius * Math.sin(angle);

        ctx.beginPath();
        ctx.moveTo(xStart, yStart);
        ctx.lineTo(xEnd, yEnd);
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#fff';
        ctx.stroke();
    }
}

// 绘制指针和外部的三角形标志
function drawPointer(value) {
    const angle = Math.PI + (value * Math.PI) / 100;
    
    // 指针
    const pointerLength = radius - 40;
    const xEnd = centerX + pointerLength * Math.cos(angle);
    const yEnd = centerY + pointerLength * Math.sin(angle);

    ctx.beginPath();
    ctx.moveTo(centerX, centerY);
    ctx.lineTo(xEnd, yEnd);
    ctx.lineWidth = 10;
    ctx.strokeStyle = '#fff';
    ctx.stroke();

    // 外部三角形标志
    const triangleRadius = radius + 30;
    const triangleX = centerX + triangleRadius * Math.cos(angle);
    const triangleY = centerY + triangleRadius * Math.sin(angle);

    ctx.beginPath();
    ctx.moveTo(triangleX, triangleY);
    ctx.lineTo(triangleX - 10 * Math.cos(angle - Math.PI / 2), triangleY - 10 * Math.sin(angle - Math.PI / 2));
    ctx.lineTo(triangleX - 10 * Math.cos(angle + Math.PI / 2), triangleY - 10 * Math.sin(angle + Math.PI / 2));
    ctx.closePath();
    ctx.fillStyle = '#fff';
    ctx.fill();
}

// 绘制百分比值
function drawValue(value) {
    ctx.font = '40px Arial';
    ctx.fillStyle = '#fff';
    ctx.textAlign = 'center';
    ctx.fillText(`${value}%`, centerX, centerY);
    ctx.font = '20px Arial';
    ctx.fillText('超时率', centerX, centerY + 40);
}

// 绘制整个仪表盘
function drawDashboard(value) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawOuterGradientArc(); // 绘制外边的蓝色渐变环线
    drawGradientArc();
    drawTicks();
    drawPointer(value); // 绘制指针和外部三角形
    drawValue(value);
}

// 设置仪表盘的初始值
let value = 30;
drawDashboard(value);

<canvas id="dashboard" width="400" height="400"></canvas>

canvas {
            background-color: #555; /* 为canvas添加灰色背景 */
            border-radius: 10px;
        }