Vue3.x+Echarts (可视化界面)

Vue3.0+Echarts (可视化界面)

  • 1. 简介
    • 1.1 技术选型
    • 1.2 ECharts支持的数据格式
    • 1.3 ECharts使用步骤
  • 2. ECharts图形
    • 2.1 通用配置
    • 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项目构建

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.orgnpm 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/608405.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RecombiMAb anti-mouse VEGFR-2

DC101-CP132单克隆抗体是原始DC101单克隆的重组嵌合型抗体。可变结构域序列与原始DC101相同&#xff0c;但是恒定区序列已经从大鼠IgG1变为小鼠IgG2a。DC101-CP132单克隆抗体像原始大鼠IgG1抗体一样&#xff0c;不包含Fc突变。 DC101-CP132单克隆抗体能与小鼠VEGFR-2(血管内皮生…

docker容器内,将django项目数据库改为postgresql

容器为ubuntu20.04版本&#xff0c;新建了一套django项目&#xff0c;使用的默认sqllit3&#xff0c;换为postgresql&#xff0c;容器里安装postgresql方法 步骤1: 安装PostgreSQL数据库 # 打开一个bash会话在你的容器中 docker exec -it <container_id_or_name> bash#…

ZGC垃圾收集器介绍

ZGC&#xff08;The Z Garbage Collector&#xff09;是JDK 11中推出的一款低延迟垃圾回收器&#xff0c;它的设计目标包括&#xff1a; 停顿时间不超过10ms&#xff1b;停顿时间不会随着堆的大小&#xff0c;或者活跃对象的大小而增加&#xff1b;支持8MB~4TB级别的堆&#x…

【开题报告】基于JavaWeb的母婴用品在线商城的设计与实现

1.选题背景 随着社会经济的发展和人们生活水平的提高&#xff0c;母婴用品市场逐渐壮大。同时&#xff0c;互联网的普及和电子商务的兴起使得线上购物成为了人们方便快捷的购物方式之一。传统的实体母婴用品店面受到了线上商城的冲击&#xff0c;因此建立一个方便、快捷的在线…

微信小程序 获取地址信息(uniapp)

参考API地址&#xff1a;微信小程序JavaScript SDK | 腾讯位置服务 <script> // 引入SDK核心类&#xff0c;js文件根据自己业务&#xff0c;位置可自行放置var QQMapWX require(../../js/uploadImg/qqmap-wx-jssdk.js);export default {data(){return{qqmapsdk:}},onL…

【HarmonyOS4.0】第四篇-ArkUI基础实战

一、ArkUI框架简介 ArkUI开发框架是方舟开发框架的简称&#xff0c;它是一套构建 HarmonyOS / OpenHarmony 应用界面的声明式UI开发框架&#xff0c;它使用极简的UI信息语法、丰富的UI组件以及实时界面语言工具&#xff0c;帮助开发者提升应用界面开发效率 30%&#xff0c;开发…

Swift单元测试Quick+Nimble

文章目录 使用QuickNimble1、苹果官方测试框架XCTest的优缺点2、选择QuickNimble的原因&#xff1a;3、QuickNimble使用介绍集成&#xff1a;Quick关键字说明&#xff1a;Nimble中的匹配函数等值判断&#xff1a;使用equal函数是否是同一个对象&#xff1a;使用beIdenticalTo函…

Android14之刷机模式总结(一百七十八)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

电脑文件mfc100u.dll丢失的解决方法分析,怎么修复mfc100u.dll靠谱

mfc100u.dll丢失了要怎么办&#xff1f;其实很多人都遇到过这样的电脑故障吧&#xff0c;说这个mfc100u.dll文件已经不见了&#xff0c;然后一些程序打不开了&#xff0c;那么这种情况我们要怎么解决呢&#xff1f;今天我们就来给大家详细的说说mfc100u.dll丢失的解决方法。 一…

#Css篇:flex布局的总结

注意&#xff0c;设为flex布局以后&#xff0c;子元素的float、clear、vertical-align属性将失效。 概念 采用flex布局的元素&#xff0c;简称“容器”。内部的子元素&#xff0c;简称“项目”。 容器存在两根轴&#xff0c;水平主轴main axis,开始叫 main start;结束叫 main…

【unity小技巧】实现没有动画的FPS武器摇摆和摆动效果

文章目录 前言开始完结 前言 添加程序摇摆和摆动是为任何FPS游戏添加一些细节的非常简单的方法。但是并不是所以的模型动画都会配有武器摆动动画效果&#xff0c;在本文中&#xff0c;将实现如何使用一些简单的代码实现武器摇摆和摆动效果&#xff0c;这比设置动画来尝试实现类…

Golang中for和for range语句的使用技巧、对比及常见的避坑

前言 基础语法不再赘述&#xff0c;写这个原因是之前的某次面试被问道了&#xff0c;我知道会导致问题但具体答下来不是很通顺。再回想自己开发过程中&#xff0c;很多地方都是使用到了for/for range&#xff0c;但是却从没注意过一些细节&#xff0c;因此专门学习一下进行记录…

【C++20】编译期检测所有未定义行为undefined behavior和内存泄漏(不借助编译选项以及任何外部工具)

文章目录 一、未定义行为Undefined Behavior(UB)1.返回一个未初始化的局部变量的值2.数组越界访问3.有符号数的常量表达式溢出4.new与delete5.vector6.空指针解引用 参考 一、未定义行为Undefined Behavior(UB) 在C中&#xff0c;未定义行为&#xff08;Undefined Behavior&am…

Angular中的NgZone.run()有什么用?

在Angular中&#xff0c;NgZone是一个服务&#xff0c;用于管理异步任务的执行&#xff0c;并提供一种在Angular区域内或外部显式运行代码的方式。区域&#xff08;Zone&#xff09;的概念用于跟踪和拦截异步操作&#xff0c;例如Promises、事件和定时器&#xff0c;以便在需要…

K8S中SC、PV、PVC的理解

存储类&#xff08;StorageClass&#xff09;定义了持久卷声明&#xff08;PersistentVolumeClaim&#xff09;所需的属性和行为&#xff0c;而持久卷&#xff08;PersistentVolume&#xff09;是实际的存储资源&#xff0c;持久卷声明&#xff08;PersistentVolumeClaim&#…

平衡搜索二叉树(AVL树)

前言 二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将退化为单支树&#xff0c;查 找元素相当于在顺序表中搜索元素&#xff0c;效率低下。因此&#xff0c;两位俄罗斯的数学家G.M.Adelson-Velskii 和E.M.Landis在1962年 发明了一种解决上述…

代码随想录算法训练营第三十天(回溯算法篇)|491. 非递减子序列, 46. 全排列,47. 全排列Ⅱ

491. 非递减子序列 题目链接&#xff1a;491. 非递减子序列 - 力扣&#xff08;LeetCode&#xff09; 思路 1. 判断是否将当前遍历到的元素添加到path中。 如果当前元素大于等于前一个元素&#xff0c;满足条件&#xff0c;但前提是当前的i>0&#xff0c;可若加上i>0…

vue中鼠标拖动触发滚动条的移动

前言 在做后端管理系统中&#xff0c;像弹窗或大的表单时&#xff0c;经常会有滚动条的出现&#xff0c;但有些时候如流程、图片等操作时&#xff0c;仅仅使用鼠标拖动滚动条操作不太方便&#xff0c;如果使用鼠标拖拽图片或容器来触发滚动条的移动就比较方便了 功能设计 如…

5分钟带你了解RESTful

RESTful API是一种基于HTTP协议的API设计风格&#xff0c;它以资源为核心&#xff0c;通过URL来访问和操作资源的状态。RESTful API遵循一些约定俗称的规则&#xff0c;包括使用HTTP动词&#xff08;GET、POST、PUT、DELETE等&#xff09;来操作资源&#xff0c;使用HTTP状态码…