目前状态：草稿，完善中

提到前端图标、大屏，第一反应都是百度出的 ECharts（当然现在已经是 Apache 的了）。但前端可视化领域其实远不止这个选择，但 ECharts 的文档易读、易用、框架的封装库很多。

这里花一点时间简单介绍下。

我们关注：

  • 好看。好看的视觉风格，提供开箱即用的主题，并且自定义主题
  • 完备。完备的图标类型，基础类型简洁好看，复杂延伸类型炫酷打动人心
  • 易用。文档清晰已读，示例直观好复现使用
  • 开源。最起码开源不需要商业授权，不给商业化公司挖坑

选型方案

Apache Echarts

老牌、信赖感强。

https://echarts.apache.org/zh/index.html

image.png
2021-11-12 当前的版本是 v5.2。
新版本特性最佳了动态排序图等。 https://echarts.apache.org/handbook/zh/basics/release-note/v5-feature

chart.js

可考虑。轻量、小清新。文档很简洁但是没有中文文档，倒是一个有趣的机会。
2021-11-13 v3.6.0
https://www.chartjs.org/
https://github.com/chartjs/awesome

image.png

常规的足够应对。

antv系列

G6 图可视化引擎

各种图可视化，整理思路，比如树状、组织、思维导图等。
G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。https://antv-g6.gitee.io/zh

graphin

React+G6 可参考
Graphin 取名意为 Graph Insight（图的分析洞察），是一个基于 G6 封装的 React 组件库，专注在关系可视分析领域，简单高效，开箱即用。https://antv-graphin.gitee.io/

G6/React 封装库

网站上放了一些科普和思考https://antv-graphin.gitee.io/solution/knowledge-graph

f2 移动可视化

基础的图形都有挺好。
移动端，可视化方向：推荐、可参考。
在Node、小程序中使用：推荐。在 Node 中可跑可导出，这一点挺好，最起码可以封装api来获取图片。

F2 是一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（Node, 小程序，Weex） https://antv-f2.gitee.io/zh

F2Native 移动端可视化方案

前端不用看，给 iOS/Android 准备的。

F2Native 是一个专注于客户端，开箱即用、高性能的可视化解决方案，完备的图形语法理论，满足你的各种需求，专业的移动设计指引为你带来最佳的移动端图表体验。
https://antv-f2native.gitee.io/zh

g2 可视化引擎

还可以，比较实用。

可视化。G2 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
https://antv-g2.gitee.io/zh

G2Plot 开箱即用的图表库

可参考。都配置好了，花样多。相当wow
G2Plot 是开箱即用、易于配置、具有良好视觉和交互体验的通用统计图表库。
https://antv-g2plot.gitee.io/zh

基础+变异图形都有。可以让产品看看，下面这种就挺新鲜：

image.png

image.png

ant design charts

g2plot+react https://charts.ant.design/zh-CN/guide/
封装库。

L7 地理空间数据可视化

地理可视化，属于对 map 的各种延伸，可参考，丢给产品和设计看。
https://antv-l7.gitee.io/zh

x6 图编辑引擎

如果你需要用户连线、流程控制模拟，推荐。

X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建 DAG 图、ER 图、流程图等应用。https://antv-x6.gitee.io/zh

流程图的各种编辑，各种细节的控制，挺细致的。

chartCube 图表魔方

使用 g2plot/g2 的可以玩玩。
AntV 在线图表制作工具 拖拽之间快速搞定图表制作 https://chartcube.alipay.com/

高级高级，先导入数据，点点点选择样式。使用的是 g2plot

airbnb visx

不推荐。
数据可视化复杂领域，符合复杂、炫酷。
https://airbnb.io/visx/gallery

high charts

不推荐，需要额外商业授权。
https://www.highcharts.com/

从不同的工具中可以感受到：

  • 国内推崇小清新风格、提供完整视觉风格方案。
  • 讲好图标设计思考、重视无障碍