0%

可视化大屏图表库选择方案

1、ECharts.js

官网:echarts.apache.org

ECharts.js 最早是由百度技术团队维护的, 后来移交给了 Apache 开源基金会孵化也是我最终选择的图表库,选择它的原因也是因为文档界面相对友好,支持 SVGCanvas 双擎渲染,图表示例也比较全,而且文档是支持中英文的,使用的人也比较多,所以相关资料也很丰富。

这里要说一点坑就是,文档、示例虽好,但是很多特殊效果真的需要仔细阅读示例 demo 和配置项文档才能了解清楚,因为,ECharts 的配置选项实在是太庞大了。

这里推荐一个网站 https://www.isqqw.com/ ,有很多示例!

2、Chart.js

官网:www.chartjs.org

同样作为一款文档支持中英文的图表库,我也是把它纳入了对比范围。

文档整体结构和界面都是非常友好的,也拥有相当数量的基础内置图表,对于常规开发来说,这个库也是比较不错的选择,Api 学习难度低于 ECharts

但是如果有复杂图表比如仪表盘或者地图相关渲染的时候,这个库就不支持了,不过也不影响这个库的好用,大家可以根据自己的业务需求来选择,混合选择多款图表库也是可行的。

3、Antv

官网:antv.vision/zh

Antv 是我一开始比较看好的一个可视化图表库,它的产品系列划分很多,根据不同的图表类型也分了很多不同的产品线

  • G2(可视化图形)、G2Plot(通用图表库)
  • S2(多维可视分析表格)
  • G6(关系数据图分析工具)
  • X6(图编辑引擎)
  • L7(地理空间数据可视化)
  • F2(专注移动端的可视化解决方案)

文档的质量毕竟大厂的产品,还是非常能打的,目前是免费使用的,但是后期是否会收费就不清楚了,目前看这些项目在 GitHub 都是开源的 MIT,如果有符合需求的也可以考虑。

但是也看到有人说引入后本地可以运行,但是部署在服务器发生了未知 bug,导致图像无法渲染,所以也就没有使用,毕竟没有深入了解过,或许这种问题已经修复了。

4、D3.js

官网:d3js.org/

纯英文文档,相信这一条或许会劝退很多人,GitHub 有国内开发者翻译的 Api 中文手册,没有内置图表

但是其定义的绘图开发框架可以让你用 Api 的方式来进行 SVG 绘图,这一点比使用原生 SVG 要好很多,如果大家有需求要进行自定义绘制的,可以考虑使用 D3.js

一句话:很底层,但是足够灵活,可满足绝大部分图表内容的绘制