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

前言

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

什么是可视化

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

可视化常用组件有哪些?

  1. 折线图
    Echarts、Chart、Highcharts、D3
    数据可视化常用组件都有哪些_第1张图片
  2. 柱状图
    Echarts、Chart、Highcharts、D3
    数据可视化常用组件都有哪些_第2张图片
  3. 散点图
    Echarts、Chart、Highcharts、D3
    数据可视化常用组件都有哪些_第3张图片
  4. 象形图
    Echarts、Chart、Highcharts、D3
    数据可视化常用组件都有哪些_第4张图片
  5. 雷达图
    Echarts、Chart、Highcharts、D3
    数据可视化常用组件都有哪些_第5张图片
  6. 饼图
    Echarts、Chart、Highcharts、D3
    数据可视化常用组件都有哪些_第6张图片
  7. 水波球
    Echarts、D3、Canvas
    数据可视化常用组件都有哪些_第7张图片
  8. 仪表盘
    Echarts、Highcharts、D3、Canvas
    数据可视化常用组件都有哪些_第8张图片
  9. 地图
    Echarts、Antv@L7
    数据可视化常用组件都有哪些_第9张图片
    10.拓扑图
    Antv@g6、Vis、D3、d3-graphviz
    数据可视化常用组件都有哪些_第10张图片
  10. 热力图
    Echarts、antV@L7、Heatmap
    数据可视化常用组件都有哪些_第11张图片
  11. 矩形图
    Echarts、Highcharts、Canvas
    数据可视化常用组件都有哪些_第12张图片
  12. 旭日图
    Echarts、Highcharts、Chart
    数据可视化常用组件都有哪些_第13张图片
  13. 桑基图
    Echarts、Highcharts、Chart
    数据可视化常用组件都有哪些_第14张图片

    1. 3D饼状图

    Highcharts、Three、Webgl
    数据可视化常用组件都有哪些_第15张图片

  14. 3D场景
    Three、Webgl
    数据可视化常用组件都有哪些_第16张图片

    1. 3D GIS场景

    Mapbox、Cesium
    数据可视化常用组件都有哪些_第17张图片

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

前端可视化工程架构

数据可视化常用组件都有哪些_第18张图片

常见可视化问题有哪些?

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

  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...
部分大屏案例:
image.pngimage.png

你可能感兴趣的:(数据可视化常用组件都有哪些)