Recently, the company working on a project "Intelligent Transportation IoT big data platform," front WEB interface cool special effects to others.
Project Name: Intelligent Transportation IoT big data platform
Technology Tags: Html5, Css, JavaScript, Echarts (world map, histogram)
Supported platforms: PC client browser
Description: By Html5, Css, JavaScript, Echarts show other front-end technology cool interface effects.
The following is the code:
<!doctype html>
<head>
<meta charset="utf-8" />
<title>智能交通IoT大数据平台</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100%;
}
#box{
width: 1200px;
height: 980px;
left:15%;
top:5%;
position: absolute;
}
</style>
</head>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/echarts.min.js" charset="utf-8"></script>
<script src="js/jquery-3.2.0.min.js" charset="utf-8"></script>
<script src="beijing.js"></script>
<body>
<div class="wpbox">
<div class="bnt">
<div class="topbnt_left fl">
<ul>
</ul>
</div>
<h1 class="tith1 fl">智能交通IoT大数据平台</h1>
<div class=" fr topbnt_right">
<ul>
</ul>
</ul>
</div>
</div>
<!-- bnt end -->
<div class="left1">
<div class="aleftboxttop pt1"><h2 class="tith2">设备数国家排名TOP5</h2>
<div class="pvr fl liwp lpeftb2otcont1" style="height:70%;" >
<ul>
<li class="hot1">1</li>
<li class="hot2">2</li>
<li class="hot3">3</li>
<li class="hot4">4</li>
<li class="hot5">5</li>
</ul>
<div id="pleftbox2bott_cont"class="lpeftb2otcont" style="height:100%;"></div>
</div>
<!-- lefttoday_number end -->
</div>
<div class="aleftboxtmidd">
<h2 class="tith2 pt2">设备数城市排名TOP5</h2>
<div class="pvr fl liwp lpeftb2otcont1" style="height:70%;" >
<ul>
<li class="hot1">1</li>
<li class="hot2">2</li>
<li class="hot3">3</li>
<li class="hot4">4</li>
<li class="hot5">5</li>
</ul>
<div id="pleftbox2bott_cont2" class="lpeftb2otcont" style="height:100%;"></div>
</div>
</div>
<div class="aleftboxtbott">
<h2 class="tith2">故障分类</h2>
<!-- <div class="lefttoday_tit height"><p class="fl">状态：已调节.æl,kmo</p><p class="fr">时间段：2018-06-10 至 2018-06-14</p></div> -->
<div id="aleftboxtmidd" class="aleftboxtbott_cont2" ></div>
</div>
</div>
<!-- left1 end -->
<div class="mrbox">
<div class="mrbox_topmidd" style="width: 69%;">
<div class="amiddboxttop">
<h2 class="tith2 pt1">全球分布图</h2>
<div class="hot_map" id="topmap" >
<p>总数：<span style="color:rgb(0,176,240)">10000</span> </p><p>在线：<span style="color:rgb(0,176,80)">9675</span> </p><p>离线：<span style="color:rgb(255,196,0)">53</span> </p><p>故障：<span style="color:red">32</span></p>
</div>
</div>
</div>
<!-- mrbox_top end -->
<div class="mrbox_top_right">
<div class="arightboxtop"><h2 class="tith2">消息通知</h2>
<div class="lefttoday_tit"><p class="fl">消息通知内容</p><p class="fr">发生时间</p></div>
<div class="left2_table">
<ul>
<li>
<p class="fl"><b>LED显示屏电量不足</b><br>
中山路与人民路交叉口，<br>
</p>
<p class="fr pt17">2018-06-22 10:00</p>
</li>
<li class="bg">
<p class="fl"><b>LED右转指示标致电路异常</b><br>
中山路与人民路交叉口。<br>
</p>
<p class="fr pt17">2018-06-22 10:00</p>
</li>
<li>
<p class="fl"><b>LED右转指示标致断开网络</b><br>
中山路与人民路交叉口，<br>
</p>
<p class="fr pt17">2018-06-22 10:00</p>
</li>
<li class="bg">
<p class="fl"><b>LED路程指示标致位置统称</b><br>
中山路与人民路交叉口，<br>
</p>
<p class="fr pt17">2018-06-22 10:00</p>
</li>
<li>
<p class="fl"><b>LED路程指示标致振动异常</b><br>
中山路与人民路交叉口，<br>
</p>
<p class="fr pt17">2018-06-22 10:00</p>
</li>
<li class="bg">
<p class="fl"><b>LED路程指示标致维修完成</b><br>
中山路与人民路交叉口，<br>
</p>
<p class="fr pt17">2018-06-22 10:00</p>
<li>
<p class="fl"><b>LED显示屏安装完成</b><br>
中山路与人民路交叉口，<br>
</p>
<p class="fr pt17">2018-06-22 10:00</p>
</li>
<li class="bg">
<p class="fl"><b>LED路程指示标致安装完成</b><br>
中山路与人民路交叉口，<br>
</p>
<p class="fr pt17">2018-06-22 10:00</p>
<li>
<p class="fl"><b>LED显示屏安装完成</b><br>
中山路与人民路交叉口，<br>
</p>
<p class="fr pt17">2018-06-22 10:00</p>
</li>
<li class="bg">
<p class="fl"><b>LED路程指示标致安装完成</b><br>
中山路与人民路交叉口，<br>
</p>
<p class="fr pt17">2018-06-22 10:00</p>
<li>
<p class="fl"><b>LED显示屏安装完成</b><br>
中山路与人民路交叉口，<br>
</p>
<p class="fr pt17">2018-06-22 10:00</p>
</li>
</ul>
</div>
</div>
<div class="arightboxbott"><h2 class="tith2 ">设备信息</h2>
<div id="aleftboxtmiddr" class="arightboxbottcont2">
<table width="100%" height="100%" >
<tr>
<td>
<p>设备编号：LED-902</p>
<p>设备名称：右转指示灯</p>
<p>类别：LED灯</p>
<p>状态：电量不足</p>
<p>电压：10V</p>
<p>温度：12℃</p>
<p>湿度：10%</p>
<p>位置：中山路人民路交XXXXXXXXXXXXXXX叉口</p>
<p>经纬度：22222,555555</p>
</td>
<td >
<img src="./img/device.png"></img>
</td>
</tr>
</table>
</div>
</div>
</div>
<!-- mrbox_top_right end -->
</div>
</div>
</div>
<div id="box" class="box">
</div>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts-gl.js" type="text/javascript" charset="utf-8"></script>
<script src="js/china.js" type="text/javascript" charset="utf-8"></script>
<script src="js/world.js" type="text/javascript" charset="utf-8"></script>
<script src="js/data-1499132667476-ry7ZXuu4Z.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config = {
color: '#750be8',
levels: 1,
intensity: 4,
threshold: 0.01
}
var canvas = document.createElement('canvas');
canvas.width = 2048;
canvas.height = 1024;
context = canvas.getContext("2d");
context.lineWidth = 0.5;
context.strokeStyle = config.color;
context.fillStyle = config.color;
context.shadowColor = config.color;
$.when(
$.getScript('./js/world-gl-map/d3-contour.js'),
$.getScript('./js/world-gl-map/d3_geo.js'),
$.getScript('./js/world-gl-map/d3_timer.js')
).done(function () {
image('img/8.png').then(function(image) {
var m = image.height,
n = image.width,
values = new Array(n * m),
contours = d3.contours().size([n, m]).smooth(true),
projection = d3.geoIdentity().scale(canvas.width / n),
path = d3.geoPath(projection, context);
// StackBlur.R(image, 5);
for (var j = 0, k = 0; j < m; ++j) {
for (var i = 0; i < n; ++i, ++k) {
values[k] = image.data[(k << 2)] / 255;
}
}
var opt = {
image: canvas
}
var results = [];
function update(threshold, levels) {
context.clearRect(0, 0, canvas.width, canvas.height);
var thresholds = [];
for (var i = 0; i < levels; i++) {
thresholds.push((threshold + 1 / levels * i) % 1);
}
results = contours.thresholds(thresholds)(values);
redraw();
}
function redraw() {
results.forEach(function (d, idx) {
context.beginPath();
path(d);
context.globalAlpha = 1;
context.stroke();
if (idx > config.levels / 5 * 3) {
context.globalAlpha = 0.01;
context.fill();
}
});
opt.onupdate();
}
d3.timer(function(t) {
var threshold = (t % 10000) / 10000;
update(threshold, 1);
});
initCharts(opt);
update(config.threshold, config.levels);
});
function image(url) {
return new Promise(function(resolve) {
var image = new Image();
image.src = url;
image.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = image.width / 8;
canvas.height = image.height / 8;
var context = canvas.getContext("2d");
context.drawImage(image, 0, 0, canvas.width, canvas.height);
resolve(context.getImageData(0, 0, canvas.width, canvas.height));
};
});
}
function initCharts(opt) {
var myChart = echarts.init(document.getElementsByClassName("box")[0])
let canvas2 = document.createElement('canvas');
let mapChart = echarts.init(canvas2, null, {
width: 2048,
height: 1024
});
var contourChart = echarts.init(document.createElement('canvas'), null, {
width: 2048,
height: 1024
});
var img = new echarts.graphic.Image({
style: {
image: opt.image,
x: -1,
y: -1,
width: opt.image.width + 2,
height: opt.image.height + 2
}
});
contourChart.getZr().add(img);
opt.onupdate = function () {
img.dirty();
};
mapChart.setOption({
series: [{
type: 'map',
map: 'world',
// 绘制完整尺寸的 echarts 实例
top: 0,
left: 0,
right: 0,
bottom: 0,
boundingCoords: [
[-180, 90],
[180, -90]
]
}]
});
var canvas1 = document.createElement('canvas');
var mapChart1 = echarts.init(canvas1, null, {
width: 2048,
height: 1024
});
mapChart1.setOption({
backgroundColor: 'transparent',
series: [{
type: 'map',
map: 'china',
left: 0,
top: 0,
right: 0,
bottom: 0,
// environment: '#000',
boundingCoords: [
[-180, 90],
[180, -90]
],
label: {
normal: {
show: false,
fontSize: 4,
lineHeigh: 4,
color: '#000',
}
},
itemStyle: {
normal: {
areaColor: 'transparent',
borderWidth: 1,
borderType: 'solid',
borderColor: '#a85000'
}
},
}]
});
var option = {
title: {
text: '点击地球获取该区域地图',
textStyle: {
color: '#fff'
}
},
tooltip: {
show: true
},
// visualMap: [{
// // show: false,
// type: 'continuous',
// seriesIndex: 0,
// text: ['scatter3D'],
// textStyle: {
// color: '#fff'
// },
// calculable: true,
// max: 3000,
// inRange: {
// color: ['#87aa66', '#eba438', '#d94d4c']
// }
// }],
globe: {
// baseTexture: mapChart,
environment:'none',//背景
//environment:'img/charity_top.png',
heightTexture: 'img/bathymetry_bw_composite_4k-back.jpg',
baseTexture: 'img/8.png',
shading: 'lambert',
light: { // 光照阴影
main: {
color: 'blue', // 光照颜色
intensity: 14.2, // 光照强度
shadowQuality: 'ultra', //阴影亮度
shadow: true, // 是否显示阴影
alpha: 40,
beta: -30
},
ambient: {
intensity: 4.6
}
},
viewControl: {
alpha: 30,
beta: 160,
// targetCoord: [116.46, 39.92],
autoRotate: true,
autoRotateAfterStill: 10,
distance: 240,
autoRotateSpeed:4
},
postEffect: {//为画面添加高光，景深，环境光遮蔽（SSAO），调色等效果
enable: true, //是否开启
SSAO: {//环境光遮蔽
radius: 1,//环境光遮蔽的采样半径。半径越大效果越自然
intensity: 1,//环境光遮蔽的强度
enable: true
}
},
layers: [{
type: 'blend',
blendTo: 'emission',
texture: contourChart,
intensity: config.intensity
}]
},
series: [{
name: 'lines3D',
type: 'lines3D',
coordinateSystem: 'globe',
effect: {
show: true,
period: 2,
trailWidth: 3,
trailLength: 0.5,
trailOpacity: 1,
trailColor: '#0087f4'
},
blendMode: 'lighter',
lineStyle: {
width: 1,
color: '#0087f4',
opacity: 0.2
},
data: [],
// data: [{
// from: 'A',
// to: 'B',
// coords: [
// [-83.69501541554166, -75.76453333240994],
// [105.18, 37.51]
// ],
// value:"2013.48"
// }, {
// from: 'A',
// to: 'C',
// coords: [
// [118.377173, 31.337123],
// [105.18, 37.51]
// ],
// value:"2013.48"
// }],
silent: false
},{ //点
name: '景区',
// type: 'effectScatter',
// coordinateSystem: 'bmap',
type: 'scatter3D',
blendMode: 'lighter',
coordinateSystem: 'globe',
showEffectOn: 'render',
zlevel: 2,
effectType:"ripple",
symbolSize: 15,
rippleEffect: {
period: 4,
scale: 4,
brushType: 'fill'
},
// showEffectOn: 'hover',
hoverAnimation: true,
label: {
normal: {
show: true,
position: 'right',
// formatter: '{b}',
formatter:function(params){
if(params.dataIndex == 1){
return '中国-无锡'
}else if(params.dataIndex == 2){
return '韩国'
}else if(params.dataIndex == 3){
return '印度'
}else if(params.dataIndex == 4){
return '日本'
}else if(params.dataIndex == 5){
return '台湾'
}else if(params.dataIndex == 0){
return '泰国'
}else if(params.dataIndex == 6){
return '缅甸'
}
},
textStyle: {
fontSize: 18,
color: '#f5d909',
fontWeight:'bold',
// backgroundColor:'rgba(255,255,255,0.2)'
backgroundColor:'transparent'
}
}
},
itemStyle: {
normal: {
color: 'rgb(29,183,255)'
}
},
// data: [{
// 'name': 'A',
// 'value': [105.18, 37.51, 1500]
// }, {
// 'name': 'B',
// 'value': [118.393252, 31.15576, 1500]
// }, {
// 'name': 'C',
// 'value': [117.989662, 31.293115, 1500]
// }]
data:[
[102.58, 15.01],
[120.58, 32.01],
[127.38, 35.8],
[80.58, 21.01],
[139.46, 35.42],
[121.68, 24.50],
[95.90, 20.31]
]
}]
}
// 随机数据
option.series[0].data = [
{
coords:[
[102.58, 15.01],
[120.58, 32.01]
],
value: (Math.random() * 3000).toFixed(2)
},
{
coords:[
[123.38, 41.8],
[120.58, 32.01]
],
value: (Math.random() * 3000).toFixed(2)
},
{
coords:[
[127.38, 35.8],
[120.58, 32.01]
],
value: (Math.random() * 3000).toFixed(2)
},
{
coords:[
[139.46, 35.42],
[120.58, 32.01]
],
value: (Math.random() * 3000).toFixed(2)
},
{
coords:[
[121.68, 24.50],
[120.58, 32.01]
],
value: (Math.random() * 3000).toFixed(2)
},
{
coords:[
[102.90, 25.31],
[120.58, 32.01]
],
value: (Math.random() * 3000).toFixed(2)
}
]
for (let i = 0; i < 10; i++) {
option.series[0].data = option.series[0].data.concat(rodamData())
}
function rodamData() {
let name = '随机点' + Math.random().toFixed(5) * 100000
// let longitude = Math.random() * 62 + 73
let longitude = 118.58
let longitude2 = Math.random() * 360 - 180
// let latitude = Math.random() * 50 + 3.52
let latitude = 32.01
let latitude2 = Math.random() * 180 - 90
return {
coords: [
[longitude2, latitude2],
[longitude, latitude]
],
value: (Math.random() * 3000).toFixed(2)
}
}
myChart.setOption(option)
//点击事件,根据点击某个省份计算出这个省份的数据
myChart.on('click', function (params) {
console.log(params);
//逻辑控制
alert(params);
});
}
})
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('pleftbox2bott_cont'));
option = {
color:['#7ecef4'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:45,
right:20,
top:25,
bottom:0,
containLabel: true
},
xAxis: {
type: 'value',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,0)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,0)'
}
},
axisLabel:{
color:"rgba(255,255,255,0)"
},
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.5)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.5)"
},
data: ['缅甸','印度','日本','泰国','中国']
},
series: [
{
name: '',
type: 'bar',
barWidth :20,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1, 0, 0, 1,
[
{offset: 0, color: 'rgba(230,253,139,.7)'},
{offset: 1, color: 'rgba(41,220,205,.7)'}
]
)
}
},
data: [18203, 23489, 29034, 104970, 131744]
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('pleftbox2bott_cont2'));
option = {
color:['#7ecef4'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:45,
right:20,
top:17,
bottom:10,
containLabel: true
},
xAxis: {
type: 'value',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,0)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,0)'
}
},
axisLabel:{
color:"rgba(255,255,255,0)"
},
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.5)'
}
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)'
}
},
axisLabel:{
color:"rgba(255,255,255,.5)"
},
data: ['无锡','上海','杭州','苏州','南京']
},
series: [
{
name: '',
type: 'bar',
barWidth :20,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
1, 0, 0, 1,
[
{offset: 0, color: 'rgba(230,253,139,.7)'},
{offset: 1, color: 'rgba(41,220,205,.7)'}
]
)
}
},
data: [18203, 23489, 29034, 104970, 131744]
}
]
};
myChart.setOption(option);
</script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('aleftboxtmidd'));
option = {
color:['#d2d17c','#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8','#f8e19a', '#00b7ee', '#81dabe','#5fc5ce'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left:60,
right:60,
top:20,
bottom:0,
containLabel: true
},
legend: {
left: 10,
top: 5,
textStyle:{
fontSize:10,
color:'rgba(255,255,255,.6)'
},
data: ['电量不足','位置偏移','振动异常','电路异常','设备离线']
},
calculable : true,
series : [
{
name:'面积模式',
type:'pie',
radius : [20, 70],
center : ['50%', '55%'],
roseType : 'area',
data:[
{value:187650, name:'电量不足'},
{value:145896, name:'位置偏移'},
{value:148920, name:'振动异常'},
{value:148920, name:'电路异常'},
{value:148920, name:'设备离线'},
]
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
