js前端 仪表盘实现

1、资源

echarts_gauge.js下载

2、代码

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>仪表盘</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
    <meta http-equiv="Expires" content="0"/>
    <style type="text/css">
        .left {
            float: left;
        }

        .clear {
            clear: both;
        }

        .middle-bottom-left {
            width: 33%;
        }

        .divBox {
            background-color: #0d2b55;
            background-repeat: repeat;
            background-size: 100% 100%;
            width: 50%;
            height: 50%;
        }

        .coalA1_top {
            width: 100%;
            height: 13%;
            padding-top: 2%;
            padding-left: 13%;
            font-size: 4rem;
            color: #63cdff;
        }

        .coalA1_middle {
            width: 100%;
            height: 75%;
        }

        .coalA1_bottom {
            width: 100%;
            height: 10%;
        }

        #coalA1_chart {
            width: 200%;
            height: 100%;
            margin-left: -78%;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="middle-bottom-left divBox">
        <div class="coalA1_top">
            xxxxxxxxxxx
        </div>
        <div class="coalA1_middle">
            <div id="coalA1_chart"></div>
        </div>
        <div class="coalA1_bottom">
            <div style="width: 30%;height: 100%" class="left"></div>
            <div style="width: 70%;height: 100%" class="left">
                <canvas id="coalA1_audio_canvas" style="width:50%; height:90%;"></canvas>
            </div>
            <div class="clear"></div>
        </div>
        <!--<div class="coalA4"></div>-->
    </div>
</div>

</div>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/front/realtime/js/echarts_gauge.js}"></script>
<script type="text/javascript">
    $('document').ready(function () {
        $(".container").width($(window).width());
        $(".container").height($(window).height());
        var obj = {open_duration: 2, coal_duration: 4, gangue_duration: 68, empty_duration: 73};
        drawCoalChart_A(obj);
    })

    function drawCoalChart_A(obj) {
        var dom = document.getElementById("coalA1_chart");
        var myChart1 = echarts.init(dom);
        var data = [{
            value: obj.open_duration,
            name: 'AA1',
            title: {offsetCenter: ['300%', '-50%']},
            detail: {offsetCenter: ['385%', '-50%'], width: '70px'}
        },
            {
                value: obj.coal_duration,
                name: 'AA2',
                title: {offsetCenter: ['300%', '-20%']},
                detail: {offsetCenter: ['385%', '-20%'], width: '70px'}
                // radius: ["40%", "47%"],
            },
            {
                value: obj.gangue_duration,
                name: 'AA3',
                title: {offsetCenter: ['300%', '10%']},
                detail: {offsetCenter: ['385%', '10%'], width: '70px'}
            },
            {
                value: obj.empty_duration,
                name: 'AA4',
                title: {offsetCenter: ['300%', '40%']},
                detail: {offsetCenter: ['385%', '40%'], width: '70px'}
            }
        ];
        var option1 = {
            color: ['#00aaff', '#ffaa7f', '#aaaaff', '#ffffff'],
            // color: ['#f4f4f4', '#f4f4f4', '#f4f4f4', '#f4f4f4'],
            series: [{
                type: 'gauge',
                startAngle: 90,
                endAngle: -270,
                pointer: {
                    show: false
                },
                progress: {
                    show: true,
                    overlap: false,
                    roundCap: true,
                    clip: false,
                    itemStyle: {
                        borderWidth: 3,
                        borderColor: '#0b2049',

                    }
                },
                axisLine: {
                    lineStyle: {
                        width: 40,
                        color: [
                            [1, '#0b2049']
                        ]
                    }
                },
                splitLine: {
                    show: false,
                    distance: 5,
                    length: 10
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false,
                    distance: 50
                },
                data: data,
                title: {
                    fontSize: 14,
                    color: '#ffffff',
                },
                detail: {
                    width: 50,
                    height: 14,
                    fontSize: 14,
                    color: 'auto',
                    borderColor: 'auto',
                    borderRadius: 20,
                    borderWidth: 1,
                    // formatter: '{value} 秒'
                    formatter: function (value) {
                        var res = s_to_hs(value);
                        return res;
                    }
                }
            }]
        };
        myChart1.setOption(option1);

        setInterval(function () {
            data[0].value = +(Math.random() * 100).toFixed(0);
            data[1].value = +(Math.random() * 100).toFixed(0);
            data[2].value = +(Math.random() * 100).toFixed(0);
            data[3].value = +(Math.random() * 100).toFixed(0);
            myChart1.setOption({
                series: [
                    {
                        data: data,
                        pointer: {
                            show: false
                        }
                    }
                ]
            });
        }, 2000);
    }

    function s_to_hs(s) {
        var h;
        h = Math.floor(s / 60);
        s = s % 60;
        //如果只有一位数,前面增加一个0
        // h = (h.length == 1) ? '0' + h : h;
        // s = (s.length == 1) ? '0' + s : s;
        if (h > 0) {
            return h + ' 分 ' + s + ' 秒';
        } else {
            return s + ' 秒';
        }
    }
</script>
</body>
</html>
上一篇:2021110 LeetCode刷题 提莫攻击(难度:简单)


下一篇:requests模块