实际上,在数据可视化
这一块笔者并没有很多的开发经历和经验,不过正是因为这个问题笔者才决定学习一门数据可视化框架来弥补自己在这一方面的不足。
在这个“大数据统治”
的时代,数据能给我们提供前所未有的便捷和认知;感觉在这个时代没有大数据解决不了的事情,虽然有点夸张的嫌疑,但是大数据的力量都是有目共睹的。不过遗憾的是我们前端领域并不能处理大数据,但是我们可以有目的得将数据以美观、明确、可靠的方式通过页面的形式展示出来,将枯燥的数据转换成一个个精美的图表。从另一方面讲,很多重要的自然定理、很多重要的决策不都是来源于图表吗?数据可视化,相当于将数据的力量和图表的力量结合起来从而达到1+1>2
的效果。
幸运的是,前端数据可视化工作并不需要我们从头造轮子,目前能做这份工作的第三方框架很多,比如复杂而强大的D3.js、久负盛名的Echarts等等,不过本系列笔者并不打算从它们中挑选一个出来学习研究,因为网上相关的资料多如牛毛。所以笔者选择了BizCharts,为什么会选择BizCharts?一是因为它是阿里出品,经历了一年左右的打磨已经完全适应在React使用;其次是它支持自由定制,不会像Echarts那样高度封装,所以在开发复杂图表的时候会更加得心应手。当然这只是它最重要的两个优点,更多的优点我们后面慢慢体会。
这里大概说一下阿里的图表库。BizCharts只是阿里图表库(AntV)中的一员。大概的产品组织框架如下:
AntV
--G2
--BizCharts ✅
--Viser-react
--Viser-ng
--Viser-vue
--G6
--F2
从这个图中我们可以看出本博客所说的BizCharts隶属于G2,而BizCharts则是基于G2的React版本封装(原因是阿里前端大部分都是使用React技术栈而且经常涉及到图表一类的业务需求,因此基于G2这种强大的图表底层引擎而封装的React可用的图表库就产生了);当然我们还能看到Viser-*系列
的库,从名字就能明白分别是基于G2的React版本封装、基于G2的Angular版本封装和基于G2的Vue版本封装;可以看出阿里图标库对目前比较主流的框架支持的都非常好。
当然本系列终究说的还是BizCharts,所以我们继续聊它。
前面说到BizCharts已经完全适应在React使用的原因在于BizCharts将图表拆解成多个部分并且封装成独立的组件,与React的组件化原则完全契合,比如:<Tooltip /> 代表提示信息,<Coord />代表坐标系,<Axis /> 代表坐标轴,<Geom />代表几何标记对象等等,这就意味着我们开发一个图表完全可以通过组合各个组件来达到预期目的,可以说在使用上是高度可控、自由度非常高。
本篇就是简单聊一下数据可视化以及相应的实现方式算是给这个系列开个头。