前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
文章目录
- 前言
- 一、Echart是什么
- 二、ECharts入门教程
- 三、作品演示
- 四、代码实现
- 1.HTML
- 2.CSS
- 3.JavaScript
- 4.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">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/scroll.css">
<link rel="stylesheet" href="css/histor.css">
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/date.css">
<script src="js/shipei.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script type="text/javascript" src="https://developer.baidu.com/map/custom/stylelist.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=fbXf9j0aPH4EwxPBaixZ8Ll2rGwMbFe8"></script>
</head>
<body>
<div class="bg">
<div class="header">
<span class="header-title">观测站</span>
<span class="header-text">综合监控平台</span>
</div>
<div class="wrap">
<div class="left fl">
<div class="left-header">
<span>农气站在线情况</span>
<div id="left-header-nong" style="width: 100%;height: 100%;" class="left-header-nong"></div>
</div>
<div class="left-mid">
<span>按观测作物分类</span>
<div id="left-mid-nong" style="width: 100%;height: 100%;" class="left-header-nong"></div>
</div>
<div class="left-bottom">
<span>农业小气候站</span>
<div id="left-bottom-nong" style="width: 100%;height: 100%;" class="left-header-nong"></div>
</div>
</div>
<div class="center fl">
<div class="center-map">
<div id="allmap" style="width:100%;height:100%;"></div>
</div>
<div class="center-offline">
<div class="center-offline-header">
<p>离线站点清单</p>
</div>
<div class="center-offline-mid">
<div class="title">
<div class="sit sit-title fl">站名</div>
<div class="sit sit-title fl">站号</div>
<div class="sit sit-title fl">状态</div>
<div class="sit sit-title fl">电话</div>
</div>
<div class="list" id="list">
<div class="rowup" id="rowup">
<ul class="list-item">
<li class="fl sit-item">L0044</li>
<li class="fl sit-item">无锡市黄瓜</li>
<li class="fl sit-item">离线</li>
<li class="fl sit-item">12345678984</li>
</ul>
<ul class="list-item">
<li class="fl sit-item">L0044</li>
<li class="fl sit-item">东阳台村种植园</li>
<li class="fl sit-item">离线</li>
<li class="fl sit-item">12345678984</li>
</ul>
<ul class="list-item">
<li class="fl sit-item">L0044</li>
<li class="fl sit-item">山东院内</li>
<li class="fl sit-item">离线</li>
<li class="fl sit-item">12345678984</li>
</ul>
<ul class="list-item">
<li class="fl sit-item">L0044</li>
<li class="fl sit-item">山东农气站</li>
<li class="fl sit-item">离线</li>
<li class="fl sit-item">12345678984</li>
</ul>
</div>
<div class="rowupcope" id="rowupcope"></div>
</div>
</div>
<div class="center-offline-bottom">
<p>研制：科技有限公司 研制：科技有限公司</p>
</div>
</div>
</div>
<div class="right fr">
<span class="right-title">站点详情</span>
<div class="right-top">
<div class="right-top-content">
<span class="name">站名:</span>
<span class="text">观测站</span>
</div>
<div class="right-top-content">
<span class="name">编号:</span>
<span class="text">LOO33</span>
</div>
<div class="right-top-content">
<span class="name">地址:</span>
<span class="text">观测站</span>
</div>
<div class="right-top-content">
<span class="name">观测作物:</span>
<span class="text">西红柿</span>
</div>
</div>
<div class="right-mid">
<div class="right-mid-header">
实时数据
</div>
<div class="right-mid-scroll">
<div class="right-mid-content">
<div class="right-top-content">
<span class="name">要素数:</span>
<span class="text">7</span>
</div>
<div class="right-top-content">
<span class="name">观测时间:</span>
<span class="text">2020-03-16 10:40:00</span>
</div>
<div class="right-top-content">
<span class="name">150cm气温:</span>
<span class="text">33.4℃</span>
</div>
<div class="right-top-content">
<span class="name">150cm空气相对湿度</span>
<span class="text">48.7%</span>
</div>
<div class="right-top-content">
<span class="name">5cm低温：</span>
<span class="text">0.0℃</span>
</div>
<div class="right-top-content">
<span class="name">10cm低温：</span>
<span class="text">18.1℃</span>
</div>
<div class="right-top-content">
<span class="name">20cm低温:</span>
<span class="text">18.0℃</span>
</div>
<div class="right-top-content">
<span class="name">10cm土壤相对湿度:</span>
<span class="text">46.3℃</span>
</div>
<div class="right-top-content">
<span class="name">20cm土壤相对湿度:</span>
<span class="text">46.3℃</span>
</div>
</div>
</div>
<a href="javascript:;" class="history" id="triggerBtn">查看历史记录</a>
</div>
<div class="right-bottom">
<div class="right-mid-header">
实时监控
</div>
<div class="right-bottom-content">
<img src="./img/jiankong.png" alt="">
</div>
<a href="javascript:;" class="history-pic" id="triggerBtnpic">查看历史图片</a>
</div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="model-header">查看历史记录</div>
<div class="see">
<div class="from fl">
<div class="line fl">
<span>站名：</span>
<select name="name" id="" class="line-content">
<option value="">西红柿观测站</option>
</select>
</div>
<div class="line fl">
<span>要素：</span>
<select name="name" id="" class="line-content">
<option value="">7</option>
</select>
</div>
<div class="line fl">
<span>开始时间:</span>
<input type="text" name="date" id="date" lay-verify="date" placeholder="" autocomplete="off" class="line-content" />
</div>
<div class="line fl">
<span>结束时间:</span>
<input type="text" name="date" id="date1" lay-verify="date" placeholder="" autocomplete="off" class="line-content" />
</div>
</div>
<div class="see-right fr">
<div class="submit fr">
<input type="button" class="button" value="导出">
</div>
<div class="submit fr query">
<input type="button" class="button" value="查询">
</div>
</div>
</div>
<div class="date">
<div class="date-content" id="date-content-wrap">
<div id="data-content-line" style="width: 100%;height: 98%;" class="data-content-line"></div>
</div>
</div>
<div id="closeBtn" class="close">X</div>
</div>
</div>
<div id="myModalpic" class="modalpic">
<div class="modal-content">
<div class="model-header">查看历史图片</div>
<div class="see">
<div class="from fl">
<div class="line fl">
<span>站名：</span>
<select name="name" id="" class="line-content">
<option value="">西红柿观测站</option>
</select>
</div>
<div class="line fl">
<span>要素：</span>
<select name="name" id="" class="line-content">
<option value="">7</option>
</select>
</div>
<div class="line fl">
<span>开始时间:</span>
<input type="text" name="date" id="date2" lay-verify="date" placeholder="" autocomplete="off" class="line-content" />
</div>
<div class="line fl">
<span>结束时间:</span>
<input type="text" name="date" id="date3" lay-verify="date" placeholder="" autocomplete="off" class="line-content" />
</div>
</div>
<div class="see-right fr">
<div class="submit fr querypic">
<input type="button" class="button" value="查询">
</div>
</div>
</div>
<div class="date">
<div class="data-contentpic">
<div class="date-content-pic fl">
<img src="./img/lishitupian.jpg" alt="">
</div>
<div class="date-content-pic fl">
<img src="./img/lishitupian.jpg" alt="">
</div>
<div class="date-content-pic fl">
<img src="./img/lishitupian.jpg" alt="">
</div>
<div class="date-content-pic fl">
<img src="./img/lishitupian.jpg" alt="">
</div>
<div class="date-content-pic fl">
<img src="./img/lishitupian.jpg" alt="">
</div>
<div class="date-content-pic fl">
<img src="./img/lishitupian.jpg" alt="">
</div>
<div class="date-content-pic fl">
<img src="./img/lishitupian.jpg" alt="">
</div>
<div class="date-content-pic fl">
<img src="./img/lishitupian.jpg" alt="">
</div>
</div>
</div>
<div id="closeBtnpic" class="close">X</div>
</div>
</div>
</div>
</body>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/bar.js"></script>
<script src="js/pie.js"></script>
<script src="js/pinhuan.js"></script>
<script src="js/map.js"></script>
<script type="text/javascript" src="js/InfoBox.js"></script>
<script src="js/histroy.js"></script>
<script src="js/histroyline.js"></script>
<script src="layui/layui.js"></script>
<script src="js/date.js"></script>
<script src="js/gundong.js"></script>
</html>
2.CSS
/*css reset*/
/*清除内外边距*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
hr,
/*结构元素*/
ul,
ol,
li,
dl,
dt,
dd,
/*列表元素*/
form,
fieldset,
legend,
input,
button,
select,
textarea,
/*表单元素*/
th,
td,
/*表格元素*/
pre {
padding: 0;
margin: 0;
}
/*重置默认样式*/
body,
button,
input,
select,
textarea {
/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
color: #333;
font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
em,
i {
font-style: normal;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
vertical-align: top;
}
img {
border: none;
/*display: block;*/
vertical-align: top;
}
textarea {
overflow: auto;
resize: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
/*常用公共样式*/
.fl {
float: left;
display: inline;
}
.fr {
float: right;
display: inline;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
html {
overflow-x: hidden;
}
3.JavaScript
(function() {
'use strict';
var modalBox = {};
modalBox.modal = document.getElementById("myModal");
modalBox.modalpic = document.getElementById("myModalpic");
modalBox.triggerBtn = document.getElementById("triggerBtn");
modalBox.triggerBtnpic = document.getElementById('triggerBtnpic')
modalBox.closeBtn = document.getElementById("closeBtn");
modalBox.closeBtnpic = document.getElementById("closeBtnpic");
modalBox.show = function() {
$("#data-content-line").load(location.href + "#data-content-line");
this.modal.style.display = "block";
}
modalBox.showpic = function() {
$('#myModalpic').show();
}
modalBox.close = function() {
this.modal.style.display = "none";
}
modalBox.closepic = function() {
$('#myModalpic').hide();
}
modalBox.init = function() {
var that = this;
this.triggerBtn.onclick = function() {
that.show();
}
this.triggerBtnpic.onclick = function() {
that.showpic();
}
this.closeBtn.onclick = function() {
that.close();
}
this.closeBtnpic.onclick = function() {
that.closepic();
}
}
modalBox.init();
})()4.Echarts
(function() {
'use strict';
var myChart = echarts.init(document.getElementById('left-mid-nong'));
// 指定图表的配置项和数据
var option = {
tooltip: {},
legend: [{
// 设置布局方向
orient: 'vertical',
// 文字和图形对齐方式
align: 'left',
right: '25%',
top: '10%',
// 图形形状
icon: 'circle',
padding: [20, 0, 0, 0],
itemGap: 20,
textStyle: {
borderRadius: 100,
color: '#fff'
},
data: ["荔枝", '黄瓜', "白菜", "蘑菇", "草莓"]
},
{
orient: 'vertical',
right: '6%',
top: '10%',
padding: [20, 0, 0, 0],
itemGap: 20,
// 文字和图形对齐方式
align: 'left',
// 图形形状
icon: 'circle',
textStyle: {
borderRadius: 100,
color: '#fff'
},
data: ["南果梨", "大葱", "西瓜", "花生", "棚"]
}
],
series: [{
name: '销量',
type: 'pie',
radius: '50%',
right: '40%',
bottom: '10%',
data: [{
value: 200,
name: '荔枝'
},
{
value: 156,
name: '黄瓜'
},
{
value: 400,
name: '白菜'
},
{
value: 991,
name: '蘑菇'
},
{
value: 332,
name: '草莓'
},
{
value: 100,
name: '南果梨'
},
{
value: 455,
name: '大葱'
},
{
value: 378,
name: '西瓜'
},
{
value: 230,
name: '花生'
},
{
value: 50,
name: '棚'
}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener('resize', function() {
myChart.resize();
})
})()
