Vue3.x+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