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

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为剧集分视频数据：