--- theme: condensed-night-purple highlight: a11y-dark --- ## 开发环境 > 编辑器：*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案例）： > > ![Snipaste_2023-07-04_09-45-38.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e11fb3880ab147c0be827de835025963~tplv-k3u1fbpfcp-watermark.image?) ## 依赖安装 > 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` ## 效果展示 ![动画.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c93cfa4e3ea44b829ffd368ffc9a6e75~tplv-k3u1fbpfcp-watermark.image?) ## 静态资源获取 > 阿里云盘：[点击打开](https://www.aliyundrive.com/s/XKqB2ZmLfFx) > 提取码：*r4l5* > > 文件目录预览： > - 根目录（按照我的专栏分类） > > ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3d8ce263e91f45398949079ac4882a24~tplv-k3u1fbpfcp-watermark.image?) > > - 二级目录（按照文章标题分类） > > ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2de1d0740f8e41788432ae1218478f7a~tplv-k3u1fbpfcp-watermark.image?) > > - 三级目录（文章所有静态资源） > > ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9321f8e671bf4a11bba1edd8fa7d7dc5~tplv-k3u1fbpfcp-watermark.image?) > > **随着文章的增加，静态资源占用云盘的容量会越来越大，作者自掏腰包为大家带来便捷的资源和原创文章** > *很荣幸您能找到我的文章，劳烦动动您的小手，点点赞、收藏、关注一下吧！您的支持是我最大的动力* ## 完整代码 ### vue文件 ```js ``` ### main.js文件 ```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文件中的静态资源路径，否则报错** > 作者目录参考： > > ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a801c85c455419d977dd39c6c38f0a3~tplv-k3u1fbpfcp-watermark.image?) > > ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3cb32db1f8904df7b2b12b41b40e8866~tplv-k3u1fbpfcp-watermark.image?) ## 结语 > 如有不懂或者疑问，可私信我，看到必回 > 大屏中所有数据表格、地图展示内容的代码，都是复制*官方示例的代码*，具体内容并未修改，*仅供演示* > 具体使用，请参考官方文档