gauge实现两个不同主题样式的仪表盘度量衡效果代码-html代码-BFW代码库

gauge实现两个不同主题样式的仪表盘度量衡效果代码

代码语言：html

所属分类：图表

代码描述：gauge实现两个不同主题样式的仪表盘度量衡效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/gauge.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/gauge-glossy.min.css">
    <style>
        body {
            font-family: sans-serif;
            background-color: #d8d8d8;
        }

        .gauge-example {
            display: flex;
            flex-wrap: wrap;
            text-align: center;
            justify-content: center;
        }

        .gauge-example>div {
            background-color: #ffffff;
            width: 48%;
            min-width: 350px;
            margin: 5px;
            text-align: center;
            padding-top: 40px;
            line-height: 25px;
            font-size: 14px;
        }

        .gauge-example>.gauge-description {
            padding: 3em;
            text-align: left;
        }

        .gauge-example>.gauge-description pre {
            font-size: 12px;
        }

        .gauge {
            margin: auto;
        }

        footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #c2c2c2;
            text-align: center;
            padding: 0.5em;
            border-top: solid 1px #aeaeae;
        }

        footer a {
            color: #0366d6;
        }
    </style>
</head>

<body>
    <div class="gauge-example">
        <div>
            <h1>Core</h1>
            <div id="demoGauge" class="gauge" style="
                --gauge-value:0;
                width:200px;
                height:200px;">

                <!-- Layout testing guides
                <div class="guide">
                    <div class="guide-x"></div>
                    <div class="guide-y"></div>
                </div>
                -->

                <div class="ticks">
                    <div class="tithe" style="--gauge-tithe-tick:1;"></div>
                    <div class="tithe" style="--gauge-tithe-tick:2;"></div>
                    <div class="tithe" style="--gauge-tithe-tick:3;"></div>
                    <div class="tithe" style="--gauge-tithe-tick:4;"></div>
                    <div class="tithe" style="--gauge-tithe-tick:6;"></div>
                    <div class="tithe" style="--gauge-tithe-tick:7;"></div>
                    <div class="tithe" style="--gauge-tithe-tick:8;"></div>
                    <div class="tithe" style="--gauge-tithe-tick:9;"></div>
                    <div class="min"></div>
                    <div class="mid"></div>
                    <div class="max"></div>
                </div>
                <div class="tick-circle"></div>

                <div class="needle">
                    <div class="needle-head"></div>
                </div>
                <div class="labels">
                    <div class="value-label.........完整代码请登录后点击上方下载按钮下载查看