在vue3中，如何优雅的使用echarts之实现大屏项目

最新推荐文章于 2024-09-20 08:54:53 发布

小白小白从不日白

最新推荐文章于 2024-09-20 08:54:53 发布

阅读量465

点赞数 6

分类专栏： Vue3 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_43285360/article/details/138766127

版权

Vue3 专栏收录该内容

39 篇文章 4 订阅 ¥15.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在 Vue3 项目中如何高效地使用 Echarts 实现大屏显示，包括封装 Echarts、适配浏览器窗口变化、封装图表组件（如饼图、折线图、柱状图）以及组件中的数据模拟和真实请求。通过封装和优化，使得在大屏项目中可以更方便地管理和更新图表。

摘要由CSDN通过智能技术生成

前置知识

效果图

使用技术

Vue3 + Echarts + Gasp

Gasp：是一个 JavaScript动画库,它支持快速开发高性能的 Web 动画。在本项目中，主要是用于做轨迹运动

所需安装的插件

npm i echarts
npm i countup.js 数字滚动特效
npm i gsap javascript动画库
npm i axios
npm i normalize.css 初始化样式文件 
npm i lodash javascript工具函数库    https://www.lodashjs.com/
npm i sass css预处理工具

适配目标

1920*1080px 设计稿尺寸

目标设备：16:9

前期准备

封装echarts

在大屏中，如果每个图表都去单独写 init 以及进行resize监听机会显得很麻烦，这里我们可以将这些重复的步骤封装成一个hooks&

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小白小白从不日白

关注关注

6
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

订阅专栏

vue3+datav+echarts可视化数据大屏（适配各种尺寸屏幕！）

m0_58002043的博客

03-20

5651

屏幕适配放弃了rem 方案，使用更通用的css3：scale缩放方案，项目的基准尺寸是1920px*1080px，所以支持用比例屏幕 100% 填充，如果非同比例则会自动计算比例居中填充，不足的部分则留白。得适配方案不能试图您的场景，则可以自行修改方案

Vue3 + js-echarts 实现前端大屏可视化

weixin_44832362的博客

07-31

1947

这里介绍一下本人用的两种方案的优缺点方案实现方式优点缺点scale1.通过scale属性，根据屏幕大小，对图表进行整体的等比缩放1.代码量少，适配简单2.一次处理后不需要在各个图表中再去单独适配1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况2.当缩放比例过大时候，字体会有一点点模糊，就一点点3.当缩放比例过大时候，事件热区会偏移。vw vh1.按照设计稿的尺寸，将px按比例计算转为vw和vh1.可以动态计算图表的宽高，字体等，灵活性较高。

1 条评论您还未登录，请先登录后发表或查看评论

vue3后台管理系统之数据大屏适配解决方案

最新发布

m0_70426411的博客

09-20

1439

transform-origin 是 CSS 属性，用于指定元素的变换（比如旋转、缩放、平移等）的原点位置，即元素围绕哪个点进行变换操作。在你提供的样式中，transform-origin 设置为 left top，这意味着元素的变换原点位于元素的左上角。缺点：1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况 2.当缩放比例过大时候，字体会有一点点模糊，就一点点 3.当缩放比例过大时候，事件热区会偏移。通过监听浏览器窗口的大小，来改变scale的比例，从而实现。

Vue3 + Vite + TypeScript + dataV 打造可视化大屏

gladysdrea的博客

03-09

3654

Vue3 + Vite + TypeScript + dataV 打造可视化大屏

基于VUE + Echarts 实现可视化数据大屏智慧校园可视化

HTML网页设计

08-16

6168

🚀 基于 vue、datav、Echart 框架的大数据可视化（大屏展示）源码，基于VUE+Echarts 制作，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由进行更改，可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，.

Vue3 +Echarts5 可视化大屏——屏幕适配

z止于至善的博客

07-11

3459

项目基于Vue3 + Echarts5 开发，屏幕适配是使用scale方案Echarts组件按需引入，减少打包体积地图组件封装（全国&省份地图按需加载）

Vue3 + TS + Vite 项目实战 —— 大屏可视化

技术前端，忠于热爱 @0.活在风浪里

06-12

5908

大屏可视化项目实战

Vue + ECharts大屏可视化

自洽而内求

03-12

7705

大屏可视化构建工具：【阿里云的DataV】、【蚂蚁体验技术部 AntV 数据可视化】、【D3】、【G2】、【Vega】、【Vega-lite】以及常用于项目的【ECharts】

vue3+echarts 电商大屏可视化实战项目-vue3-koa2-echarts.zip

01-31

Vue3 + Echarts 电商大屏可视化实战项目是利用现代前端技术栈实现的数据展示解决方案，主要涉及Vue3、Koa2和Echarts这三个核心组件。这个项目旨在帮助开发者构建一个功能丰富的电商数据监控平台，通过可视化图表实时...

（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）

qq_15041931的博客

05-14

5304

前端的学习，不能仅仅依靠知识点的学习，实战项目的操作可以帮助我们整理知识点以及提高编程能力，更有助于学习和实践，最重要的是提高自己的项目经验，对于找工作而言有着大大的帮助。一个基于Vue前端框架和第三方图表库Echarts构建的可视化大数据平台，通过vue项目构建、指令的灵活运用、组件封装、组件之间通信，使内部图表组件库可实现自由替换和组合。以及一些功能模块的设计及代码实现。 ...

大屏图表，ECharts 从“熟练”到入门

小陈的博客

02-01

451

什么是配置驱动？这其实是很好理解的一个定义：我只需要修改配置，就能让它显示的画面完成更新。在使用Echarts的过程中，最重要的API一定是。// 让图表显示状态A// 让图表更新状态到B对，这就是配置驱动。const categories = ['老包', '老南', '老君']onMounted(() => {// 指定图表的配置项和数据const chart = echarts.init(chartEl.value);

基于vue+echarts 数据可视化大屏展示的方法示例

10-15

主要介绍了基于vue+echarts 数据可视化大屏展示的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

大屏适配解决方案 VUE

m0_51431448的博客

12-03

8237

最近在做一个数据可视化的项目，整个项目全是大屏展示，期间也是遇到很多问题，最令人头疼的就是大屏的适配。我这个项目是要投放到4K超大屏上展示，自然要考虑到分辨率，浏览器缩放，字体（包括图表中的字体）的适配。下面介绍一下适配方案（或许并不是最好的，目前用着还是可以解决，本人菜鸟一个，大佬有更好更优雅的方式评论区请指教）： 1.flex布局布局肯定是选择css3中的flex布局了，尽量多使用百分比，避免使用px单位的使用，相信作为前端工程师（高大上哈哈）的我们在布局这块儿应该都没啥问题，这里就不多说~~..

vue3大屏可视化项目，包含地图，各种图表，全屏适配方案

weixin_63625059的博客

08-04

3044

.始终满屏适配，这种方案一般用在屏幕变化不会特别的大项目，项目基本上不会用在比例非常不协调的大屏，设计图按1920*1080标准电脑屏幕比，所用的屏幕也基本在这个比例左右涉及图表知识点简单，主要有自定义色系，环形图，堆叠柱状图，折线图使用高德地图标点做中间地图

Vue3+vite脚手架搭建系统及可视化大屏

2302_79553009的博客

07-11

3045

Vue3+vite后台管理系统项目概述：通过Vue3+vite脚手架搭建项目，结合Element-Plus、Echarts、Axios、Mock、Vuex完善各功能模块，进行后台管理系统的开发。实训中注重对图表的应用，数据的引入，数据可以mock生成也可以写静态数据各官网地址：Element-PlusEchartsAxiosMockVuexVite进入node.js官网选择版本安装，选择较低版本，比较稳定。同时按WIN+R输入cmd打开命令提示符窗口，输入node -v查看安装的版本，出现版本号即安装成功。

vue3+Echarts+DataV可视化大屏显示

weixin_52625246的博客

06-04

836

vue3+echarts+DataV制作可视化大屏显示

基于vue3、echarts5.0、express、axios技术实现大数据可视化大屏项目

m0_71479134的博客

07-16

6983

中国地图数据可视化以及34个省级行政区地图显示，包括23个省、5个自治区、4个直辖市、2个特别行政区。(均可缩放、动态)。

基于VUE + Echarts 实现可视化数据大屏销售大数据

HTML网页设计

08-16

1630

🚀 基于 vue、datav、Echart 框架的大数据可视化（大屏展示）源码，基于VUE+Echarts 制作，实现大数据可视化。通过 vue 组件实现数据动态刷新渲染，内部图表可自由替换。部分图表使用 DataV 自带组件，可自由进行更改，可以在此基础上重新开发。......

我一人全干！之vue3后台管理中的大屏展示。

wjlhanhan的博客

12-06

1467

大屏，顾名思义，就是放在一个固定的屏幕上看的，即使你不做自适应，放在一个固定的屏幕上看也没啥问题，但是很多做大屏的是为了在PC端看，PC端屏幕又是参差不齐的，所以需要做自适应。好了，一个用transfor缩放的例子就完成了，使用rem的例子以后为大家讲解。使用大屏展示的时候有很多种场景，众多场景都是为了实现大屏自适应。