基于Echarts实现可视化数据大屏水质分析系统大屏数据

IT-司马青衫

于 2022-08-15 12:06:42 发布

阅读量828

点赞数

分类专栏： Echarts大屏数据可视化文章标签： echarts vue echarts大数据可视化 vue echarts web

本文链接：https://blog.csdn.net/bigwhiteshark/article/details/126344342

版权

Echarts大屏数据可视化专栏收录该内容

77 篇文章 225 订阅

订阅专栏

前言

🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作，可以在此基础上重新开发。

本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

⚽精彩专栏推荐👇🏻👇🏻👇🏻

❤ 【作者主页——🔥获取更多优质源码】

❤ 【1000套毕设项目精品实战案例】

❤ 【 20套 VUE+Echarts 大数据可视化源码】

❤ 【150套 HTML+ Echarts大数据可视化源码】

一、Echart是什么

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

二、ECharts入门教程

5 分钟上手ECharts

三、作品演示

在这里插入图片描述

四、代码实现

1.HTML


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

<head>
    <meta charset="UTF-8">
    <title>水质监测</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="content-body">
        <div class="header">
            <div class="header-left">
                <span>水质情况实时监测预警系统</span>
            </div>
            <div class="header-time">
                <span id="time"></span>
            </div>
        </div>
        <div class="content">
            <div class="content-con">
                <div class="left-body">
                    <div class="left-top public-bg">
                        <div class="public-title">重点水质量检测区</div>
                        <div class="top-body">
                            <div class="top-left">
                                <div class="top-left-title">
                                    <h6>注水量</h6>
                                    <span><b>1756</b>m3/h</span>
                                    <img src="image/pictre.png" alt="">
                                </div>
                            </div>
                            <div class="top-right">
                                <div class="top-left-title">
                                    <h6>泄水量</h6>
                                    <span><b>3520</b>m3/h</span>
                                    <img src="image/pictre.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="left-con public-bg">
                        <div class="public-title">水质量分布情况</div>
                        <div class="title-nav" id="leida"></div>
                    </div>
                    <div class="left-bottom public-bg">
                        <div class="public-title">企业污染排放情况</div>
                        <div class="title-nav" id="wuran"></div>
                    </div>
                </div>
                <div class="center-body">
                    <div class="map" id="map"></div>
                </div>
                <div class="right-body">
                    <div class="right-top public-bg">
                        <div class="public-title">水质污染TOP5</div>
                        <div class="title-nav">
                            <div class="top5-ul">
                                <ul>
                                    <li>
                                        <span>1</span>
                                        <span>严重</span>
                                        <span>北京市</span>
                                        <span>房山区</span>
                                        <span>重度污染</span>
                                        <span>15公里</span>
                                    </li>
                                    <li>
                                        <span>2</span>
                                        <span>严重</span>
                                        <span>上海市</span>
                                        <span>闵行区</span>
                                        <span>重度污染</span>
                                        <span>10公里</span>
                                    </li>
                                    <li>
                                        <span>3</span>
                                        <span>严重</span>
                                        <span>北京市</span>
                                        <span>朝阳区</span>
                                        <span>重度污染</span>
                                        <span>9.3公里</span>
                                    </li>
                                    <li>
                                        <span>4</span>
                                        <span>中度</span>
                                        <span>广东省</span>
                                        <span>广州市</span>
                                        <span>中度污染</span>
                                        <span>8.6公里</span>
                                    </li>
                                    <li>
                                        <span>5</span>
                                        <span>中度</span>
                                        <span>浙江省</span>
                                        <span>杭州市</span>
                                        <span>中度污染</span>
                                        <span>6.6公里</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="right-con public-bg">
                        <div class="public-title">水质类别占比</div>
                        <div class="title-nav" id="huaxing"></div>
                    </div>
                    <div class="right-bottom public-bg">
                        <div class="public-title">主要地区水流量</div>
                        <div class="title-nav" id="zhexian"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script>
    //顶部时间
    function getTime() {
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var nowTime;

        nowTime = myYear + '年' + fillZero(myMonth) + '月' + fillZero(myToday) + '日' + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };

    function fillZero(str) {
        var realNum;
        if (str < 10) {
            realNum = '0' + str;
        } else {
            realNum = str;
        }
        return realNum;
    }
    setInterval(getTime, 1000);
</script>

2.CSS

* {
    margin: 0;
    padding: 0
}

body {
    width: 100%;
    height: 100%;
    overflow: auto
}

.public-bg {
    background: rgba(12, 26, 63, .3)
}

.public-title {
    width: calc(100% - 20px);
    height: 30px;
    position: relative;
    top: 0;
    left: 5px;
    color: #fff;
    padding-left: 16px;
    line-height: 30px;
    font-size: 13px
}

.public-title:before {
    width: 4px;
    height: 20px;
    top: 5px;
    position: absolute;
    content: "";
    background: #2997e4;
    border-radius: 2px;
    left: 5px
}

.content-body {
    width: 100%;
    height: 100%;
    background: #0d325f;
    background-size: 100% 100%;
    position: absolute
}

.header {
    height: 70px;
    width: 100%
}

.header .header-left {
    width: 50%;
    float: left;
    line-height: 70px
}

.header .header-left span {
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 2px;
    padding: 0 20px
}

.header .header-time {
    width: 48%;
    line-height: 70px;
    float: right;
    text-align: right;
    padding-right: 20px
}

.header .header-time span {
    color: #fff
}

.content {
    width: 100%;
    height: calc(100% - 75px);
    position: absolute
}

.content .content-con {
    height: 100%
}

.content .content-con .left-body {
    width: 22%;
    height: 100%;
    float: left;
    margin: 0 .3%
}

.left-body .left-top {
    width: 100%;
    height: 27%
}

.left-body .left-top .top-body {
    width: 100%;
    height: calc(100% - 30px)
}

.left-body .left-top .top-body .top-left {
    float: left;
    width: 50%;
    height: 100%
}

.top-left-title {
    width: 100%;
    height: 100%;
    padding: 30px;
    box-sizing: border-box
}

.top-left-title h6 {
    color: #bad0e2
}

.top-left-title span {
    margin-top: 30px;
    display: inline-block;
    color: #2aa4f1
}

.top-left-title span b {
    font-size: 30px;
    letter-spacing: 5px
}

.top-left-title img {
    width: 80%
}

.left-body .left-top .top-body .top-right {
    float: left;
    width: 50%;
    height: 100%
}

.left-body .left-con {
    width: 100%;
    height: 38%;
    margin-top: 1.6%
}

.title-nav {
    width: 100%;
    height: calc(100% - 30px)
}

.left-body .left-bottom {
    width: 100%;
    height: 32%;
    margin-top: 1.6%
}

.center-body {
    width: 54%;
    height: 100%;
    margin: 0 .3%;
    float: left
}

.center-body .map {
    width: 100%;
    height: 100%
}

.right-body {
    width: 22%;
    height: 100%;
    float: right;
    margin: 0 .3%
}

.right-body .right-top {
    width: 100%;
    height: 32%
}

.title-nav .top5-ul {
    width: calc(100% - 20px);
    height: calc(100% - 30px);
    padding: 10px
}

.title-nav .top5-ul ul {
    width: 100%;
    height: 100%
}

.title-nav .top5-ul ul,
li {
    list-style: none
}

.title-nav .top5-ul ul>li {
    width: 100%;
    height: 20%;
    color: #fff;
    line-height: 68px;
    justify-content: center
}

.title-nav .top5-ul ul li span {
    margin-left: 3%;
    font-size: 14px
}

.title-nav .top5-ul ul li span:nth-child(1) {
    color: #eb6841;
    font-style: oblique;
    display: inline-block;
    text-align: center;
    font-size: 20px
}

.title-nav .top5-ul ul li span:nth-child(2) {
    width: 10%;
    display: inline-block;
    text-align: center;
    height: 30px;
    line-height: 30px;
    vertical-align: center;
    border-radius: 5px;
    color: #fff
}

.title-nav .top5-ul ul li:nth-child(1) span:nth-child(2),
.title-nav .top5-ul ul li:nth-child(2) span:nth-child(2),
.title-nav .top5-ul ul li:nth-child(3) span:nth-child(2) {
    background: #d89346
}

.title-nav .top5-ul ul li:nth-child(4) span:nth-child(2),
.title-nav .top5-ul ul li:nth-child(5) span:nth-child(2) {
    background: #1db5ea
}

.title-nav .top5-ul ul li span:nth-child(3) {
    display: inline-block;
    text-align: center
}

.title-nav .top5-ul ul li span:nth-child(4) {
    display: inline-block;
    text-align: center
}

.title-nav .top5-ul ul li span:nth-child(5) {
    display: inline-block;
    text-align: center
}

.title-nav .top5-ul ul li span:nth-child(6) {
    display: inline-block;
    text-align: center
}

.right-body .right-con {
    width: 100%;
    height: 25%;
    margin-top: 2%
}

.right-body .right-bottom {
    width: 100%;
    height: 39%;
    margin-top: 2%
}

3.JavaScript



$(function() {
    map();
    leidatu();
    wuran();
    huaxing();
    zhexian();


        name: "重庆",
        coords: [
            [106.54, 29.59],
            [104.24, 35.55]
        ],
        value: [1021, 120]
    }, {
        name: "浙江",
        coords: [
            [120.19, 30.26],
            [125.24, 27.55, 100]
        ],
        value: [1021, 120]
    }, {
        name: "上海",
        coords: [
            [121.4648, 31.2891],
            [122.4648, 32.2891]
        ],
        value: [1201, 60]
    }, ];
    option = {
        geo: {
            map: 'china',
            aspectScale: 0.85,
            layoutCenter: ["50%", "50%"],
            layoutSize: '100%',
            itemStyle: {
                normal: {
                    shadowColor: '#276fce',
                    shadowOffsetX: 0,
                    shadowOffsetY: 15,
                    opacity: 0.5,
                },
                emphasis: {
                    areaColor: '#276fce',
                }
            },
            regions: [{
                name: '南海诸岛',
                itemStyle: {
                    areaColor: 'rgba(0, 10, 52, 1)',
                    borderColor: 'rgba(0, 10, 52, 1)',
                    normal: {
                        opacity: 0,
                        label: {
                            show: false,
                            color: "#009cc9",
                        }
                    },
                },
                label: {
                    show: false,
                    color: '#FFFFFF',
                    fontSize: 12,
                },
            }],
        },
        series: [{
            type: 'map',
            mapType: 'china',
            aspectScale: 0.85,
            layoutCenter: ["50%", "50%"],
            layoutSize: '100%',
            zoom: 1,
            scaleLimit: {
                min: 1,
                max: 2
            },
            itemStyle: {
                normal: {
                    areaColor: '#0c274b',
                    borderColor: '#1cccff',
                    borderWidth: 1.5
                },
                emphasis: {
                    areaColor: '#02102b',
                    label: {
                        color: "#fff"
                    }
                }
            },
        }, {
            name: '首都',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: [{
                name: '首都',
                value: [116.24, 41.55, 100],
            }, ],
            symbol: iconRQ,
            symbolSize: 20,
            label: {
                normal: {
                    show: false,
                },
                emphasis: {
                    show: false
                }
            },
        }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            symbolSize: 10,
            rippleEffect: {
                period: 3,
                scale: 5,
                brushType: 'fill'
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}',
                    color: '#b3e2f2',
                    fontWeight: "bold",
                    fontSize: 16
                }
            },
            data: data,
            itemStyle: {
                normal: {
                    show: true,
                    color: '#ff8003',
                    shadowBlur: 20,
                    shadowColor: '#fff'
                },
                emphasis: {
                    areaColor: '#f00'
                }
            },
        }, {
            type: 'lines',
            zlevel: 3,
            symbol: 'circle',
            symbolSize: [5, 5],
            color: '#ff8003',
            opacity: 1,
            label: {
                show: true,
                padding: [10, 20],
                color: '#fff',
                backgroundColor: "#1a3961",
                borderColor: '#aee9fb',
                borderWidth: 1,
                borderRadius: 6,
                formatter(params) {
                    let arr = [params.name, "废水污染：" + params.value[1] + "家", "废气污染：" + params.value[0] + "家"];
                    return arr.join("\n")
                },
                textStyle: {
                    align: 'left',
                    lineHeight: 20,
                }
            },
            lineStyle: {
                type: 'solid',
                color: '#fff',
                width: 0.5,
                opacity: 1,
            },
            data: LableData,
        }, ]
    };
    myChart.on('click', function(params) {
        console.log(params);
    });
    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });
}

function leidatu() {
    var myChart = echarts.init(document.getElementById('leida'));
    option = {
        color: ['#00c2ff', '#f9cf67', '#e92b77'],
        legend: {
            show: true,
     
                value: 25,
                name: 'invisible',
                itemStyle: {
                    normal: {
                        color: '#453284'
                    },
                    emphasis: {
                        color: '#453284'
                    }
                }
            }]
        }]
    }
    myChart.setOption(option);
}

function zhexian() {
    var myChart = echarts.init(document.getElementById('zhexian'));
    dataText = [{
        name: '上游流速',
        type: 'line',
        smooth: true,
        symbolSize: 8,
        data: [127, 224, 120, 278, 227, 237],
        barWidth: '30%',
        itemStyle: {
            normal: {
                color: '#f0c725'
            }
        }
    }, {
        name: '下游流速',
        type: 'line',
        smooth: true,
        symbolSize: 8,
        data: [27, 124, 70, 178, 127, 157],
        barWidth: '30%',
        itemStyle: {
            normal: {
                color: '#16f892'
            }
        }
    }, {
        name: '平均流速',
        type: 'line',
        smooth: true,
        symbolSize: 8,
        data: [127, 74, 120, 99, 130, 355],
        barWidth: '30%',
        itemStyle: {
            normal: {
                color: '#0BE3FF'
            }
        }
    }]
    dataObj = {
        year: ['2015', '2016', '2017', '2018', '2019', '2020'],
        data: {
            value: [{
                name: '上游流速',
                value: [127, 224, 250, 278, 227, 355]
            }, {
                name: '下游流速',
                value: [27, 124, 70, 178, 127, 157]
            }, {
                name: '平均流速',
                value: [127, 74, 120, 99, 130, 50]
            }]
        }
    }
    let dataArr = []
    dataObj.data.value.map(item => {
        let datachild = []
        let newArr = {
            name: item.name,
            type: 'line',
            smooth: true,
            symbolSize: 8,
            data: item.value,
            barWidth: '30%',
            itemStyle: {
                normal: {
                    color: item.name === '上游流速' ? '#f0c725' : item.name === '下游流速' ? '#0BE3FF' : '#16f892'
                }
            }
        }
        dataArr.push(newArr)
    })
    option = {
        color: ['#f0c725', '#16f892'],
        title: {
            left: 'center',
            text: '',
            textStyle: {
                color: '#FFFFFF',
                fontSize: '14',
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            x: 'center',
            top: '25',
            textStyle: {
                color: '#c1cadf',
                "fontSize": 14
            }
        },
        grid: {
            left: '6%',
            right: '4%',
            top: '25%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            x: 'right',
            y: 'center'
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: dataObj.year,
            axisLine: {
                lineStyle: {
                    color: 'rgba(240,199,37,0.5)'
                }
            },
            axisLabel: {
                interval: 0,
                color: '#c1cadf',
                fontSize: '15'
            }
        }],
        yAxis: [{
            type: 'value',
            name: '(m3)',
            nameTextStyle: {
                color: '#c1cadf',
                align: 'right',
                lineHeight: 10
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(240,199,37,0.5)'
                }
            },
            axisLabel: {
                interval: 0,
                color: '#c1cadf',
                fontSize: '15'
            },
            splitLine: {
                show: false
            }
        }],
        series: dataArr
    };
    myChart.setOption(option);
    window.addEventListener("resize", function() {
        myChart.resize();
    });
}

五、更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！

3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥

IT-司马青衫

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
基于Echarts实现可视化数据大屏水质分析系统大屏数据

🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作，可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ ...
复制链接

扫一扫

专栏目录