Vue 渲染多个Echarts图表
一、实现目标需要在一个整屏切换的页面上显示多个Echarts图表,随屏幕切换显示不同的Echarts图表二、实现方法这个目标看起来并不难,实现方法也有多种,目前想到的方法有以下:方法一、父子组件(动态加载)实现思路:图表数据请求单独封装在一个组件中(作为子组件),并在该子组件中通过监听flag值(屏幕切换标志)变化来实现图表数据更新注意问题:Echarts图表需要挂载在DOM节点上,要...
一、实现目标
需要在一个整屏切换的页面上显示多个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)