数据可视化常用组件都有哪些

前言

这篇文章作为开端，之后会不定时的发出一系列的采坑记录，整理出大数据可视化大屏常见的问题，以及针对特有场景进行深度优化。 这篇文章先带着大家熟悉一下什么是可视化？常见的可视化组件有哪些？ 常用的可视化技术栈有哪些？ 可视化工程框架是如何的？常见的可视化问题（不含答案，有疑问可以在下方评论我单独回答，如果问题较多我再单独出一篇文章详解）。

什么是可视化

大数据可视化这词相信大家并不陌生，从 17 世纪的地图和图形到 19 世纪初饼图的发明，使用图表来理解数据的概念已经存在了数个世纪。可视化一直伴随着我们的生活，在我们的生活中更是无处不在，像天猫双十一、女神节都各种各样的指标数据进行采集，像我们生活中的气象、交通、运维...都需要可视化。随着数字化时代的推进，信息时代的到来，我们的数据量在慢慢变得庞大，我们通过单纯的数据表、日志已经无法查看重要信息，必须依赖于可视化！

可视化常用组件有哪些？

1. 折线图
   Echarts、Chart、Highcharts、D3
   
2. 柱状图
   Echarts、Chart、Highcharts、D3
   
3. 散点图
   Echarts、Chart、Highcharts、D3
   
4. 象形图
   Echarts、Chart、Highcharts、D3
   
5. 雷达图
   Echarts、Chart、Highcharts、D3
   
6. 饼图
   Echarts、Chart、Highcharts、D3
   
7. 水波球
   Echarts、D3、Canvas
   
8. 仪表盘
   Echarts、Highcharts、D3、Canvas
   
9. 地图
   Echarts、Antv@L7
   
   10.拓扑图
   Antv@g6、Vis、D3、d3-graphviz
   
10. 热力图
    Echarts、antV@L7、Heatmap
    
11. 矩形图
    Echarts、Highcharts、Canvas
    
12. 旭日图
    Echarts、Highcharts、Chart
    

13. 桑基图
    Echarts、Highcharts、Chart
    

    15. 3D饼状图

    Highcharts、Three、Webgl
    

14. 3D场景
    Three、Webgl
    

    17. 3D GIS场景

    Mapbox、Cesium
    

常见的可视化组件还有很多就不在这里一一列举了，大家感兴趣的话可以看一看Echarts官网是比较全的，也可以看看D3.js这本书里面记载了很多图表的实现方案。

前端可视化工程架构

常见可视化问题有哪些？

以下问题会单独出文章详细描述，大家有问题也可以评论到下方，一起讨论学习

1. 可视化大屏开发如何适配多端？
2. 可视化大屏如何在拼接屏上准确无误显示？
3. 如何解决大屏失真、小屏文字模糊问题？
4. 如何进行大屏速度优化？
5. 如何对可视化大屏进行低版本兼容？
6. 随着可视化大屏尺寸增加，消耗资源过大怎么优化？
7. 3D GIS离线方案怎么定？
8. 3D场景碰撞检测、视野分析如何实现？
9. 大型BIM模型加载过慢，优化方案是什么？
10. 2d、3d动效卡顿，内存持续增改怎么优化？

作者简介

王海虎，开源项目FlyFish项目PMC，云智慧研发经理，全栈工程师，主攻可视化、3D引擎、3D gis场景、低代码等方向。AlOps社区专家团成员。开源项目AntV贡献者，清华大学Thulab的DWF项目开发者之一。

关于FlyFish

飞鱼平台(FlyFish)是云智慧公司自主设计、研发的一款低门槛、高拓展性的低代码应用开发平台，为数据可视化开发场景提供了高效的一站式解决方案。

项目介绍：https://www.cloudwise.ai/flyF...
Github 地址： https://github.com/CloudWise-...
Gitee 地址： https://gitee.com/CloudWise/f...
行业案例：https://www.bilibili.com/vide...
部分大屏案例：