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数据