之前写了一篇《关于“交互密集型”组件的设计》，作为同一个系列，本篇来介绍当业务比较注重数据显示，展示逻辑比较复杂时，该怎样去设计。在做一些数据展示类的项目时，有时涉及到的数据源会比较多。而且有的图表，可能是需要同时展示两个数据源，或者将数据源提供的原始数据做一些处理之后综合起来再来显示到图标中。
业务简介
最近做一些大屏展示类的项目，会有数据展示的场景，场景如下：
在折线图中所要显示的折线比较多，涉及到的数据源主要分为3类：预报、预演和实测。是分别从3个接口中获取的，请求回来以后再显示到一张图上。左侧的table显示的是预报和预演数据，请求回来以后经过数值和格式处理，再显示出来。而底下一行的统计成果显示的是预报和预演水位的最大值以及出现时间等数据。
划分组件
在组件划分的时候可以分为控制组件和UI组件，UI组件就是只负责数据展示，而控制组件则是主要负责数据接收处理，再把处理完的数据传给UI组件进行展示。在这个业务中，可以按照区块来分，分成3个UI组件，就是折线图、时序图表和统计成果图表。
而最外面的父组件来控制这三个UI组件的就是一个控制组件。
画出数据流
在数据处理流程上可以参考下图：
控制组件中先去请求原始数据，再把请求到的原始数据保存在响应式变量中进行监听。当这两个原始数据被请求到或是被更新，就触发原始数据处理逻辑，这里把不同UI组件的数据处理流程进行了分拆，目的在于方便以后逻辑更改的定位，可以使业务更加清晰。把数据处理之后的结果作为响应式变量，同样输入到UI组件中，这样就可以在UI组件中把多个数据源的数据进行最终的展示了。
本篇没有针对vue还是react去写，但是所涉及到监听和生成响应式变量的这些特性，也正是这些框架的api基本功能，在实现业务的过程中发现，把我们的设计同前端框架的特性连接起来，进而实现出来，不也正是使用前端框架的乐趣所在么～
