CSS中如何创建数据仪表盘—指针式刻度设计

<div class="dashboard-gauge">
    <div class="gauge-dial"></div> <!-- 仪表盘背景或刻度盘 -->
    <div class="gauge-pointer"></div> <!-- 指针 -->
</div>

.dashboard-gauge {
    position: relative; /* 为内部绝对定位的元素提供参考 */
    width: 200px; /* 仪表盘宽度 */
    height: 200px; /* 仪表盘高度 */
    border-radius: 50%; /* 圆形仪表盘 */
    background-color: #f0f0f0;
    overflow: hidden; /* 确保指针超出部分被裁剪，如果指针是长条形 */
    margin: 50px auto;
}

.gauge-dial {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(from 135deg, #eee 0%, #ddd 25%, #ccc 50%, #bbb 75%, #aaa 100%); /* 示例刻度背景 */
    /* 实际刻度可能更复杂，这里只是一个示意 */
}

.gauge-pointer {
    position: absolute;
    bottom: 50%; /* 将指针底部与仪表盘中心对齐 */
    left: 50%; /* 将指针左边缘与仪表盘中心对齐 */
    width: 4px; /* 指针宽度 */
    height: 80px; /* 指针长度 */
    background-color: #e74c3c; /* 指针颜色 */
    transform-origin: 50% 100%; /* 关键：设置旋转中心为指针的底部中心 */
    transform: translateX(-50%) rotate(0deg); /* 初始旋转，并修正left:50%带来的偏移 */
    transition: transform 0.5s ease-out; /* 平滑动画 */
    z-index: 10;
}

/* 示例：通过JavaScript动态改变这个CSS变量来旋转指针 */
.gauge-pointer[data-value="50"] {
    transform: translateX(-50%) rotate(90deg); /* 假设90度对应某个值 */
}
.gauge-pointer[data-value="100"] {
    transform: translateX(-50%) rotate(180deg); /* 假设180度对应某个值 */
}

<div class="dashboard-gauge">
    <!-- ... 指针 ... -->
    <div class="tick-mark-container">
        <div class="tick-mark" style="--angle: 0deg;"></div>
        <div class="tick-mark" style="--angle: 30deg;"></div>
        <div class="tick-mark" style="--angle: 60deg;"></div>
        <!-- ... 更多刻度 ... -->
    </div>
</div>

.tick-mark-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.tick-mark {
    position: absolute;
    top: 0; /* 从顶部开始 */
    left: 50%; /* 居中 */
    width: 2px;
    height: 10px; /* 刻度线长度 */
    background-color: #666;
    transform-origin: 50% 100px; /* 旋转中心点，需要调整到仪表盘中心 */
    transform: translateX(-50%) rotate(var(--angle));
}
/* 注意：这里的transform-origin需要根据实际仪表盘半径和刻度线位置来精确计算 */

.gauge-pointer {
    /* ... 其他样式 ... */
    transition: transform 0.5s ease-out; /* 0.5秒内完成变换，缓出效果 */
}

function updateGauge(value) {
    const minVal = 0;
    const maxVal = 100;
    const minAngle = 0; // 对应minVal的起始角度
    const maxAngle = 180; // 对应maxVal的结束角度

    // 将数据值映射到角度范围
    const angle = ((value - minVal) / (maxVal - minVal)) * (maxAngle - minAngle) + minAngle;

    const pointer = document.querySelector('.gauge-pointer');
    // 更新CSS自定义属性，让CSS的transition生效
    pointer.style.setProperty('--rotation-angle', `${angle}deg`);
    // 或者直接修改transform属性
    // pointer.style.transform = `translateX(-50%) rotate(${angle}deg)`;
}

// 假设我们用CSS自定义属性来控制旋转
// .gauge-pointer {
//     transform: translateX(-50%) rotate(var(--rotation-angle, 0deg));
//     transition: transform 0.5s ease-out;
// }

// 示例调用
updateGauge(75); // 指针会平滑地转到75对应的角度