e03 基于Echarts实现可视化数据大屏黄河实时监测地图(1页)
前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】
❤ 【1000套 毕设项目精品实战案例】
❤ 【 20套 VUE+Echarts 大数据可视化源码】
❤ 【150套 HTML+ Echarts大数据可视化源码 】
文章目录
- 前言
- 一、Echart是什么
- 二、ECharts入门教程
- 三、作品演示
- 四、代码实现
- 1.HTML
- 2.CSS
- 五、更多干货
一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、ECharts入门教程
5 分钟上手ECharts
三、作品演示
四、代码实现
1.HTML
DOCTYPE html>
<html lang="en"><head><link href="css/BigData.css" rel="stylesheet" type="text/css" /><link href="css/index.css" rel="stylesheet" type="text/css" /><link href="css/index01.css" rel="stylesheet" type="text/css" /><script src="js/jquery.js">script><link href="js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css" /><link href="css/Security_operation.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" href="js/artDialog/skins/default.css" type="text/css" /><script src="js/laydate.js">script><script src="js/Home_page.js">script><meta charset="UTF-8"><title>河长制监督系统title><style>.aui_title {background-color: #407fff !important;height: 32px;line-height: 32px;font-weight: 700;font-size: 14px}style>
head><body><div class="data_bodey"><div class="index_nav"><ul style="height: 30px; margin-bottom: 0px;">ul><div class="total_chose_box" style="display: none;"><div style="height: 32px;">div><span class="chose_tltle">请选择年份：span><select class="year_chose"><option>2017option><option>2016option><option>2015option><option>2014option><option>2013option><option>2012option>select><span class="chose_tltle">请输入月份：span><input class="chose_text_in"><span class="chose_tltle">请选择区域：span><select class="year_chose"><option> 成都市option><option>自贡市option><option>攀枝花市option><option>泸州市option><option>德阳市option><option>绵阳市option><option>广元市option><option>遂宁市option><option>内江市option><option>乐山市option><option>南充市option><option>宜宾市option><option>广安市option><option>达州市option><option>巴中市option><option>雅安市option><option>眉山市option><option>资阳市option><option>阿坝州option><option>甘孜州option><option>凉山州option>select><button class="chose_enter">确定button>div><div class="clear">div>div><div class="index_tabs"><div class="inner" style="height: 109%;"><div class="left_cage"><div class="dataAllBorder01 cage_cl" style="margin-top: 9% !important; height: 24%;"><img src="video/1.jpg" class="dataAllBorder02 video_cage">div><div class="dataAllBorder01 cage_cl" style="margin-top: 1.5% !important; height: 38%;"><div class="dataAllBorder02 video_cage"><img src="video/radi01.jpg" class="video_around video_around_chose"><img src="video/radi01.jpg" class="video_around video_around_chose"><img src="video/radi01.jpg" class="video_around video_around_chose"><img src="video/radi01.jpg" class="video_around video_around_chose">div>div><div class="dataAllBorder01 cage_cl" style="margin-top: 1.5% !important; height: 32%; position: relative;"><div class="dataAllBorder02" style="padding: 1.2%; overflow: hidden"><div class="message_scroll_box"><div class="message_scroll"><div class="scroll_top"><span class="scroll_title">高锰酸盐超标警告span><span class="scroll_level scroll_level01">一级span><a class="localize">a><span class="scroll_timer">17-09-13/9:52span>div><div class="msg_cage"><a class="localize_title"><span><label>编号label>：GH32101span><span class="right"><label>监测值label>：1.1(mg/Ls)span>a>div><div class="msg_cage"><a class="localize_msg">xx阳市沱江一段21号排污口处a>div>div><div class="message_scroll"><div class="scroll_top"><span class="scroll_title">总磷超标警告span><span class="scroll_level scroll_level03">三级span><a class="localize">a><span class="scroll_timer">17-09-13/9:52span>div><div class="msg_cage"><a class="localize_title"><span><label>编号label>：GH32101span><span class="right"><label>监测值label>：1.1(mg/Ls)span>a>div><div class="msg_cage"><a class="localize_msg">xx阳市沱江一段21号排污口处a>div>div><div class="message_scroll"><div class="scroll_top"><span class="scroll_title">高锰酸盐超标警告span><span class="scroll_level scroll_level02">二级span><a class="localize">a><span class="scroll_timer">17-09-13/9:52span>div><div class="msg_cage"><a class="localize_title"><span><label>编号label>：GH32101span><span class="right"><label>监测值label>：1.1(mg/Ls)span>a>div><div class="msg_cage"><a class="localize_msg">xx阳市沱江一段21号排污口处。a>div>div><div class="message_scroll"><div class="scroll_top"><span class="scroll_title">高锰酸盐超标警告span><span class="scroll_level scroll_level01">一级span><a class="localize">a><span class="scroll_timer">17-09-13/9:52span>div><div class="msg_cage"><a class="localize_title"><span><label>编号label>：GH32101span><span class="right"><label>监测值label>：1.1(mg/Ls)span>a>div><div class="msg_cage"><a class="localize_msg">xx阳市沱江一段21号排污口处a>div>div>div>div><div class="scroll_tool_outbox"><div class="scroll_tool_box"><a class="scroll_tool" href="#">查看历史推送a>div>div>div>div><div class="center_cage"><div class="dataAllBorder01 cage_cl" style="margin-top: 3.5% !important; height: 62.7%; position: relative;"><div class="dataAllBorder02" style="position: relative; overflow: hidden;"><div class="map_title_box" style="height: 6%"><div class="map_title_innerbox"><div class="map_title">黄河实时监测地图div>div>div><div class="map" id="divMap">div><div class="display_type_box display_box" style="display: none;overflow:auto"><div class="display_type_center_box"><ul class="display_type_inner_box" id="layerList"><li class="display_type_msg"><input id="zt_4" type="checkbox" class="display_type_chose" /> XX监测li><li class="display_type_msg"><input id="zt_1" type="checkbox" class="display_type_chose" />流量监测li><li class="display_type_msg"><input id="zt_5" type="checkbox" class="display_type_chose" />水位监测li><li class="display_type_msg"><input id="zt_6" type="checkbox" class="display_type_chose" />视频li><li class="display_type_msg"><input id="zt_2" type="checkbox" class="display_type_chose" />车辆监测li>ul>div><div class="display_type_funct_box"><span class="display_type_funct display_type_funct_sure">确定span>div>div><div class="city_chose_box display_box" style="display: none"><div class="display_type_center_box"><ul class="display_type_inner_box" id="ulCity"><li class="display_type_msg"> 成都市li><li class="display_type_msg">自贡市li><li class="display_type_msg">攀枝花市li><li class="display_type_msg">泸州市li><li class="display_type_msg">德阳市li><li class="display_type_msg">绵阳市li><li class="display_type_msg">广元市li><li class="display_type_msg">遂宁市li><li class="display_type_msg">内江市li><li class="display_type_msg">乐山市li><li class="display_type_msg">南充市li><li class="display_type_msg">宜宾市li><li class="display_type_msg">广安市li><li class="display_type_msg">达州市li><li class="display_type_msg">巴中市li><li class="display_type_msg">雅安市li><li class="display_type_msg">眉山市li><li class="display_type_msg">资阳市li><li class="display_type_msg">阿坝州li><li class="display_type_msg">甘孜州li><li class="display_type_msg">凉山州li>ul>div><div class="display_type_funct_box"><span class="display_type_funct display_type_funct_sure">确定span>div>div><div class="trajectory_box" style="display: none" id="divRouteReview"><input class="trajectory" id="start" placeholder="开始时间"><input class="trajectory" id="end" placeholder="结束时间"><select class="ratio"><option>1倍option><option>2倍option><option>3倍option>select><button class="playback" onClick="run()">回放button><button class="playback close_playback">关闭button>div><div class="trajectory_box" style="display: none" id="divBufferSetting"><button class="playback" style="width:60px" onClick="setBufferCenter()">设置点button><input class="trajectory" id="txtBufferX" placeholder="坐标X"><input class="trajectory" id="txtBufferY" placeholder="坐标Y"><input value="10" class="trajectory" id="txtBufferDis" placeholder="缓冲距离"><select class="ratio"><option>米option><option>千米option>select><button class="playback" onclick="executeBuffer();edit()" style="width:60px">分析button><button class="playback close_playback">关闭button>div><div class="map_tool_outbox"><span class="map_tool" onClick="zoomFull()"><a class="map_tool_inner" title="全图" >a>span><span class="map_tool" onClick="zoomOut()"><a class="map_tool_inner" title="放大" style="background-position-x:-36px">a>span><span class="map_tool" onClick="zoomIn()"><a class="map_tool_inner" title="缩小" style="background-position-x:-72px">a>span><span class="map_tool" onClick="showHeatMap()"><a class="map_tool_inner" title="倒退视图" style="background-position-x:-108px">a>span><span class="map_tool"><a class="map_tool_inner" title="前进视图" style="background-position-x:-144px">a>span><span class="map_tool"><a class="map_tool_inner display_type_btn" title="专题地图" style="background-position-x:-180px">a>span><span class="map_tool"><a class="map_tool_inner city_chose_btn" title="城市定位" style="background-position-x:-432px">a>span><span class="map_tool" id="btnBuffer"><a class="map_tool_inner" title="缓冲区分析" style="background-position-x:-216px">a>span><span class="map_tool"><a class="map_tool_inner addition_check_btn check_btn" title="水质监测设备检索" style="background-position-x:-252px">a>span><span class="map_tool"><a class="map_tool_inner chemistry_check_btn check_btn" onClick="chemistryCheck()" title="流量监测设备检索" style="background-position-x:-288px">a>span><span class="map_tool"><a class="map_tool_inner enterprise_check_btn check_btn" onClick="enterpriseCheck()" title="水位监测设备检索" style="background-position-x:-324px">a>span><span class="map_tool"><a class="map_tool_inner car_check_btn check_btn" onClick="carCheck()" title="车辆监测设备检索" style="background-position-x:-360px">a>span><span class="map_tool"><a class="map_tool_inner" onClick="Search()" title="视频设备检索" style="background-position-x:-468px">a>span><span class="map_tool"><a class="map_tool_inner" onClick="cancel()" id="fresh_tool" title="清空" style="background-position-x:-396px">a>span><span class="map_tool"><input type="text" id="txtCoord" style="width:150px;visibility:hidden" />span>div>div>div><div class="dataAllBorder01 cage_cl" style="margin-top: 0.6% !important; height: 32.1%;"><div class="dataAllBorder02" id="map_title_innerbox"><div class="map_title_box"><div class="map_title_innerbox"><div class="map_titl">空间分析数据div>div><div><select id="selLayer" style="width:100px;"><option value="">水质点位option>select>div>div><table id="table" style="width: 100%">table>div><div class="dataAllBorder02" id="map_title_innerbox1" style="display: none; position: relative;"><div class="map_title_box"><div class="map_title_innerbox"><div class="map_title" style="background-image: url(img/second_title.png);">警告周边污染条件扫描div>div>div><ul class="tab_msg_box"><li class="tab_msg tab_msg01 tab_msg_current">附近污染源li><li class="tab_msg tab_msg02">临近商户li>ul><div class="table1"><table id="table1" style="width: 100%">table>div><div class="table2" style=" display: none;"><table id="table2" style="width: 100%;">table>div>div>div>div><div class="right_cage"><div class="dataAllBorder01 cage_cl" style="margin-top: 9% !important; height: 24%"><div class="dataAllBorder02" id="cage_cl"><div class="analysis">监测设备数量：div><ul class="data_show_box"><li class="data_cage">0li><li class="data_cage">0li><li class="data_cage" style="background-image: none;">,li><li class="data_cage funct_number">1li><li class="data_cage funct_number">5li><li class="data_cage funct_number">2li>ul><div class="depart_number_box"><ul class="depart_number_cage"><li class="depart_name">水质监测类：li><li class="depart_number">3,238li>ul><ul class="depart_number_cage"><li class="depart_name">流量监测类：li><li class="depart_number">1,630li>ul><ul class="depart_number_cage" style="margin-bottom: 0px;"><li class="depart_name">水位测量类：li><li class="depart_number">4,251li>ul><ul class="depart_number_cage" style="margin-bottom: 0px;"><li class="depart_name">车辆监测类：li><li class="depart_number">24li>ul>div>div><div class="dataAllBorder02 over_hide" id="cage_cl1" style="display: none"><div class="analysis">点位基础信息：div><ul class="location_msg_box"><li class="location_msg01 location_single">事件级别：<a href="#" style="