vue前端数据可视化echart实践经验(二)可视化初始化与刷新

echart可视化时机前面部分论述了可视化的组件细化,既然我们已经将它细化了,那么接下来讨论父组件将何时触发echart子组件的初始化和刷新。通过生命周期进行可视化更新?显而易见的一种方式是通过mounted(),created()等组件生命周期的方式。这种方式当然对于特别简单的场景是可以的,但是在实际可视化项目中,通常我们需要根据不同的请求条件直接对可视化进行刷新,比切换了日期条件、查看不同数据指标等,每次都销毁和重建组件是不实际的通过props变化进行可视化更新?vue组件通信的重要手段之一是
摘要由CSDN通过智能技术生成
echart可视化时机

前面部分论述了可视化的组件细化,既然我们已经将它细化了,那么接下来讨论父组件将何时触发echart子组件的初始化和刷新。
通过生命周期进行可视化更新?
显而易见的一种方式是通过mounted(),created()等组件生命周期的方式。这种方式当然对于特别简单的场景是可以的,但是在实际可视化项目中,通常我们需要根据不同的请求条件直接对可视化进行刷新,比切换了日期条件、查看不同数据指标等,每次都销毁和重建组件是不实际的
通过props变化进行可视化更新?
vue组件通信的重要手段之一是父子组件间传递的props属性。这种方式的好处是我们强化了父子组件的逻辑关系,我们把父组件中筛选项放入props,当其中有条件变化时,我们可以监听并进行子组件的刷新。但是这里面牵涉到异步机制,父组件更新props中对象后,子组件的监听和触发往往并不及时。另一个问题是,如果当多个监听属性同时变化时,子组件还要保证在对象深度监听中不要触发多次可视化刷新,这都是我在运用props刷新可视化时遇到过的问题。我在实际项目中很少使用props进行可视化初始化和刷新,除非是一些对同步性要求很低的场景
父组件直接调用子组件方法进行可视化更新
由于可视化场景的多样性,父组件需要根据自己条件变化状态及时通知并控制子组件进行可视化绘制的时机,通常我通过父组件直接调用子组件方法来实现,摆脱任何组件内外的生命周期。子组件定义init()方法,父组件决定何时调用它。这样一来,就将可视化的初始化和刷新完全从组件关系中独立出来,父组件组织好条件和其他准备工作后,直接通过调用类似this.$refs.abc.init()
通知子组件进行初始化。
除了可视化的初始化,而可视化项目中通常还牵涉到可视化的刷新,原因是考虑到大小屏的兼容性,及当浏览器变化时,我们需要对可视化重新绘制,这里不牵涉到请求后端接口和任何条件的变化,通常只需要调用echart的resize和setOption方法进行重绘就好了,于是,在父组件中调用类似
this.$refs.abc.resize()
方法通知子组件刷新。

下面通过一个例子来说明,我有如下图片展示的功能:
在这里插入图片描述
这是关于一个视频内容的可视化,最上面是可视化筛选条件,包括定价、端选择、时间选择,下面有若干可视化组成部分,我这里截图只截到了两个(分端流量走势、剧集分视频数据),滚动条下拉还有几个。对于这个可视化,顶部筛选条件对于所有可视化区域是通用的。
对于这个需求,显而易见我们会应用我在本系列文章第一节提到的组件细分概念,整个页面会有一个整体组件,而每一个可视化区域是一个细分的组件。
父组件中引入的子组件terminalTrend为分端流量走势,seriesVideo为剧集分视频数据:

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值