Vue 渲染多个Echarts图表

1、实现目标

须要在一个整屏切换的页面上显示多个Echarts图表，随屏幕切换显示不一样的Echarts图表

2、实现方法

这个目标看起来并不难，实现方法也有多种，目前想到的方法有如下：

方法1、父子组件（动态加载）

实现思路：图表数据请求单独封装在一个组件中（做为子组件），并在该子组件中经过监听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>

方法2、兄弟组件（一次加载）

实现思路：将每个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'

3、总述

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

效果展现

实例建立时，一次性加载全部Echarts数据