采用配置的方式来进行页面展现，在进行开发的时候可以进行多层的抽象，可以多次提取不同抽象程度的公共配置项。

鉴于此特性，我们可以将页面的结构进行类别划分：

  • 针对设计稿里面包含的图表类型进行抽象，单独作为一个组件文件夹

  • 针对页面也将其划分为单独的文件夹，不同页面的内容部分再进行进一步的粒度划分

    图表的设置

    针对图表会有两种操作

  • 图表初始化，使用 echarts.init(domElement) 来进行初始化和挂载

  • 图表内容刷新，设置 refresh 函数，并对数据源进行监听，当数据变化的时候调用

针对于不同的图表，需要为其添加一些通用的功能。

图表整体的功能可以使用 mixin 来进行抽象和注入。这其中包括，页面尺寸的变更监测，在生命周期中添加对应的操作，页面宽高发生变化的时候去调用 chart.resize() 方法做对应的处理。还包括在 beforeDestroy 生命周期对图表进行销毁（ chart.destroy() ）。

除此之外还需要对数据的初始化功能进行抽象。这项功能主要是对配置项进行 deepmerge 操作。这里需要进行两层抽象，一个是针对所有图表的通用参数进行抽象(x、y 轴，tooltip，label，legend，dataZoom)，另一个是针对特定的图表类型进行抽象（主要包括对数据项的配置和合并）。

Bottleneck

自定义数据分离。

  1. 发起请求返回数据，将返回的数据与特定图表的自定义参数进行混入
  2. 混入之后调用 refresh 方法，对混入之后的数据进行更进一步的拼接
  3. 调用 setOption 方法，将标准化后的参数进行页面设置

对于第一步，请求应该在对应的页面进行加载的时候发起，发起之后在 panel 包裹的图表组件中进行数据的首次拼装，之后再在图表的封装组件里面对数据进行更进一步，更通用化的处理，处理完之后再调用 chart.setOption() 来进行赋值。