为了重构，我调研了市面上的可视化方案

gio有个可视化方案，它构建于G2，与React封装在一起。之前的同事想法是想在这一套可视化方案中，希望通过配置文件绘制出配置文件里面的图。但可惜的是在绘图部分抽象不够好，导致在绘图部分的代码量较大，维护困难。在今年也看到有些视频分享值得我去学习和思考的。

在经过一段时间的调研后，看到下面基于React做渲染的方案是不错的

BizChart，阿里开源的g2 + react可视化方案
Recharts，开源社区canvas + svg + d3.js + react可视化方案
react-vis， Uber开源的canvas + svg + d3.js + react

BizChart与Recharts的架构类似

BizChart架构图

BizChart是根据React的children中的type去索引到processor中，processor是专门处理g2的绘图部分。根据children的props传递到processor，绘制不同类型的图

BizChart架构图

Recharts架构图

Recharts比较有意思的是generateCategoricalChart是一个高阶组件，抽象出公共的逻辑，根据导出的BarChart、AreaChart中的children去拼接line、bar、axis，形成一个完整的图行。

<LineChart width={600} height={300} data={data}>
  <Line type="monotone" dataKey="uv" stroke="#8884d8" />
  <CartesianGrid stroke="#ccc" />
  <XAxis dataKey="name" />
  <YAxis />
</LineChart>

Recharts架构图

react-vis架构图

react-vis从开源代码结构来看，是属于比较松散型，即在Plot中定义Line、Bar、Axis等组件。在plot中，react-vis还定义了series，这个主要是图表的组装工厂，里面的图表都是继承于AbstractSeries。AbstractSeries主要提供了DOM的事件监听：click、mouseMove、touch等事件处理。

<XYPlot height={200} width={200}
  colorType="category"
  colorDomain={[0, 1, 2]}
  colorRange={myPalette}
>
  <VerticalBarSeries data={series1} color={0} />
  <VerticalBarSeries data={series2} color={1} />
  <VerticalBarSeries data={series3} color={2} />
</XYPlot>

react-vis架构图

总结

在上述的三个可视化库中除了Bizchart是以g2为内核之外，其余两个都是使用的d3+react。在g2源码中，g2继承EventEmitter，所以Bizchart在模块化上使用react component type去区分g2 component。而recharts则是通过高阶组件抽象出绘图逻辑。在react-vis中，则是以继承的方式去构建一个事件处理的wrapper，每一个series chart都有自己的绘图逻辑。