<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title>3D图表展示</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body class="bg05">
<header class="header">
<h3>3D图表展示</h3>
</header>
<div class="wrapper">
<div class="container-fluid">
<div class="row fill-h">
<div class="col-lg-7 fill-h">
<div class="xpanel-wrapper xpanel-wrapper-1">
<div class="xpanel no-bg">
<div class="fill-h" id="bar3D"></div>
</div>
</div>
</div>
<div class="col-lg-5 fill-h">
<div class="xpanel-wrapper xpanel-wrapper-2-3">
<div class="xpanel">
<div class="fill-h" id="globe3D"></div>
</div>
</div>
<div class="xpanel-wrapper xpanel-wrapper-1-3">
<div class="xpanel">
<div class="fill-h" id="bar2D"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript" src="js/echarts-gl.min.js"></script>
<script type="text/javascript">
$(function() {
const bar3D = echarts.init(document.getElementById("bar3D"));
const hours = ['0点', '1点', '2点', '3点', '4点', '5点', '6点',
'7点', '8点', '9点','10点','11点', '12点',
'13点', '14点', '15点', '16点', '17点', '18点',
'19点', '20点', '21点', '22点', '23点'];
const days = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
const data = [
[0,0,5], [0,1,1], [0,2,0], [0,3,0],
[0,4,0], [0,5,0], [0,6,0], [0,7,0],
[0,8,0], [0,9,0], [0,10,0], [0,11,2],
[0,12,4], [0,13,1], [0,14,1], [0,15,3],
[0,16,4], [0,17,6], [0,18,4], [0,19,4],
[0,20,3], [0,21,3], [0,22,2], [0,23,5],
[1,0,7], [1,1,0], [1,2,0], [1,3,0],
[1,4,0], [1,5,0], [1,6,0], [1,7,0],
[1,8,0], [1,9,0], [1,10,5], [1,11,2],
[1,12,2], [1,13,6], [1,14,9], [1,15,11],
[1,16,6], [1,17,7], [1,18,8], [1,19,12],
[1,20,5], [1,21,5], [1,22,7], [1,23,2],
[2,0,1], [2,1,1], [2,2,0], [2,3,0],
[2,4,0], [2,5,0], [2,6,0], [2,7,0],
[2,8,0], [2,9,0], [2,10,3], [2,11,2],
[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];
const barOpt = {
tooltip: {
formatter: function(params) {
let series = params.seriesName;
let val = params.value;
return series + '<br/>' +
days[val[1]] + '<br/>' +
hours[val[0]] +'<br/>值：' + val[2];
}
},
visualMap: {
max: 15,
min: 1,
calculable: true,
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
},
textStyle: {
color: '#fff'
}
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
viewControl: {
distance: 220,
autoRotate: false
},
light: {
main: {
intensity: 1.2,
shadow: true
},
ambient: {
intensity: 0.3
}
},
axisLabel: {
textStyle: {
color: '#fff'
}
},
axisLine: {
lineStyle: {
color: '#fff',
width: 1
}
},
axisPointer: {
show: false
}
},
xAxis3D: {
type: 'category',
name: '',
data: hours
},
yAxis3D: {
type: 'category',
name: '',
data: days
},
zAxis3D: {
type: 'value',
name: ''
},
series: [{
type: 'bar3D',
name: 'Bar3D',
data: data.map(function (item) {
return {
value: [item[1], item[0], item[2]]
}
}),
shading: 'lambert',
emphasis: {
label: {
textStyle: {
fontSize: 16,
color: '#900'
}
},
itemStyle: {
color: '#900'
}
}
}]
};
bar3D.setOption(barOpt);
const globe3D = echarts.init(document.getElementById("globe3D"));
const globeOpt = {
globe: {
environment: 'img/bg09.jpg',
baseTexture: "img/globe.jpg",
heightTexture: "img/globe.jpg",
displacementScale: 0,
shading: 'realistic',
realisticMaterial: {
roughness: 0.8
},
postEffect: {
enable: true
},
light: {
main: {
intensity: 5,
shadow: true
},
ambientCubemap: {
texture: 'img/pisa.hdr',
diffuseIntensity: 0.1
}
}
}
};
globe3D.setOption(globeOpt);
const bar2D = echarts.init(document.getElementById("bar2D"));
const xData = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
const yData = [''];
const data2 = [[0,0,5],[0,1,11],[0,2,3],[6,3,1],[6,4,2],[6,5,2],[6,6,6]];
const barOpt2 = {
visualMap: {
show: false,
max: 15,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
},
grid3D: {
show: false,
left: 0,
right: 0,
top: 0,
bottom: 0,
boxWidth: 300,
boxDepth: 20,
light: {
main: {
intensity: 1.2,
shadow: true
},
ambient: {
intensity: 0.3
}
},
viewControl:{
alpha: 0,
beta: 0
}
},
xAxis3D: {
type: 'category',
name: '',
data: xData
},
yAxis3D: {
type: 'category',
name: '',
data: yData
},
zAxis3D: {
type: 'value',
name: ''
},
series: [{
type: 'bar3D',
data: data2.map(function (item) {
return {
value: [item[1], item[0], item[2]],
}
}),
shading: 'lambert',
label: {
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
}
}
}
}]
}
bar2D.setOption(barOpt2);
window.onresize = function() {
bar3D.resize();
globe3D.resize();
bar2D.resize();
}
});
</script>
</body>
</html>