【资源介绍】
课程设计基于Vue+Echart框智实现的慧城市大屏可视化系统源码+项目说明(含后台管理系统源码).tar
一、项目描述
- 一个基于 Vue、Datav、Echart 框架的 " **智慧城市大屏可视化项目** "，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件，可进行更改，详情请点击下方 DataV 文档。
- 项目需要全屏展示（按 F11）。
- 项目部分区域使用了全局注册方式，增加了打包体积，在实际运用中请使用 **按需引入**。
- 拉取项目之后，建议按照自己的功能区域重命名文件，现以简单的位置进行区分。
- 项目环境：Vue-cli-3.0、DataV-2.7.3、Echarts-4.6.0(如果5.x版本有问题，请切换到4.x版本)、Webpack-4.0、Npm-6.13、Node-v12.16 或者 Node16.x。
- 请拉取 main 分支的代码，其余分支是开发分支。
二、主要文件介绍
| 文件 | 作用/功能 |
| ------------------- | --------------------------------------------------------------------- |
| main.js | 主目录文件，引入 Echart/DataV 等文件 |
| utils | 工具函数与 mixins 函数等 |
| views/ index.vue | 项目主结构 |
| views/其余文件 | 界面各个区域组件（按照位置来命名） |
| assets | 静态资源目录，放置 logo 与背景图片 |
| assets / style.scss | 通用 CSS 文件，全局项目快捷样式调节 |
| assets / index.scss | Index 界面的 CSS 文件 |
| components/echart | 所有 echart 图表（按照位置来命名） |
| common/... | 全局封装的 ECharts 和 flexible 插件代码（适配屏幕尺寸，可定制化修改） |
## 三、使用介绍
### 启动项目
`pnpm install`
`pnpm run serve`
### 封装组件渲染图表
所有的 ECharts 图表都是基于 `common/echart/index.vue` 封装组件创建的，已经对数据和屏幕改动进行了监听，能够动态渲染图表数据和大小。在监听窗口小大的模块，使用了防抖函数来控制更新频率，节约浏览器性能。
项目配置了默认的 ECharts 图表样式，文件地址：`common/echart/theme.json`。
封装的渲染图表组件支持传入以下参数，可根据业务需求自行添加
【备注】
1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。
2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。
3、用途：项目具有较高的学习借鉴价值，也适用于小白学习入门进阶。当然也可作为毕设项目、课程设计、大作业、初期项目立项演示等。
4、如果基础还行，或者热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。
欢迎下载，沟通交流，互相学习，共同进步！
