前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
文章目录
- 前言
- 一、Echart是什么
- 二、ECharts入门教程
- 三、作品演示
- 四、代码实现
- 1.HTML
- 2.CSS
- 3.JavaScript
- 五、更多干货
一、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) + '日' + ' ' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + ' ' + week[myDay] + ' ';
//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();
});
}
