大家好我是仁杰，今天给大家分享一款可视化系统，基于vue3.0和echarts实现，使用最前沿的技术栈，包括各种可视化图表。

描述

项目大部分数据采用Mock.js进行模拟，axios请求数据。最大还原了请求后台接口数据，由于element-ui还未支持vue3.0，所以该项目的大部分组件都是使用手写。

预览

部署

系统功能

- 柱状图
- 饼图
- 词云图
- 漏斗图
- 水球图
- 折线图
- 仪表盘
- 雷达图
- 矩形树图
- 关系图
- 地图  --- 分布图
- 地图  --- 散点图
- 地图  --- 热力图

使用说明

- 首页时间自动轮播，每次时间切换都会调接口，所有的图数据都会刷新
- 首页点击时间轴切换时间
- 首页点击地图可以下钻到县  周围数据都会变，显示对应市县的
- 首页下钻后点击中间空白处或者左上角可以回到对应市县
- 点击两边的echarts图可以进去详情页
- 最右边的关系图点击可以下钻
- 点击地图右上角的图标可以切换地图类型

项目目录

├── mock                             ---mock模拟数据
├── public                           ---静态资源文件
├── src          
│  ├── api                           ---接口     
│  ├── assets                        ---图片和字体
│  ├── componentApi                  ---可复用的vue方法
│  ├── components                    ---可复用的vue组件
│  ├── layouts                       ---布局方式
│  ├── router                        ---路由
│  ├── store                         ---vuex
│  ├── styles                        ---sass样式
│  ├── utils                         ---方法函数
│  ├── views                         ---页面
│  ├── App.vue                       
│  ├── main.js                       
├── tests                            ---单元测试文件
├── UI                               ---自定义UI组件库
├── .browserslistrc
├── .env.development
├── .env.production
├── .eslintrc.js
├──  babel.config.js
├── .jest.config.js                  ---jest的配置
├──  package.json
├──  package-lock.json
├──  README.md
└──  vue.config.js                   ---webpack的配置

项目安装

# 克隆项目
git clone https://github.com/biubiubiu01/vue3-bigData.git
# 进入项目目录
cd vue3-bigData
# 安装依赖
npm i
# 本地开发 启动项目
npm run serve

项目部署

# 打包项目
npm run build
# 单元测试
npm run test

总结

系统采用最新的技术栈vue，以组件化的来设计各种可视化图表。系统基于vue3.0和echarts实现。同时也需要了解vue3.0的新特性和API方法后，才开始数据项目和上手项目。