数据可视化系统课程作业基于vue+echarts自己写一个数据可视化大屏项目源码.zip

## 一、项目描述 基于vue+echarts+DataV,自己写了一个数据可视化大屏 友情链接： 1. [Vue 官方文档](https://cn.vuejs.org/v2/guide/instance.html) 2. [DataV 官方文档](http://datav.jiaminghi.com/guide/) 3. [echarts 实例](https://echarts.apache.org/examples/zh/index.html)，[echarts API 文档](https://echarts.apache.org/zh/api.html#echarts) 项目展示 ![项目展示]  ## 二、主要文件介绍 | 文件 | 作用/功能 | | ------------------- | --------------------------------------------------------------------- | | main.js | 主目录文件，引入 Echart/DataV 等文件 | | utils | 工具函数与 mixins 函数等 | | views/ index.vue | 项目主结构 | | views/其余文件 | 界面各个区域组件（按照位置来命名） | | assets | 静态资源目录，放置 logo 与背景图片 | | assets / scss | 通用 CSS 文件，全局项目快捷样式调节 | | components/echarts | 都是组件页面 | | echarts/centerMap.vue | 是普通分线地图 | | echarts/chinaMap3D.vue | 是3D分线地图 | ## 三、使用介绍 ### 启动项目 需要提前安装好 `nodejs` 与 `npm`,下载项目后在项目主目录下运行 `npm/cnpm install` 拉取依赖包。安装完依赖包之后然后使用 `vue-cli` 或者直接使用命令`npm run serve`，就可以启动项目，启动项目后需要手动全屏（按 F11）。如果编译项目的时候提示没有 DataV 框架的依赖，输入 `npm install @jiaminghi/data-view` 或者 `yarn add @jiaminghi/data-view` 进行手动安装。 ### 更换边框 边框是使用了 DataV 自带的组件，只需要去 views 目录下去寻找对应的位置去查找并替换就可以，具体的种类请去 DavaV 官网查看 如： ```html <dv-border-box-1></dv-border-box-1> <dv-border-box-2></dv-border-box-2> <dv-border-box-3></dv-border-box-3> ``` ### Mixins 解决自适应适配功能 使用 mixins 注入解决了界面大小变动图表自适应适配的功能，函数在 `utils/drawMixin.js` 中，应用在 `views/home/Rural-whole.vue` 的页面中 ## 其余 这个项目是个人的作品，难免会有问题和 BUG，自己也在前端学习的路上，欢迎交流，非常感谢！