vue项目在同一页面中引入多个echarts图表 ，并实现封装，自适应和动态数据改变

最新推荐文章于 2025-03-19 14:28:07 发布
最新推荐文章于 2025-03-19 14:28:07 发布
阅读量6.1w 收藏 225
点赞数 30
分类专栏： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33300789/article/details/79729675
版权

vue-Echarts

公司最近做项目需要用到图表，以前是使用echarts,现在也是用这个，没什么好纠结的！ 但是最近发现以前每次做图表之类的都没有封装，每次做图表都要从新去配置之类的，写了好多重复代码，感觉很累啊，所以自己把图表封装成子组件使用，代码工作量减轻了很多，而且子组件使用了数据进行监听和图表自适应屏幕大小，这样以后会方便很多了！

当然公司的项目肯定不能发出来了，我会做个简单的demo出来

先截个图吧！


其实我也未作什么太复杂的工作，以前工作中，页面中要2个图表，我在methods:{}中写两个方法配置之类的，类似这样子：


好了，首先第一步，使用echarts当然要引用了  

1. vue  项目中   引用echarts  

   cnpm install echarts -S

执行完毕后再 main.js中引入


因为是pc端的项目，用了element  ui （不重要）,引入之后就可以在全局使用了，之前对这个不是很懂，每个要图表页面都引入echarts，就像这个样子：


使代码写的乱七八糟的,现在在全局引用了，就不需要在每个用图表的页面中引入了

2.  父子组件中使用图表，现在我做的这个页面把他分成两个部分，这个页面整体为父，两个图表为子组件，这样子


1.先看下父组件代码，样式类的请忽视

最低0.47元/天 解锁文章
echarts实现一个页面同时显示多个图表
weixin_38981413的博客
12-27 10万+
一个JSON数据，通过echarts实现一个页面同时显示多个图表，我这是通过写一个option实现多个图表（折线图，饼图，关系图）展示，也就是说只要一个div（dom对象），实现多个不同形状的图表展示。总体采用了LayUI（表格）+eCharts技术，通过在html页面，引入自定义的js，实现预期页面效果。 自己在网上找了下，没有找到对应的文章，直接来说怎么实现，所以特意写了此文章，共同学习。总结技巧：1.先用最少的代码显示出图 2.【关键点】自己能控制每个图在指定的地方的显示 3.确定每个图位置，整体布
多个Echarts图表自动自适应（无需手动刷新）
qq_58800537的博客
09-05 411
【代码】多个Echarts图表自动自适应（无需手动刷新）
Vue在一个页面中使用多个Echarts表格
weixin_51442367的博客
05-18 4404
1.首先echarts使用之前必须有完整的DOM结构，所以可以放在mounted中使用 使用步骤： 1） mounted() { this.echarts1() this.echarts2(this.imageData) }, 2）在methods中配置这两个表格 echarts1(){ var myChart = echarts.init(document.getElementById('main')); var option = {}//样式可
在 Vue 项目中使用 ECharts
最新发布
Binoculus的博客
03-19 1388
【代码】在 Vue 项目中使用 ECharts。
Vue2+Echarts实现多种图表数据可视化Dashboard详解（附源码）
weixin_34392843的博客
02-14 4952
2019独角兽企业重金招聘Python工程师标准>>> ...
vue使用echarts——一个页面多个echarts
wang1811539550的博客
08-18 1590
直接用id获取元素是获取不到的，必须在onMounted生命周期内获取，但是用这种方法切换路由再返回后会警告dom已经初始化echarts，需要用vue获取dom元素的方法ref，但是初始化还是要放在onMounted生命周期内。
Vue环境下，在单页面中遍历显示出多个Echarts图表，2024年最新给Web前端程序员的一些面试建议
2401_83974020的博客
04-10 1086
value: [66, 90, 45, 12, 70]//数据（x轴的大小）},methods: {// 方法：绘制柱状图//获取类名//此处for循环多次初始化 echarts 实例i++) {//初始化echarts实例要在for循环内all: 100,charts: {title: {subtext: '总计 ’ + builderJson.all,top: ‘50’,},grid: {// 水平垂直居中top: 140,// grid 区域不包含坐标轴的刻度标签。
Vue环境下，在单页面中遍历显示出多个Echarts图表，细谈分布式事务的前世今生
2401_84138968的博客
04-16 424
注意图表被遍历时，不能再用id，而是应该用class。自定义宽高的dom，用于放置图表。自定义宽高的dom，用于放置图表。v-for 遍历父级div。
完美解决vue 中多个echarts图表自适应的问题
12-28
看代码吧~ <div class=echarts> 　<IEcharts option=bar ref=echarts>... //echarts自适应 selfAdaption () { const self = this； setTimeout(() => { [removed] = function () { self.$refs.echarts.resize()
vue后台项目中如何使用echarts图表并实现自适应屏幕缩放，亲测~
JCat的博客
05-07 5358
前言 在后台项目中，图表特别常见，在使用echarts作图的时候肯定会有自适应的问题，这里我向大家介绍一下，我使用的方法，基于vue 和element 的。其他框架同理。 正文 配置 npm 导入eachart，并在main.js配置。把echarts挂载在 prototype上方便页面调用 import echarts from 'echarts' Vue.prototype.$echart...
Vue + echarts【一个页面中引入多个表】
qq_51453356的博客
05-06 8851
vue + echarts
web单页面实现多个echarts图表铺满整个div(柱状图，折线图，饼形图……)
05-19
最近针对web端实现单页面展示多个echarts图表，更直观的展示数据的变化，响应式
Vue 渲染多个Echarts图表
倚树探星的博客
04-29 7827
一、实现目标 需要在一个整屏切换的页面上显示多个Echarts图表，随屏幕切换显示不同的Echarts图表 二、实现方法 这个目标看起来并不难，实现方法也有多种，目前想到的方法有以下： 方法一、父子组件（动态加载） 实现思路：图表数据请求单独封装在一个组件中（作为子组件），并在该子组件中通过监听flag值（屏幕切换标志）变化来实现图表数据更新 注意问题：Echarts图表需要挂载在DOM节点上，要...
vue项目在同一页面中引入多个echarts图表 ，并实现封装，自适应和动态数据改变（代码粘贴）
wangliuqi123的博客
05-10 8343
原文地址：https://blog.youkuaiyun.com/qq_33300789/article/details/79729675#commentBox 原文为图片，等等，这里方便各位搬砖，特地，转为代码；详细讲解请访问上面的原文地址查看 父页面：（根据自己项目的具体位置引入子组件：） <template> <div> <linegraph :...
Vue环境下，在单页面中遍历显示出多个Echarts图表
热门推荐
商务合作 | 共同学习 | 携手共进
12-02 10万+
在开发的过程中我们常常会用到 Echarts 图表，而有时候一个页面当中会有多处都使用到相同的一个图表只是数据有所差别；这个时候如果我们去一个个重新创建 dom、重新渲染，那就太麻烦了，代码量多不说还不便于修改。 最好的方法就是借助Vue框架的便捷性，通过 v-for 来将一个已经创建好的图表进行遍历，显示出多个图表，随后动态修改数据。 本文以横向柱状图为例。 Apache ECharts 的安装与引入此处省略，详情参见Handbook - Apach...
Vue环境下，在单页面中遍历显示出多个Echarts图表(2)，已开源
2401_84097678的博客
04-04 227
自定义宽高的dom，用于放置图表。v-for 遍历父级div。
Vue环境下，在单页面中遍历显示出多个Echarts图表(2)
2401_84150191的博客
04-20 152
自定义宽高的dom，用于放置图表。v-for 遍历父级div。
vue封装的echarts组件被同一个页面多次引用无法正常显示问题（已解决）
蓝胖子的博客
11-15 4362
vue封装的echarts组件被同一个页面多次引用无法正常显示问题（已解决）
vue3一个页面引入多个echarts 自适应失灵
07-23
### 回答1： 在Vue3中，当一个页面引入多个echarts时，由于每个echart实例都具有自己的Dom元素，并且每个实例都需要根据父容器的大小进行自适应，可能会出现自适应失灵的问题。 为了解决这个问题，可以采取以下几个步骤： 1.确保每个echart实例的Dom元素都有唯一的id，在页面的template中设置不同的id。 2.在Vue3中，可以通过使用refs来获取echart实例，然后对每个实例进行相应的操作。 3.在生命周期的mounted钩子函数中，对每个echart实例进行初始化，并设置其自适应。可以使用window的resize事件监听父容器的大小变化，然后调用echart实例的resize方法。 4.在数据更新后，可以通过watch来监听数据的改变，并调用相应的echart实例的setOption方法进行更新。 综上所述，通过以上步骤，可以使得多个echarts实例在同一个页面中进行自适应，并且随着父容器的大小变化而更新。这样就可以解决多个echarts实例自适应失灵的问题。 ### 回答2： 当一个页面引入了多个echarts图表时，使用Vue3进行自适应可能会导致失灵的情况发生。这是因为Vue3中的组件渲染和数据响应机制发生了变化，可能会导致echarts图表无法正确地根据父容器的大小进行自适应。 要解决这个问题，我们可以采取以下步骤： 1. 在Vue3中，使用`nextTick`方法来确保DOM已经完全渲染后再进行echarts图表的初始化。在组件的`mounted`钩子函数中，使用`nextTick`来确保初始化的echarts图表能够正确获取父容器的大小。 2. 在需要自适应的echarts图表中，使用`window.onresize`事件来监听窗口大小的变化，并在事件回调函数中重新绘制图表。这样可以确保图表能够根据父容器的大小进行自适应。 3. 如果有多个echarts图表需要进行自适应，可以为每个图表添加一个专属的`resize`事件，并在事件回调函数中根据当前图表的父容器大小重新绘制图表。 总结来说，要解决Vue3中多个echarts图表自适应失灵的问题，我们需要确保图表的初始化在DOM渲染完成后进行，并通过监听窗口大小变化的事件来实现图表的自适应。这样可以确保多个图表能够正确地根据父容器的大小进行自适应。 ### 回答3： 在Vue3中，当一个页面引入多个echarts图表并且要实现自适应的时候，可能会出现自适应失灵的情况。这是因为echarts图表默认是根据其容器的大小来自适应的，而在Vue3中，由于组件的加载顺序以及页面的渲染顺序可能存在差异，导致echarts在计算容器大小时获取到的是不准确的数值。 解决这个问题的方法有以下几种： 首先，可以使用Vue3的生命周期钩子函数来手动触发echarts的自适应计算。在mounted钩子函数中，使用ref获取到页面上echarts容器的DOM元素，然后调用echarts的resize()方法，强制图表重新计算自适应大小。这样即使组件加载顺序有变化，也能确保每个图表都能正确地计算自适应大小。 其次，可以使用Vue3的watch特性来监听页面容器的大小变化。通过监听容器的width和height属性，当属性发生变化时，调用echarts的resize()方法进行自适应计算。这样无论页面中有多少个echarts图表，只要有容器大小变化，都能触发echarts的自适应计算。 最后，可以考虑使用Vue3提供的第三方插件或者封装自定义指令来处理echarts的自适应。这些插件或者指令会在页面渲染完毕后自动触发echarts的resize()方法，保证图表大小的正确计算。通过使用这些插件或者指令，可以简化代码，提高开发效率。 综上所述，通过合理运用生命周期钩子函数、watch特性以及第三方插件或自定义指令，可以解决在Vue3中多个echarts图表自适应失灵的问题。这样能够确保页面中的每个图表都能正确计算适应大小，提供良好的用户体验。
评论 24
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值