简单创建监控大屏-CSDN博客

本文链接：https://blog.csdn.net/weixin_42099963/article/details/142258791

1、涉及编程语言及脚本

HTML
CSS
ECHART
JAVASCRIPT

2、编写基础静态页面结构，并引入echarts插件，这里采用echarts 5版本

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="echarts-min-5.2.1.js"></script>
</head>
<body>
<div class="container">
    <div class="row row-1">
        <div class="card" id="card-3">1</div>
        <div class="card" id="card-6">2</div>
        <div class="card">3</div>
    </div>
    <div class="row row-2">
        <div class="card" id="card-1">4</div>
        <div class="card" id="card-2">5</div>
    </div>
    <div class="row row-3">
        <div class="card">6</div>
        <div class="card">7</div>
        <div class="card">8</div>
        <div class="card">9</div>
        <div class="card">10</div>
    </div>
    <div class="row row-4">
        <div class="card" id="card-4">11</div>
        <div class="card" id="card-5">12</div>
    </div>
</div>
</body>
</html>

3、编写CSS大体修饰页面布局，其中背景图片可自行更改

    <style type="text/css">

        html, body {
            width: 100%;
            height: 100%;
            margin: 0 0 0 0;
            padding: 0 0 0 0;
            /*background-image: linear-gradient(#363c41, #1e2b2e, #101f1a); */
            /* background-repeat:no-repeat; */
            /* background-attachment: fixed; */
            background-size: cover;
            background-position: center;
            background-image: url("bg6.png");
        }

        .container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            overflow-y: auto;

        }

        .row {
            display: flex;
        }

        .row-1 > .card {
            margin: 5px 5px 5px 5px;
            height: 200px;
            width: 33%;
            border-radius: 7px;
            border: 1px solid rgba(248, 211, 211, 0.5);
        }

        .row-2 > .card {
            margin: 5px 5px 5px 5px;
            height: 300px;
            width: 50%;
            border-radius: 7px;
            border: 1px solid rgba(248, 211, 211, 0.5);
        }

        .row-3 > .card {
            margin: 5px 5px 5px 5px;
            height: 300px;
            width: 20%;
            border-radius: 7px;
            border: 1px solid rgba(248, 211, 211, 0.5);
        }

        .row-4 > .card {
            margin: 5px 5px 5px 5px;
            height: 500px;
            border-radius: 7px;
            border: 1px solid rgba(248, 211, 211, 0.5);
        }

        .row-4 > #card-4 {
            width: 65%;
        }

        .row-4 > #card-5 {
            width: 35%;
        }

        .card {
            color: rgba(255, 255, 255, 0.97);
            text-align: center;
            line-height: 200px;
            font-size: 5em;
        }
    </style>

4、添加自定义echarts统计图

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('card-1'));
    var myChart2 = echarts.init(document.getElementById('card-2'));
    // 指定图表的配置项和数据
    var option1 = {
        title: {
            text: '科技改变未来',
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            bottom: '25px',
        },
        tooltip: {},
        //   legend: {
        //     data: ['销量'],
        //     textStyle:{
        //         color: '#fff'
        //     }
        //   },
        xAxis: {
            show: true,
            data: [
                {value: '衬衫', textStyle: {color: '#fff'}},
                {value: '羊毛衫', textStyle: {color: '#fff'}},
                {value: '雪纺衫', textStyle: {color: '#fff'}},
                {value: '裤子', textStyle: {color: '#fff'}},
                {value: '高跟鞋', textStyle: {color: '#fff'}},
                {value: '袜子', textStyle: {color: '#fff'}}
            ],
            name: '类型',
            nameTextStyle: {
                color: '#fff453'
            }
        },
        yAxis: {
            name: '销量',
            nameTextStyle: {
                color: '#fff453'
            },
        },
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [
                    {name: '衬衫', value: 30, itemStyle: {color: '#fff'}, label: {color: '#000', show: true}},
                    {name: '羊毛衫', value: 70, itemStyle: {color: '#f464ff'}, label: {color: '#000', show: true}},
                    {name: '雪纺衫', value: 50, itemStyle: {color: '#ff766f'}, label: {color: '#000', show: true}},
                    {name: '裤子', value: 5, itemStyle: {color: '#f32f9f'}, label: {color: '#000', show: true}},
                    {name: '高跟鞋', value: 10, itemStyle: {color: '#ffc2cf'}, label: {color: '#000', show: true}},
                    {name: '袜子', value: 90, itemStyle: {color: '#ffa32f'}, label: {color: '#000', show: true}}
                ],
            }
        ]
    };
    var option2 = {
        title: {
            text: '科技改变未来',
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            bottom: '25px',
        },
        tooltip: {},
        //   legend: {
        //     data: ['销量'],
        //     textStyle:{
        //         color: '#fff'
        //     }
        //   },
        xAxis: {
            show: true,
            data: [
                {value: '衬衫', textStyle: {color: '#fff'}},
                {value: '羊毛衫', textStyle: {color: '#fff'}},
                {value: '雪纺衫', textStyle: {color: '#fff'}},
                {value: '裤子', textStyle: {color: '#fff'}},
                {value: '高跟鞋', textStyle: {color: '#fff'}},
                {value: '袜子', textStyle: {color: '#fff'}}
            ],
            name: '类型',
            nameTextStyle: {
                color: '#fff453'
            }
        },
        yAxis: {
            name: '销量',
            nameTextStyle: {
                color: '#fff453'
            },
        },
        series: [
            {
                name: '销量',
                type: 'line',
                data: [30, 70, 50, 5, 10, 90],
                symbolSize: 9,
                symbol: "rect",
                textStyle: {
                    color: '#fff'
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
    myChart2.setOption(option2);


    window.onload = function () {

        setInterval(() => {
            var newOption1 = myChart1.getOption();
            var newOption2 = myChart2.getOption();
            const len1 = newOption1.series[0].data.length;
            for (var i = 0; i < len1; i++) {
                var num = parseInt(Math.random() * 100);
                newOption1.series[0].data[i].value = num;
                newOption2.series[0].data[i] = num;
            }
            myChart1.setOption(newOption1);
            myChart2.setOption(newOption2);

        }, 5000)
    }
</script>

<script type="text/javascript">
    var myChart3 = echarts.init(document.getElementById('card-3'));
    var option3 = {
        title: {
            show: true,
            text: '实时温度',
            textStyle: {
                color: '#fff'
            }
        },
        series: [
            {
                type: 'gauge',
                center: ['50%', '70%'],
                radius: '75%',
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 100,
                splitNumber: 10,
                itemStyle: {
                    color: '#FFAB91'
                },
                progress: {
                    show: true,
                    width: 5,
                    top: '70%',
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                        width: 10
                    }
                },
                axisTick: {
                    distance: -20,
                    splitNumber: 5,
                    lineStyle: {
                        width: 2,
                        color: '#999'
                    }
                },
                splitLine: {
                    distance: -30,
                    length: 14,
                    lineStyle: {
                        width: 3,
                        color: '#999'
                    }
                },
                axisLabel: {
                    distance: -25,
                    color: '#999',
                    fontSize: 15
                },
                anchor: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    width: '50%',
                    lineHeight: 50,
                    borderRadius: 18,
                    offsetCenter: [0, '-15%'],
                    fontSize: 20,
                    fontWeight: 'bolder',
                    formatter: '{value} °C',
                    color: 'auto'
                },
                data: [
                    {
                        value: 40
                    }
                ]
            },
            {
                type: 'gauge',
                center: ['50%', '70%'],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 100,
                itemStyle: {
                    color: '#FD7347'
                },
                progress: {
                    show: true,
                    width: 10
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                detail: {
                    show: false
                },
                data: [
                    {
                        value: 20
                    }
                ]
            }
        ]
    };
    myChart3.setOption(option3);
    setInterval(function () {
        const random = +(Math.random() * 80 + 20).toFixed(2);
        myChart3.setOption({
            series: [
                {
                    data: [
                        {
                            value: random
                        }
                    ]
                },
                {
                    data: [
                        {
                            value: random
                        }
                    ]
                }
            ]
        });
    }, 5000);
</script>

<script type="text/javascript">
    var myChart4 = echarts.init(document.getElementById('card-4'));
    var option4 = {
        series: {
            type: "treemap",
            data: [
                {
                    value: 6,
                    name: "一",
                    children: [
                        {name: '一方', value: 1}, {name: '二方', value: 2}
                    ]
                },
                {
                    value: 6,
                    name: "二",
                },
                {
                    value: 6,
                    name: "三",
                },
                {
                    value: 6,
                    name: "四",
                },
                {
                    value: 6,
                    name: "五",
                },
                {
                    value: 6,
                    name: "六",
                },
                {
                    value: 6,
                    name: "七",
                },
                {
                    value: 6,
                    name: "八",
                },
                {
                    value: 6,
                    name: "九",
                },
                {
                    value: 6,
                    name: "十",
                }
            ]
        }
    };
    myChart4.setOption(option4);
</script>

<script type="text/javascript">
    var card6 = document.getElementById("card-6");
    setInterval(()=>{
        let date1 = new Date();
        var date = date1.getHours()+":"+date1.getMinutes()+":"+date1.getSeconds();
        card6.style.fontSize ='5em';
        card6.style.height='150px';
        card6.style.lineHeight='150px';
        card6.style.color='rgba(4,252,16,0.97)';
        card6.innerText = date;
    },1000);
</script>

5、保存好，将文件拖入浏览器上即可展示构建页面结果