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.........完整代码请登录后点击上方下载按钮下载查看