Vue 渲染多个Echarts图表

一、实现目标

需要在一个整屏切换的页面上显示多个Echarts图表,随屏幕切换显示不同的Echarts图表

二、实现方法

这个目标看起来并不难,实现方法也有多种,目前想到的方法有以下:

方法一、父子组件(动态加载)

实现思路:图表数据请求单独封装在一个组件中(作为子组件),并在该子组件中通过监听flag值(屏幕切换标志)变化来实现图表数据更新

注意问题:Echarts图表需要挂载在DOM节点上,要求这个DOM的 id 唯一(注意,是在整个HTML中唯一,为不是在当前组件内唯一

注意:本人测试失败并不代表该方法不行,只是不适合我的当前情况

测试结果:失败

结果说明:无法实现DOM的 id 在整个HTML内唯一。原因在于,我是在 for 循环中引用的组件,相当于是重复使用该组件,那么无论怎样修改DOM的 id 值,HTML渲染的结果都是重复的 id

代码如下:

<div v-for="(item, index) in scrollList" :key="index" :class="item.className">
	……
	<div class="echarts_box">
		<!-- 渲染组件 -->
		<AnalyAllShow :curIndex="this.curIndex"></AnalyAllShow>
	</div>
</div>
方法二、兄弟组件(一次加载)

实现思路:将每一个Echarts图表分别封装在一个组件中,然后在主界面组件内引用这些组件(使用v-for渲染多个组件

for 循环渲染多组件,参考自:https://blog.csdn.net/qq_35366269/article/details/98942292

注意问题:每个组件内Echarts挂载的DOM的 id 需要保持不同

测试结果:成功

代码如下:

<div v-for="(item, index) in scrollList" :key="index" :class="item.className">
	……
	<div class="echarts_box">
		<!-- 渲染组件 -->
		<component :is="item.curType" :data="item.curData"></component>
	</div>
</div>

注意,在绑定的数据中,需要添加组件数据 curType、curData,它们的值为引用的组件(封装Echarts的那几个组件)

scrollList: [
	{ id: 'one', ……, curType: 'EchartsBook', curData: 'EchartsBook' },
	{ id: 'two', ……, curType: 'EchartsDiary', curData: 'EchartsDiary' },
	{ id: 'three', ……, curType: 'EchartsEssay', curData: 'EchartsEssay' },
	{ id: 'four', ……, curType: 'EchartsVoice', curData: 'EchartsVoice' }
]

封装Echarts图表的组件:

import EchartsBook from './analy/EchartsBook.vue'
import EchartsDiary from './analy/EchartsDiary.vue'
import EchartsEssay from './analy/EchartsEssay.vue'
import EchartsVoice from './analy/EchartsVoice.vue'

三、总述

  • 保证Echarts所挂载的DOM节点的 id 在整个HTML内唯一
  • 通过 for 循环渲染多个组件:<component :is="item.curType" :data="item.curData"></component>

效果展示

实例创建时,一次性加载所有Echarts数据
在这里插入图片描述

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值