当前位置：
  1. 首页
  2. vue
  3. 正文
本文介绍: Vue3.0+Echarts （可视化界面）1. 简介2. 安装2.1 下载安装Node.js2.2 全局下载项目脚手架1. 简介2. 安装2.1 下载安装Node.js2.2 全局下载项目脚手架npm install -g @vue/cli

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
显示所有内容
上一篇 Qt添加资源文件
下一篇 C++基础拾遗–看的不多只看一篇

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。