开发环境
编辑器：VsCode
Vue：2.6.14
Less：4.0.0
DataV（用于构建大屏，数据展示页面即数据可视化）：2.10.0
AntV：
- g2plot（一套简单、易用、并具备一定扩展能力和组合能力的统计图表库）：2.4.31
- l7（地理空间数据可视分析引擎）：2.17.2
- l7polt（基于l7的地理空间可视化图表库）：0.5.5
ThreeJS（实现3D效果的JS库）：0.153.0
作者前言：之前我有出过一期ThreeJS的入门教程，既然写可视化大屏，那就搞炫酷一点，这才加了ThreeJS
灵感来源（来自百度智能云-Sugar BI案例）：
依赖安装
1、DataV：
npm install @jiaminghi/data-view --save
2、AntV g2plot：
npm install @antv/g2plot --save
3、AntV l7 + l7polt：
npm install @antv/l7 @antv/l7plot --save
4、ThreeJS：
npm install three --save
效果展示
静态资源获取
阿里云盘：点击打开
提取码：r4l5文件目录预览：
- 根目录（按照我的专栏分类）
- 二级目录（按照文章标题分类）
- 三级目录（文章所有静态资源）
随着文章的增加，静态资源占用云盘的容量会越来越大，作者自掏腰包为大家带来便捷的资源和原创文章
很荣幸您能找到我的文章，劳烦动动您的小手，点点赞、收藏、关注一下吧！您的支持是我最大的动力
完整代码
vue文件
<template>
<div class="bodys">
<!-- 顶部部分 -->
<div class="topStyle">
<div>2023-07-04 08:12:30</div>
<div>{{ title }}</div>
<div>湖南-长沙 星期二 晴 31-36℃</div>
</div>
<!-- 主体部分 -->
<div class="mainStyle">
<!-- 左边数据表格 -->
<div>
<dv-border-box-1>
<div>各地工厂产量</div>
<div id="container01"></div>
</dv-border-box-1>
<dv-border-box-1>
<div>综合分析统计图</div>
<div id="container02"></div>
</dv-border-box-1>
<dv-border-box-1>
<div>生成车型</div>
<div id="container03"></div>
</dv-border-box-1>
</div>
<!-- 中间部分 -->
<div>
<!-- 地图 -->
<div>
<div id="containerMap" style="width: 100%; height: 100%"></div>
</div>
<!-- 三维跑车模型 -->
<div>
<div id="modelCar"></div>
</div>
</div>
<!-- 右边数据表格 -->
<div>
<dv-border-box-1>
<div>实时销量</div>
<div id="container04"></div>
</dv-border-box-1>
<dv-border-box-1>
<div>车型销量占比</div>
<div id="container05"></div>
</dv-border-box-1>
<dv-border-box-1>
<div>历史销量</div>
<div id="container06"></div>
</dv-border-box-1>
</div>
</div>
</div>
</template>
<script>
import * as g2plot from '@antv/g2plot';
import * as l7plot from '@antv/l7plot';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
export default {
name: 'DemoOne',
data() {
return {
// 页面标题
title: '汽车智能工厂大屏',
// 场景
scene: null,
// 环境光
ambienLight: null,
// 加载的场景
loaderScene: null,
// 渲染器
renderer: null,
// 相机
camera: null
};
},
mounted() {
// 地图加载
this.loadMap();
// 跑车模型加载
this.init();
// 数据表格加载
setTimeout(() => {
this.loadContainer01();
this.loadContainer02();
this.loadContainer03();
this.loadContainer04();
this.loadContainer05();
this.loadContainer06();
}, 500);
},
methods: {
clearScene() {
if (this.scene) {
this.scene.traverse(function (v) {
if (v.type === 'Mesh') {
v.geometry.dispose();
v.material.dispose();
}
});
while (this.scene.children.length > 0) {
this.scene.remove(this.scene.children[0]);
}
this.renderer.dispose();
this.renderer.forceContextLoss();
this.renderer.domElement = null;
this.renderer = null;
this.scene.clear();
this.scene = null;
this.camera = null;
this.ambienLight = null;
this.loaderScene = null;
}
},
init() {
this.clearScene();
this.scene = new THREE.Scene();
this.ambienLight = new THREE.AmbientLight('#ffffff', 1);
this.scene.add(this.ambienLight);
let loader = new GLTFLoader();
loader.load('/gltf/scene.gltf', (gltf) => {
let boundingBox = new THREE.Box3().setFromObject(gltf.scene);
let boundingBoxCenter = new THREE.Vector3();
boundingBox.getCenter(boundingBoxCenter);
const width = document.getElementById('modelCar').clientWidth;
const height = document.getElementById('modelCar').clientHeight;
this.camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
let sceneSize = new THREE.Vector3();
boundingBox.getSize(sceneSize);
this.sceneMeshHeight = sceneSize.y;
this.sceneMeshWidth = sceneSize.x;
let distance = Math.max(sceneSize.x, sceneSize.y, sceneSize.z) / 2 / Math.tan(((this.camera.fov / 2) * Math.PI) / 180);
this.camera.position.set(distance / 2.5, sceneSize.y, distance / 2.5);
this.camera.lookAt(0, 0, 0);
this.renderer = new THREE.WebGLRenderer({ alpha: true });
this.renderer.setSize(width, height);
document.getElementById('modelCar').appendChild(this.renderer.domElement);
this.renderer.outputEncoding = THREE.sRGBEncoding;
this.control = new OrbitControls(this.camera, this.renderer.domElement);
this.control.zoomSpeed = 0.5;
this.control.enableDamping = true;
this.control.dampingFactor = 0.02;
this.control.minPolarAngle = 0;
this.control.maxPolarAngle = 1.5;
let envMap = new THREE.CubeTextureLoader().load([
'/sky/st/posx.jpg',
'/sky/st/negx.jpg',
'/sky/st/posy.jpg',
'/sky/st/negy.jpg',
'/sky/st/posz.jpg',
'/sky/st/negz.jpg'
]);
gltf.scene.traverse(function (item) {
if (item instanceof THREE.Mesh) {
item.material.envMap = envMap;
item.material.envMapIntensity = 1;
item.material.needsUpdate = true;
}
});
this.scene.add(gltf.scene);
this.loaderScene = gltf.scene;
this.animat();
this.autoCanvas();
});
},
animat() {
if (this.loaderScene != null) {
this.loaderScene.rotateY(0.01);
}
this.renderer.render(this.scene, this.camera);
this.control.update();
requestAnimationFrame(this.animat);
},
autoCanvas() {
let app = this;
window.onresize = function () {
app.renderer.setSize(window.innerWidth, window.innerHeight);
app.camera.aspect = window.innerWidth / window.innerHeight;
app.camera.updateProjectionMatrix();
};
},
loadMap() {
fetch('https://gw.alipayobjects.com/os/alisis/geo-data-v0.1.2/administrative-data/area-list.json')
.then((response) => response.json())
.then((list) => {
const data = list
.filter(({ level }) => level === 'district')
.map((item) => Object.assign({}, item, { value: Math.random() * 5000 }));
new l7plot.Choropleth('containerMap', {
map: {
type: 'map',
center: [120.19382669582967, 30.258134],
zoom: 3,
pitch: 0
},
source: {
data: data,
joinBy: {
sourceField: 'adcode',
geoField: 'adcode'
}
},
viewLevel: {
level: 'province',
adcode: 430000,
granularity: 'district'
},
autoFit: true,
color: {
field: 'value',
value: ['#B8E1FF', '#7DAAFF', '#3D76DD', '#0047A5', '#001D70'],
scale: { type: 'quantize' }
},
style: {
opacity: 1,
stroke: '#ccc',
lineWidth: 0.6,
lineOpacity: 1
},
label: {
visible: true,
field: 'name',
style: {
fill: '#fff',
opacity: 0.8,
fontSize: 10,
stroke: '#000',
strokeWidth: 1.5,
textAllowOverlap: false,
padding: [5, 5]
}
},
state: {
active: { stroke: 'black', lineWidth: 1 }
},
tooltip: {
items: ['name', 'adcode', 'value']
}
});
});
},
loadContainer06() {
fetch('https://gw.alipayobjects.com/os/bmw-prod/b21e7336-0b3e-486c-9070-612ede49284e.json')
.then((res) => res.json())
.then((data) => {
const area = new g2plot.Area('container06', {
data,
xField: 'date',
yField: 'value',
seriesField: 'country',
slider: {
start: 0.1,
end: 0.9,
textStyle: {
fill: '#fff'
}
},
xAxis: {
label: {
style: {
fill: '#fff'
}
}
},
yAxis: {
label: {
style: {
fill: '#fff'
}
}
},
legend: {
itemName: {
style: {
fill: '#fff'
}
}
}
});
area.render();
});
},
loadContainer05() {
const data = [
{ type: '奥迪', value: 27 },
{ type: '宝马', value: 25 },
{ type: '奔驰', value: 18 },
{ type: '五菱', value: 15 },
{ type: '大众', value: 10 },
{ type: '其他', value: 5 }
];
const piePlot = new g2plot.Pie('container05', {
appendPadding: 10,
data,
legend: {
itemName: {
style: {
fill: '#fff'
}
}
},
angleField: 'value',
colorField: 'type',
radius: 0.9,
label: {
type: 'inner',
offset: '-30%',
content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
style: {
fontSize: 14,
textAlign: 'center'
}
},
interactions: [{ type: 'element-active' }, { type: 'element-selected' }]
});
piePlot.render();
// 如果业务中还有单选联动，可以考虑使用按住某个键来区分交互 (或者多选之后，让用户自己去触发查询)
document.addEventListener('keyup', (evt) => {
if (evt.key === 'Shift') {
console.info(evt);
const states = piePlot.getStates();
console.info(states.filter((d) => d.state === 'selected'));
// 获取选中元素
// states.filter(d => d.state === 'selected')
}
});
},
loadContainer04() {
fetch('https://gw.alipayobjects.com/os/antfincdn/mor%26R5yBI9/stack-group-column.json')
.then((data) => data.json())
.then((data) => {
const column = new g2plot.Column('container04', {
data,
xField: 'product_type',
yField: 'order_amt',
isGroup: true,
isStack: true,
seriesField: 'product_sub_type',
groupField: 'sex',
xAxis: {
label: {
style: {
fill: '#fff'
}
}
},
yAxis: {
label: {
style: {
fill: '#fff'
}
}
},
legend: {
itemName: {
style: {
fill: '#fff'
}
}
}
});
column.render();
});
},
loadContainer03() {
fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/antv-keywords.json')
.then((res) => res.json())
.then((data) => {
const wordCloud = new g2plot.WordCloud('container03', {
data,
wordField: 'name',
weightField: 'value',
colorField: 'name',
wordStyle: {
fontFamily: 'Verdana',
fontSize: [8, 32],
rotation: 0
},
random: () => 0.5
});
wordCloud.render();
});
},
loadContainer02() {
const averageData = [
{ date: '2015-02', value: 21168 },
{ date: '2015-08', value: 21781 },
{ date: '2016-01', value: 23818 },
{ date: '2017-02', value: 25316 },
{ date: '2018-01', value: 26698 },
{ date: '2018-08', value: 27890 }
];
const plot = new g2plot.Mix('container02', {
appendPadding: 8,
tooltip: { shared: true },
syncViewPadding: true,
plots: [
{
type: 'column',
options: {
data: [
{ date: '2015-02', value: 160 },
{ date: '2015-08', value: 245 },
{ date: '2016-01', value: 487 },
{ date: '2017-02', value: 500 },
{ date: '2018-01', value: 503 },
{ date: '2018-08', value: 514 }
],
xField: 'date',
yField: 'value',
yAxis: {
type: 'log',
max: 100000,
label: {
style: {
fill: '#fff'
}
}
},
meta: {
date: {
sync: true
},
value: {
alias: '店数(间)'
}
},
label: {
position: 'middle',
style: {
fill: '#fff'
}
}
}
},
{
type: 'line',
options: {
data: averageData,
xField: 'date',
yField: 'value',
xAxis: false,
yAxis: {
type: 'log',
max: 100000,
label: {
style: {
fill: '#fff'
}
}
},
label: {
offsetY: -8,
style: {
fill: '#fff'
}
},
meta: {
value: {
alias: '平均租金(元)'
}
},
color: '#FF6B3B',
annotations: averageData.map((d) => {
return {
type: 'dataMarker',
position: d,
point: {
style: {
stroke: '#FF6B3B',
lineWidth: 1.5
}
}
};
})
}
},
{
type: 'line',
options: {
data: [
{ date: '2015-02', value: null },
{ date: '2015-08', value: 0.029 },
{ date: '2016-01', value: 0.094 },
{ date: '2017-02', value: 0.148 },
{ date: '2018-01', value: 0.055 },
{ date: '2018-08', value: 0.045 }
],
xField: 'date',
yField: 'value',
xAxis: {
label: {
style: {
fill: '#fff'
}
}
},
yAxis: {
line: null,
grid: null,
position: 'right',
max: 0.16,
tickCount: 8,
label: {
style: {
fill: '#fff'
}
}
},
meta: {
date: {
sync: 'date'
},
value: {
alias: '递增',
formatter: (v) => `${(v * 100).toFixed(1)}%`
}
},
smooth: true,
label: {
callback: (value) => {
return {
offsetY: value === 0.148 ? 36 : value === 0.055 ? 0 : 20,
style: {
fill: '#1AAF8B',
fontWeight: 700,
stroke: '#fff',
lineWidth: 1
}
};
}
},
color: '#1AAF8B'
}
}
]
});
plot.render();
},
loadContainer01() {
fetch('https://gw.alipayobjects.com/os/antfincdn/PC3daFYjNw/column-data.json')
.then((data) => data.json())
.then((data) => {
const column = new g2plot.Column('container01', {
data,
xField: 'city',
yField: 'value',
seriesField: 'type',
isGroup: 'true',
columnStyle: {
radius: [20, 20, 0, 0]
},
xAxis: {
label: {
style: {
fill: '#fff'
}
}
},
yAxis: {
label: {
style: {
fill: '#fff'
}
}
},
legend: {
itemName: {
style: {
fill: '#fff'
}
}
}
});
column.render();
});
}
}
};
</script>
<style lang="less" scoped>
.mainStyle {
color: #ffffff;
margin: 2% 5%;
height: 85%;
display: flex;
> div:nth-child(1),
div:nth-child(3) {
width: 25%;
> div {
width: 100%;
height: 30%;
margin: 4% 0;
> div {
> div {
display: flex;
justify-content: center;
width: 94%;
margin: 0 3%;
}
> div:nth-child(1) {
padding-top: 2%;
font-size: 20px;
font-family: 'FZY4JW';
color: #35f3fd;
}
> div:nth-child(2) {
height: 79%;
}
}
}
}
> div:nth-child(2) {
width: 50%;
> div {
padding: 0 2%;
}
> div:nth-child(1) {
margin-top: 1%;
height: 58%;
> div > div {
position: absolute;
top: 2.5%;
height: 95% !important;
}
}
> div:nth-child(2) {
margin-top: 1%;
height: 35%;
> div {
width: 100%;
height: 100%;
}
}
}
}
.topStyle {
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
margin: 1.6% 6% 0 6%;
font-size: 18px;
> div:nth-child(2) {
font-size: 32px;
font-family: 'FZZiYHJW';
letter-spacing: 3px;
margin-left: 4%;
}
}
.bodys {
overflow: hidden;
width: 100vw;
height: 100vh;
background-image: url('@/assets/background.png');
background-size: 100% 100%;
}
@font-face {
font-family: 'FZZiYHJW';
src: url('@/assets/font/FZZiYHJW.TTF');
}
@font-face {
font-family: 'FZY4JW';
src: url('@/assets/font/FZY4JW.TTF');
}
</style>
main.js文件
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
// DataV依赖
import dataV from '@jiaminghi/data-view';
// 全局使用DataV
Vue.use(dataV);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App)
}).$mount('#app');
静态资源目录问题
如果你的静态资源存放目录与我的不同，记得要修改vue文件中的静态资源路径，否则报错
作者目录参考：
结语
如有不懂或者疑问，可私信我，看到必回
大屏中所有数据表格、地图展示内容的代码，都是复制官方示例的代码，具体内容并未修改，仅供演示
具体使用，请参考官方文档
