mirror of
https://gitee.com/AiShiYuShiJiePingXing/bigscreen.git
synced 2026-01-21 05:40:35 +08:00
283 lines
9.2 KiB
JavaScript
283 lines
9.2 KiB
JavaScript
<!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() {
|
||
/******************* 3D柱形图 ******************/
|
||
//初始化echarts实例
|
||
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 = [ //[hour, day, val]
|
||
[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);
|
||
|
||
/****************** 3D地球 ********************/
|
||
//初始化echart实例
|
||
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: { //场景主光源设置，在globe设置中就是太阳光
|
||
intensity: 5, //主光源强度
|
||
shadow: true //是否投影
|
||
},
|
||
ambientCubemap: { //使用纹理作为光源的环境光， 会为物体提供漫反射和高光反射
|
||
texture: 'img/pisa.hdr', //环境光贴图
|
||
diffuseIntensity: 0.1 //漫反射强度
|
||
}
|
||
}
|
||
}
|
||
};
|
||
//渲染图表
|
||
globe3D.setOption(globeOpt);
|
||
|
||
/******************* 二维数据的3D展示 ******************/
|
||
//初始化echarts实例
|
||
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> |