Vue3.0+Echarts (可视化界面)
1. 简介
1.1 技术选型
- ECharts:可视化数据绘制
- Vue, Vue Router, VueX
- Webpack
- Axios: 前端向后端请求数据
- WebSocket: 后端向前端推送数据
- Koa2:后台服务器
1.2 ECharts支持的数据格式
- Key-Value数据格式
- 二维表
- TypedArray格式
- 流数据支持
- 流数据的动态渲染
- 增量渲染技术
1.3 ECharts使用步骤
- 引入echarts.js文件
- 准备一个呈现图表的盒子(div)
- 初始化echarts实例对象
- 准备配置项(option)
- 将配置项设置给echarts实例对象(setOption)
2. ECharts图形
2.1 通用配置
irect/22ca4d81259b4ced9e85acfc3257a87d.png)
2.2 柱状图
2.3 折线图
2.4 散点图
2.5 直角坐标系常用配置
2.6 饼图
2.7 地图
2.8 雷达图
2.9 仪表盘
2.10 小结
3. Vue3.2+ECharts5数据可视化
3.1 Vue3项目构建
- 创建Vite3项目
# 安装cnpm <中国版npm>
# 以管理员身份运行terminal, 然后安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm init vite # 创建项目
cd project_name
npm install # 安装依赖
npm run dev # 运行
cnpm i vue-router -S # 安装路由
cnpm i axios -S # 安装axios
cnpm i echarts -S # 安装echarts
cnpm i element-plus --save # 安装element-plus
cnpm i unplugin-vue-components -S # 按需导入的插件
或 npm install unplugin-vue-components