50+ 前端可视化图表库和数据源推荐 (含示例代码)

50+ 前端可视化图表库和数据源推荐，示例代码一键获取！

想要快速构建美观、交互式的数据可视化图表？这份清单为你精选了 50 多个优秀的前端可视化图表库，并附带数据源地址和示例代码，助你轻松上手！

主流图表库

1. ECharts - 功能强大的 JavaScript 图表库，提供丰富的图表类型和交互功能。

• 官网：https://echarts.apache.org/examples/zh/index.html
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data

2. D3.js - 灵活且高度可定制化的 JavaScript 库，用于数据可视化和创建动态图形。

• 官网：https://d3js.org/
• 数据源：https://github.com/d3/d3/wiki/Gallery

3. Highcharts - 易于使用的商业图表库，提供广泛的图表类型和配置选项。

• 官网：https://www.highcharts.com/
• 数据源：https://www.highcharts.com/demo

4. Chart.js - 轻量级的 JavaScript 图表库，易于使用，非常适合简单的图表需求。

• 官网：https://www.chartjs.org/
• 数据源：https://www.chartjs.org/samples/latest/

5. Google Charts - 由 Google 提供的免费图表库，提供多种图表类型和自定义选项。

• 官网：https://developers.google.com/chart/
• 数据源：https://developers.google.com/chart/interactive/docs/gallery

6. FusionCharts - 功能丰富的 JavaScript 图表库，提供广泛的图表类型、地图和仪表盘。

• 官网：https://www.fusioncharts.com/
• 数据源：https://www.fusioncharts.com/charts/

7. amCharts - 交互式 JavaScript 图表库，提供精美的地图、图表和仪表盘。

• 官网：https://www.amcharts.com/
• 数据源：https://www.amcharts.com/demos/

8. Plotly - 用于创建交互式、基于 Web 的图形的强大库，支持多种编程语言。

• 官网：https://plotly.com/javascript/
• 数据源：https://plotly.com/javascript/plotlyjs-function-reference/

9. C3.js - 基于 D3.js 的图表库，简化了常见图表类型的创建过程。

• 官网：https://c3js.org/
• 数据源：https://c3js.org/examples.html

10. Morris.js - 用于创建时间序列图表的轻量级库。

• 官网：https://morrisjs.github.io/morris.js/
• 数据源：https://morrisjs.github.io/morris.js/data.html

11. NVD3 - 基于 D3.js 构建的可重用图表库，提供多种图表类型。

• 官网：https://nvd3.org/
• 数据源：https://nvd3.org/examples/index.html

12. dc.js - 用于创建交互式仪表盘的 JavaScript 图表库，特别适合处理大型数据集。

• 官网：https://dc-js.github.io/dc.js/
• 数据源：https://dc-js.github.io/dc.js/examples/

13. Flot - 用于 jQuery 的简单易用的图表库。

• 官网：http://www.flotcharts.org/
• 数据源：http://www.flotcharts.org/flot/examples/

14. ZingChart - 功能丰富的 JavaScript 图表库，提供多种图表类型和自定义选项。

• 官网：https://www.zingchart.com/
• 数据源：https://www.zingchart.com/gallery/

15. CanvasJS - 基于 HTML5 Canvas 的 JavaScript 图表库，提供高性能和跨平台兼容性。

• 官网：https://canvasjs.com/
• 数据源：https://canvasjs.com/html5-javascript-line-chart/

3D 图表和数据可视化工具

16. Vis.js - 用于创建各种网络、时间线和图表类型的动态可视化的 JavaScript 库。

• 官网：https://visjs.org/
• 数据源：https://visjs.github.io/vis-graph3d/examples/

17. ECharts GL - ECharts 的扩展，用于基于 WebGL 的 3D 图表和地球可视化。

• 官网：https://echarts.apache.org/examples/zh/index.html#chart-type-scatter3D
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-gl

18. Three.js - 用于创建 3D 图形和动画的 JavaScript 库。

• 官网：https://threejs.org/
• 数据源：https://threejs.org/examples/

19. A-Frame - 用于构建 WebVR 体验的 Web 框架。

• 官网：https://aframe.io/
• 数据源：https://aframe.io/examples/

20. Babylon.js - 功能强大的 3D 引擎，用于创建游戏、交互式体验和数据可视化。

• 官网：https://www.babylonjs.com/
• 数据源：https://www.babylonjs-playground.com/

其他值得关注的图表库

21. Dimple.js - 基于 D3.js 的图表库，简化了商业和面向数据的可视化的创建过程。

• 官网：https://dimplejs.org/
• 数据源：https://dimplejs.org/examples_index.html

22. Taucharts - 用于声明式创建图表和图表的 JavaScript 库。

• 官网：https://www.taucharts.com/
• 数据源：https://www.taucharts.com/gallery/

23. Vega - 用于创建、共享和发布交互式可视化的可视化语法。

• 官网：https://vega.github.io/
• 数据源：https://vega.github.io/vega/examples/

24. Vega-Lite - Vega 的高级语法，用于快速创建可视化。

• 官网：https://vega.github.io/vega-lite/
• 数据源：https://vega.github.io/vega-lite/examples/

25. G2 - 基于图形语法的 JavaScript 图表库，用于创建各种图表。

• 官网：https://g2.antv.vision/
• 数据源：https://g2.antv.vision/zh/examples/gallery

26. AntV - Ant Financial 创建的数据可视化解决方案集合。

• 官网：https://antv.vision/zh
• 数据源：https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

ECharts 特色图表类型

27. ECharts Liquidfill - 用于创建液体填充图表的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=liquidfill-water
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-liquidfill

28. ECharts Map - 用于创建地图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/index.html#chart-type-map
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data/map

29. ECharts WordCloud - 用于创建词云的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=wordcloud-shakespeare
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-wordcloud

30. ECharts Gauge - 用于创建仪表盘的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=gauge
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-gauge

31. ECharts Funnel - 用于创建漏斗图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=funnel
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-funnel

32. ECharts Radar - 用于创建雷达图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=radar
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-radar

33. ECharts Boxplot - 用于创建箱线图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-boxplot

34. ECharts Scatter - 用于创建散点图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=scatter-simple
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-scatter

35. ECharts Parallel - 用于创建平行坐标系的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=scatter-polar-punchCard
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-parallel

36. ECharts Sankey - 用于创建桑基图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=sankey-energy
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-sankey

37. ECharts ThemeRiver - 用于创建主题河流图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=themeRiver-lastfm
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-themriver

38. ECharts Heatmap - 用于创建热力图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=heatmap-cartesian
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-heatmap

39. ECharts Calendar - 用于创建日历图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=calendar-effectscatter
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-calendar

40. ECharts Treemap - 用于创建矩形树图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=treemap-drill-down
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-treemap

41. ECharts Polar - 用于创建极坐标图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=polar-scatter-angle
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-polar

42. ECharts K Line - 用于创建 K 线图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=candlestick-sh
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-candlestick

43. ECharts Graph - 用于创建关系图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=graph
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-graph

44. ECharts Liquidfill - 用于创建液体填充图表的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=liquidfill
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-liquidfill

45. ECharts Calendar - 用于创建日历图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=calendar-effectscatter
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-calendar

46. ECharts Scatter - 用于创建散点图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=scatter-weibo
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-scatter-weibo

47. ECharts EffectScatter - 用于创建带特效的散点图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=effectScatter-bmap
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-effectscatter

48. ECharts GeoLines - 用于在地图上创建地理线段的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-bus
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-geo-lines

49. ECharts Geo3D - 用于创建 3D 地理可视化的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=geo3D-bar3D
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-geo3D

50. ECharts ScatterGL - 用于创建高性能散点图的 ECharts 扩展。

• 官网：https://echarts.apache.org/examples/zh/editor.html?c=scatter-gl
• 数据源：https://github.com/apache/incubator-echarts/tree/master/examples/data-gl-scatter