精华内容
下载资源
问答
  • 2021-11-23 21:06:57

    大家好,我是前端实验室的小师妹!

    没想到吧,前端实验室不止有大师兄,还有小师妹我呢~

    今天小师妹跟大家聊聊数据可视化技术,介绍一款强大的可视化工具库,并赠上一份可视化数据平台资源(获取方式在文末哦~)

    什么是数据可视化?

    可视化,是利用计算机图形学和图像处理技术,将数据转换成图形或图像在屏幕上显示出来,再进行交互处理的理论、方法和技术。以视觉可以感受的方式表达,增强人的认知能力,达到发现、解释、分析、探索、决策和学习的目的。

    简单说数据可视化的本质是将数据通过各种视觉通道映射成图形,可以使得用户更快、更准确的理解数据。

    可视化的应用已经深入我们的生活中,能以非常炫酷的方式给我们提供优质且量多的数据信息,像今年大家看的比较多的疫情信息图,还有淘宝双11的可视化数据大屏,都属于可视化技术的应用。

    目前互联网公司一般可视化需求有:通用报表、移动端图表、大屏可视化、地理可视化、图编辑、图分析。
    AntV这款前端可视化框架由蚂蚁集团数据可视化团队精心打造的数据可视化解决方案。

    统计图表

    目前常用的几款图表库有HighchartsEchartsamCharts等等,G2是蚂蚁集团数据可视化团队开源的一款图表库。

    G2

    G2 是一套基于图形语法理论的可视化底层引擎,以数据驱动,提供图形语法与交互语法,具有高度的易用性和扩展性。使用 G2,你可以无需关注图表各种繁琐的实现细节,一条语句即可使用 Canvas 或 SVG 构建出各种各样的可交互的统计图表。
    项目地址:https://github.com/antvis/g2

    同时阿里团队针对特定的框架和业务场景对G2库进行了封装,并开源!

    Bizcharts

    BizCharts是阿里通用图表组件库,致力于打造企业中后台高效、专业、便捷的数据可视化解决方案,基于 G2与G2Plot封装的React图表库。
    项目地址:https://bizcharts.net/index

    Viser

    Viser阿里数据平台技术部出品,不管是React,还是Angular,抑或是Vue,你都能在Viser里找到解决方案。
    项目地址:https://viserjs.github.io/

    移动端图表 F2

    F2,一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境( Node.js,支付宝小程序、微信小程序、React Native、Weex)一份代码,多设备多环境渲染。完备的图形语法理论,满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。
    项目地址:https://github.com/antvis/f2

    大屏可视化 DataV

    DataV数据可视化是使用可视化应用的方式来分析并展示庞杂数据的产品(收费)。
    项目地址:https://datav.aliyun.com/portal

    使用DataV数据可视化,您可以:开发天猫双11、阿里云城市大脑同款数据可视化应用;开发工业级的数据可视化项目;使用海量的炫酷图表组件;搭建专业级地理信息可视化应用等等。

    文末有多套大屏可视化数据平台项目实战源码,记得领取哦~

    地理可视化 L7

    蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。支持海量地理数据可视化分析,支持多线程运算的矢量瓦片方案。能够满足大屏可视化地理分析应用的需求。
    项目地址:https://l7.antv.vision/zh

    比如制作不一样的疫情世界地图——酷炫、动感的地理可视化,都可通过L7实现!

    除了上述的这几款还有如G6:便捷的关系数据可视化引擎与图分析工具;
    X6:极易定制、开箱即用、数据驱动的图编辑引擎;AVA:为了更简便的可视分析而生的技术框架。

    阿里集团开源的这几款工具,几乎覆盖了可视化技术的所有使用场景,小师妹简单介绍了前端可视化技术的一些工具,相信你认真看完这些会对前端可视化有一个大致的了解,更多实际的应用还需要大家去探索哦~


    福利领取

    小师妹可是熬了两宿才整理出一份包含一百多套大数据可视化(大屏展示)模板,包含行业:社区、物业、政务、交通、工程、医疗、金融银行等多个行业!!!

    怎么领取?公众号回复aaaa可视化模板就可以领取啦!!!

    进了前端门,便是一家人

    原创不易,点赞、留言、分享就是小师妹写下去的动力!

    更多相关内容
  • 前端可视化工具介绍,希望前端程序员不会被淘汰.zip
  • 一个通过html5拖放api构建vue spa的Web前端平台
  • 一份小白前端可视化学习指南——附思维导图 前言 因为群里粉丝一直要求我写一篇「可视化入门指南」,今天他来了。其实说起前端可视化,大家所能想到的就是各种图表,大屏。这种看着贼炫酷,而笔者呢工作也一直从事3D...

    一份小白前端可视化学习指南——附思维导图

    前言

    因为群里粉丝一直要求我写一篇「可视化入门指南」,今天他来了。其实说起前端可视化,大家所能想到的就是各种图表,大屏。这种看着贼炫酷,而笔者呢工作也一直从事3D前端开发工作,慢慢对图形产生了兴趣。但是呢一直做的是三维的东西,没搞过二维的。大概是2月前开始学习2D的一些东西,然后并写了一些文章,效果还不错。所以我就写一些经验之谈,大佬勿喷。 我大概从4个方面去讲我是怎么学习的

    1. 「可视化不得不掌握的数学基础」

    2. 「svg」方面的学习

    3. 「canvas」方面的学习

    4. 「可视化中」不得不掌握的「图形算法」

    读完本篇文章,你可以大概知道我该怎么去学,需要学什么?以及我推荐的一些学习资料和学习资源!

    数学篇

    提起数学很多程序员头疼哇,我写代码还要学可恶的数学,但是我很明确的告诉你——「很重要」,如果你想学可可视化的话,数学很重要,背后的几何意义更重要。读者一开始理解不深,导致很多东西理解不了,吃了很多亏哇!

    向量

    在二维空间或者三维空间中, 是不是都有点的概念,只不过一个是二维的一个是三维的, 假设,现在这个平面直角坐标系上有一个向量 v。向量 v 有两个含义:一是可以表示该坐标系下位于 (x, y) 处的一个点;二是可以表示从原点 (0,0) 到坐标 (x,y) 的一根线段。

    向量
    向量

    我在写canvas的同时就喜欢用一个Point2d 类就是这个原理, canvas本身就是坐标系。画布上的点都可以用向量表示, 原点在左上方。

    向量加减法

    一个向量可以用其他两个向量去表示,也可以用两个向量去做减法,我说个实际工作中经常用到的例子: 如何让一个点在某一个方向延展多少长度呢?

    这里其实就是用到了向量的加法, 「首先这个方向肯定是是个单位向量」 , 为什么是单位向量呢?? 因为向量是有「大小」和方向的, 而「单位向量 只有方向, 长度 为1」 ,然后我们只要开始点 加上 这个方向向量 ✖️ 长度。就可以得到了。 背后不就是向量加法的运用。 我还是画图给大家展示下吧。

    向量加法
    向量加法

    如图:我要从A-B点 方向是od 然后你可以乘以任何长度 得到 OD 然后相加, 是不是就可以得到B点了。 一图胜千言!,减法大家可以自己去思考,同样的道理的

    向量的叉乘和点乘

    其实很多种实践,这里我就举一个例子哈,带你了解点乘。其实还有投影

    向量点乘可以用来判断 连个向量是否同一方向, 我还是画图给大家讲解, 不说太多理论,都是实战中经常用到的。

    叉乘
    叉乘

    A向量和B向量之间的夹角是锐角 所以是同向 , B向量和C量之间的夹角是钝角所以是反向 ,因为点乘的数学公式就是两个向量的模长 × cosθ 。

    叉乘

    叉乘的几何意义也是非常重要的,可以算多边形的面积, 计算出另一个向量 垂直于这两个向量。 还是开始画图:

    垂直
    垂直

    X向量 和 Y向量去做叉乘 得到的 向量Z 是 xy 平面的「normal」

    算面积:

    面积
    面积

    叉乘的数学意义: A向量的模长 × B向量的模长 × sinθ 不就是平行四边形的高 H 所以可以用来算面积。

    叉乘还可以用来判断三个点的方向

    Corss 的几何叉积得到的是一个数值, 只要判断当前数值是大于0 小于 0就好了, 就知道这个三个点的方式是逆时针 还是顺时针就好了。

    顺时针还是逆时针
    顺时针还是逆时针

    图中可以看到 OAB 和OA1B 的方向是不同,OA向量✖️ OB向量 的值 和 OA1 ✖️OB向量 算出的来的值 是相反的。公式我给大家列举下:

    a.x * b.y - a.y * b.x

    其实向量的点乘 和叉乘非常的重要,大家一定要要好理解,后面的图形算法,很多也是基于这个去实现的。

    矩阵

    空间中图形的大部分变化都是可以通过矩阵去表示的,大概有下面几种类型:

    1. 平移矩阵
    2. 旋转矩阵
    3. 缩放矩阵
    4. 镜像矩阵
    5. 错切矩阵
    6. 投影矩阵

    这里我给大家推荐的学习资源是B站的:

    https://www.bilibili.com/video/BV1ib411t7YR?from=search&seid=15308763710996235630

    线性代数的本质,看完你就能够明白了,包括上面的向量之间的变化。

    镜像矩阵我推荐你看我这篇文章, 我是求导了三维空间中任意平面的镜像矩阵的了,

    求空间任意平面的镜像矩阵

    我这里给大家简单的讲解下最简单的变化—— 「平移矩阵」

    还是看下图吧:

    平移矩阵
    平移矩阵

    在这样的三维坐标系中从A点平移到B点 x变化了 2 y变化了0 z 变化了 2 对应矩阵的写法是什么呢:

    其实矩阵中每一行都有对应的矩阵, 平移矩阵一般改变的第四列的前三个数字

    曲线

    无论是2d还是3d都需要曲线的表达,最简单的圆弧、椭圆弧、然后连续曲线可以用贝塞尔曲线去表达,还有B样条曲线,nurbs曲线。掌握曲线最终的还是数学哇。

    圆的方程: x ^2 + y ^ 2 = r ^ 2

    椭圆的方程: x ^ 2 / a ^ 2 + y ^ 2 / b ^ 2 = 1

    n阶贝塞尔曲线的方程: 𝐵(𝑡)=∑𝑖=0𝑛𝑃𝑖(1−𝑡)𝑛−𝑖𝑡𝑖,𝑡𝜖[0,1]

    b样条曲线和nurbs曲线我还没接触过,但是我们组的小伙伴正在做自由曲面,可能涉及到了。这里我只是简单表示了直线方程,有了方程你可以你去进行高度模拟,比如我在做3D文字的时候,我们底层算法库还没有支持贝塞尔, 不过没关系我们不是有方程嘛, 可以通过方程将贝塞尔曲线离散成多个点,然后用直线去表达。因为我们人眼去看屏幕上的东西,离散的很多的话,肉眼是完全看不出来的。 我这里给大家看一张图吧:

    弧线
    弧线

    圗这个部分的弧线我就是用我贝塞尔曲线 离散成直线去表达的, 还有国中的点其实也是贝塞尔曲线离散成直线去做的。从视觉上来看是能够近似模拟的。3D文字中的 更多技术,我后面会专门写一篇文章去详细介绍, 顺便自己去梳理下。如果你感兴趣,那你可得关注我,不然就找不到我了。

    坐标系的转换

    为什么要有这个东西呢,canvas和svg的坐标系都是左上方是原点,这一点你不觉得有点反人类? 好不舒服,我在画折线图的时候就发现了,从原点向上,坐标轴是递减的。其实这个问题怎么解决呢,其实很简单就是我们进行坐标系的转换,我将原先画布的原点, 通过变化到左下角, 这样我们在计算点的坐标的时候,就没有心智负担了,该怎样就是怎样。 说完2d我再和你聊聊3D, 就拿Three.js 举例子吧有个局部坐标系,观察坐标系(相机)、 世界坐标系、裁剪坐标系、屏幕坐标系。

    这是空间中某个物体到最终屏幕所做的一系列操作。

    1. 首先物体的自身有个坐标系我们叫做局部坐标系,他也有个原点,但是他在世界坐标系下也有对应的位置,所以他们之间有一个矩阵变化——「模型矩阵」

    2. 世界坐标系——到观察坐标系也有矩阵变化, 这叫「视图矩阵」

    3. 观察空间——裁剪空间 叫做 「投影矩阵」因为3维空间的东西我们是用相机去模拟人眼,在视椎体内的东西才能被看到。所有就有了投影矩阵, 有透视投影和正交投影, 一个近大远小,一个远近都是一样的

    4. 标准设备坐标-屏幕坐标。 这里就涉及到坐标系的原点的问题。

      坐标系
      坐标系

    归一化的坐标是相对于画布中心的, 但是canvas默认的坐标系是左上角的。 我们分析下坐标系的变化,首先Y轴是相反的所以 第一个变化就是 X不变,然后Y都✖️ -1这下方向对了,差的就是偏移量。 x轴和Y轴差的偏移量都是画布的一半宽度和高度。 这样就实现了,到屏幕坐标的转换了。

    svg和canvas

    SVG和canvas的学习我还是推荐Mdn, 大家去认真从头撸一遍,然后再谈进阶,再去如何优化, 你连基本的api都不熟悉和谈进阶对吧。

    1. svg教程 https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial

    2. canvas教程 https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial

      跟着后面学一遍,手敲一遍,自然就明白其中的奥秘。 下面👇是我用了这么久的小经验,和小tips

    3. svg中的path 中大写字母和小写字母的 区别主要是相对定位和绝对定位的关系。

    4. svg的defs标签 不会出现在画布上,是为了下面的组合使用的

    5. svg的g 和 symbols 都可以实现组合 ,但是symbols 有viewbox 也就是视口的概念

    6. use 复用标签 对应上文定义的id

    7. canvas 「clearRect()」 清除画布 由于canvas 每一帧都要进行重绘

    8. 「restore() save()」 保存当前canvas 的状态 确保不影响 其他绘图元素

    9. 「isPointinPath()」 可以用来点是不是在最后一个绘制的path 中(有坑) , 判断点是不是在图形内部最后用算法去解决。

    10. beginPath() 和 closePath() 的使用

    11. 像素级别的处理 imageData 的使用

    当你熟悉了这些可以进阶了, 推荐学习

    「进阶学习」

    深入理解canvas

    https://joshondesign.com/p/books/canvasdeepdive/title.html

    Canvas 最佳实践(性能优化)

    https://www.cnblogs.com/mopagunda/p/5622911.html

    canvas 离屏渲染

    https://devnook.github.io/OffscreenCanvasDemo/keep-ui-responsive.html

    canvas视频学习

    https://www.bilibili.com/video/av26151775/

    「推荐书籍」

    《HTML5 Canvas核心技术:图形、动画与游戏开发》

    《HTML5 2D游戏编程核心技术》

    webgl

    1.学习图形学基础

    一定一定一定要看闫令琪老师的GAMES101现代计算机图形学。建议1.5倍速,大概一个月内可以掌握。跟着课程,把光栅渲染器和光线追踪的作业都做掉,学了这门课,差不多图形学基础就打牢了。对图形学、游戏、3D引擎、OpenGL、Unity、UE差不多也有了基本的认识。我自己还没有看完,还在学习中。

    https://www.bilibili.com/video/BV1X7411F744?from=search&seid=7915905348717479996

    2.webgl 网站学习,这是我觉得质量非常不错同时又有点深度的学习网站

    https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-fundamentals.html

    1. 「着色器和glsl」
    2. 光照和颜色
    3. 如何加载外部模型
    4. 点线面如何三角化
    5. 贴图

    书籍推荐:

    webgl 编程指南

    3D游戏与计算机图形学中的数学方法

    Fundamentals of Computer Graphics (4th Edition)

    「directx 9.0 3d游戏开发编程基础」 这本书强力推荐 虽然是用c++写的 ,但是他把整个渲染流程讲解的很清楚,我反正看了收获很大。这也是我们老大推荐的一本书。

    框架层面

    three.js

    image-20210808004031389
    image-20210808004031389

    Three.js 是最知名的 WebGL 项目,Contributions 人数高达 1313,和 React 是一个量级的,尽管它自身的定位只是渲染引擎,但社区硬是把不少游戏引擎的功能都加上了,比如物理引擎、贴花、动画等,在源码中有大量例子,很适合学习,但不少重要功能,比如 gltf 加载器,都是放在 examples 目录里,让人感觉很不正式。

    由于知名度最高,Three.js 最大的优势就是社区强大,搜索问题能找到很多答案,也有非常多开源和商业项目使用

    但 Three.js 在版本管理方面很不专业,到现在都还没采用 semver 版本命名规范,每次发布都是一个叫 rXXX 的版本,我见过不少基于 Three.js 的项目都是固定在某个版本不敢升级了

    babylonjs

    image-20210808000356624
    image-20210808000356624

    最后压轴的是 Babylon,它也是 Sugar 最终采用的 WebGL 引擎,不仅功能强大,代码质量也很高,TypeScript 类型完善,几乎每个函数都有注释。

    Babylon 在材质方面功能丰富,除了基础的 PBR,还提供了用于皮肤的次表面渲染 SubSurface、用于车漆的 ClearCoat、用于布料的 Sheen,以及用于光盘之类的各向异性材质 Anisotropy 等等。

    Babylon 最后一个亮点是正在开发 WebGPU 版本,而其他引擎都没开始做,所以等 WebGPU 发布后,Babylon 应该是首批支持的,将得到更多关注。

    AntV

    image-20210808000608074
    image-20210808000608074

    在AntV中,有好几个不同的可视化引擎,事实上,它们是相互隔绝的,彼此独立的。学习的时候需要单独的去学习。ChartCube图表魔方支持在线的生成图表。地图则使用L7地理空间数据可视化。

    echarts

    image-20210808000817240
    image-20210808000817240

    ECharts最初是"Enterprise Charts"(企业图表)的简称,来自百度EFE数据可视化团队,是用JavaScript实现的开源可视化库。ECharts的功能非常强大,对移动端进行了细致的优化,适配微信小程序,支持多种渲染方式和千万数据的前端展现,甚至实现了无障碍访问。底层是用的z-render 这个库去进行封装的。还是很值的学习对的,有点类似于组件的概念,进行可配置的去展示图表。

    d3

    image-20210808001245616
    image-20210808001245616

    D3是指数据驱动文档(Data-Driven Documents)。D3.js是一个JavaScript库,它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。D3严格遵循Web标准,因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。同时,它提供了强大的可视化组件,可以让使用者以数据驱动的方式去操作DOM。被称为可视化版的jquery。

    图形算法

    最后讲一下不得不掌握的图形算法, 比如很简答的例子。 判断点是不是在任意多边形内部对吧这就是 涉及到算法。

    我大概列举下

    1. 判断点是不是在任意闭合polygon中 「用射线检测法, 有内部的点,像任意方向发出一天射线计算出交点的个数, 奇数就是内部 偶数就是外部」
    2. 判断连续多边形的方向 是顺时针还是逆时针 **求面积的正负 ** 「求平面的noraml (慎用) 对于凹多边形是不准的」
    3. 二维图形下, 任意图形的相交 推荐两个库 「clipper 和turf 洞和外轮廓的概念,自己可以百度了解」
    4. 判断一个点 在某个向量的哪一面 「上面的三点求方向逆时针还是顺时针」
    5. 线段求线段求相交 「直线方程求焦点」
    6. 求任意两个区域的包含关系 内部 外部 相交
    7. 碰撞检测 「boundingbox 求交集」

    这里我大概列了一下我工作中用到的一些算法。

    推荐一些文章:

    「谈"求线段交点"的几种算法(js实现,完整版)」

    https://www.cnblogs.com/i-gps/archive/2012/06/19/2554992.html

    「计算几何与图形学有关的几种常用算法」

    https://blog.csdn.net/wilson1068/article/details/44133303

    点在多边形内算法——判断一个点是否在一个复杂多边形的内部

    https://blog.csdn.net/hjh2005/article/details/9246967

    「实现多边形的交并差还有偏移」

    http://turfjs.org/

    「Clipper库中文文档详解」

    https://www.cnblogs.com/zhigu/p/11943118.html

    总结

    本篇文章大概就是我的个人理解哈,水平有限,能表达的就这么多。如果有更好的欢迎补充学习和交流,文章有错误的欢迎指正。最后送给大家一张思维导图,对照学习哈。我是热爱图形的Fly,我们下次再见👋啦。

    思维导图
    展开全文
  • 可视化常用组件有哪些? 常用的技术栈是什么?可视化的常见问题有哪些如何解决? 一、什么是可视化 大数据可视化这词相信大家并不陌生,从 17 世纪的地图和图形到 19 世纪初饼图的发明,使用图表来理解数据的...

    从2016年开始接触可视化方向,一直想写一篇文章回顾一下这几年踩过的坑,接下来的这段时间里我会不定时的给大家分享一些可视化方面的经验和感悟,发出来跟大家一块分享一下、一起讨论讨论、共同学习进步。

    前言

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

    一、什么是可视化

    大数据可视化这词相信大家并不陌生,从 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

    12. 拓扑图

    Antv@g6、Vis、D3、d3-graphviz

    13. 热力图

    Echarts、antV@L7、Heatmap

    14. 矩形图

    Echarts、Highcharts、Canvas

      

    15. 旭日图

    Echarts、Highcharts、Chart

    16. 桑基图

    Echarts、Highcharts、Chart

     17. 3D饼状图

    Highcharts、Three、Webgl

    18. 3D场景

    Three、Webgl

     18. 3D GIS场景

    Mapbox、Cesium

    19、20、21...

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

    三、前端可视化工程架构

     

    四、常见可视化问题有哪些?

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

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

    展开全文
  • 网站:https://www.chartjs.org/ 中文:https://chartjs.bootcss.com/ D3.js D3.js 是用于数据可视化的开源的JavaScript函数库,被认为是很好的JavaScript可视化框架之一。相比于ECharts更灵活,也更复杂。 网站:...

    ECharts

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

    makeapie

    makeapie 是 ECharts社区资源集合地。

    网站:https://www.makeapie.com/explore.html

    makeapie.png

    ZRender

    ZRender是一个二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。

    网站:https://ecomfe.github.io/zrender-doc/public/

    Chartjs

    Chartjs是一个为设计人员和开发人员提供简单而灵活的JavaScript图表。风格挺清新。

    网站:https://www.chartjs.org/

    中文:https://chartjs.bootcss.com/

    D3.js

    D3.js 是用于数据可视化的开源的JavaScript函数库,被认为是很好的JavaScript可视化框架之一。相比于ECharts更灵活,也更复杂。

    网站:https://d3js.org/

    AntV

    AntV系列:包含各种数据可视化的解决方案,这一套很系统,包含了数据可视化的方方面面。

    网站:https://antv.vision/zh

    AntV G2

    AntV G2 是一套面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。

    网站:https://g2.antv.vision/zh

    AntV F2

    AntV F2是一个专注于移动端,面向常规统计图表,开箱即用的可视化引擎。

    网站:https://f2.antv.vision/zh

    AntV G6

    AntV G6是一个简单、易用、完备的可视化引擎。

    网站:https://g6.antv.vision/zh

    AntV X6

    AntV X6是一个图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建 DAG 图、ER 图、流程图等应用。

    网站:https://x6.antv.vision/zh

    AntV L7

    AntV L7是一个地理空间可视化分析引擎。

    网站:https://l7.antv.vision/zh

    SpriteJS

    SpriteJS是一个跨平台的高性能图形系统,它能够支持web、node、桌面应用和小程序的图形绘制和实现各种动画效果。

    网站:https://spritejs.org/#/zh-cn/index

    Rough.js

    Rough.js:可以用来绘制草图外观的图形。

    网站:https://roughjs.com/

    ThreeJS

    ThreeJS 是一款开源的主流3D绘图JS引擎。

    网站:https://threejs.org/

    Pixi.js

    Pixi.js是一个非常快的 2D sprite 渲染引擎,支持webgl。可以帮助我们显示、动画和管理交互式图形

    网站:https://pixijs.com/

    中文:https://pixijs.huashengweilai.com/

    Phaser

    Phaser是一个快速、有趣并且免费的开源H5游戏开源框架。对H5游戏开发感兴趣可以看看 Pixi.js 这个库。

    网站:http://phaser.io/

    SVG.js

    SVG.js是用于操纵SVG和设置SVG动画的轻量级库。

    网站:https://svgjs.dev/docs/3.0/

    Snap.svg

    Snap.svg 是一个为现代web而生的JavaScript SVG库。

    网站:http://snapsvg.io/

    Fabric.js

    Fabric.js 是一个操作canvas的库,可以进行svg和canvas的相互转换。

    网站:http://fabricjs.com/

    Easing functions

    Easing functions 自定义参数随时间变化的速率,帮助我们选择正确的缓动函数。

    网站:https://easings.net/en#

    Animate.css

    Animate.css 跨浏览器的CSS动画库。

    网站:https://animate.style/

    Anime.js

    Anime.js 一个轻量级JavaScript动画库,具有简单但功能强大的API。

    网站:https://animejs.com/

    中文:https://www.animejs.cn/

    Hover.css

    Hover.css 纯CSS3鼠标滑过特效库

    网站:http://ianlunn.github.io/Hover/

    展开全文
  • 当然,也有人会说,目前比较主流的前端框架,像 Vue ,React 都是组件,模块儿化的工程,组件复用性很高,也对,这点毋庸置疑,但也改变不了大量重复性的工作和消耗前端资源的劣势 ;甚至还有人会说,当组件封装的...
  • 1智慧物流服务中心 2大数据管理平台 3、人口分析、交通分析 4.可视化监控管理 5车联网平台监控 6大数据统计展示大屏 。。 。。 。。
  • 前端可视化的四种方式

    千次阅读 2021-04-15 00:03:28
    简介:可视化用一句话来说,本质上就是将数据信息组织起来后,以图形的方式进行呈现。在web上,图像通常是利用浏览器来进行绘制的。大体的方向上有4种。第一种是传统的html+CSS,这种方式通...
  • 用于web前端数据可视化分辨率自适应,将数据可视化内容包裹在#best-box div中,引入下载的js即可
  • 如何在网页前端可视化你的知识图谱 最近费尽千辛万苦构造了一份可以用(大概)的知识图谱,并且把要利用知识图谱做的领域命名实体识别和一些推荐的功能做成Web版的demo,顺带想实现一些可视化知识图谱的功能。 ...
  • AntV,蚂蚁出品,前端数据可视化,有这一套就够了! 随着大数据的发展,人们越来越多地使用数据分析来解决问题。为了提高数据分析的效率,各种先进的数据可视化工具应需而生,可以直接根据指定的数据源,生成炫酷又...
  • 浅谈前端可视化

    千次阅读 2019-06-07 20:28:32
    前端可视化是一个比较大的方向,目前也有专门的可视化工程师,前端可视化其实主要基于两种方式去实现,一种是html5新出的canvas,另一种是svg。     在我看来,canvas更像自己用手画上去的,它是一种位图...
  • web前端-基于组件化Web GIS前端可视化框架关键技术研究.pdf
  • element,vue,antv(x6)。 dome地址:http://whyfreedom.51vip.biz/dist
  • 前端可视化搭建的拖拽平台

    千次阅读 2020-04-19 16:34:45
    前端可视化拖拽平台 简介 技术栈采用dva+hooks+umi+antd-mobile+sortable.js+react-color.基于sortable.js的前端可视化搭建的拖拽平台,ui组件采用antd-mobile.通过umi脚手架构建. 运行平台 安装相关依赖 npm i ...
  • 前端可视化拖拽方案

    千次阅读 2021-06-27 08:11:17
    技术栈:react+dva+less+umi+antd+node+ sortableumi:组件库设计考虑的一个重要的问题就是体积和渲染问题, 一旦组件库变的越来越多...数据可视化: F2 是一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环...
  • 前端可视化
  • 推荐2款前端可视化页面设计-不用写代码,拖就是了.zip
  • 前端可视化展示Excel

    千次阅读 2021-05-30 09:09:18
    需求:有的时候我们需要接收到后端返回的Excel流,前端进行可视化展示时,这个时候按照如下步骤即可 提前说明:前端展示的Excle样式与格式完全由后端控制,比如合并单元格、样式控制… 前端Demo????:例子 (有现成...
  • 本文将介绍一个工具--livereload。这是一款能根据你本地文件(html、css、js)的变化,自动跟踪刷新浏览器的实时刷新工具,有了这个工具,会大大减轻你刷新页面的工作量。下面跟着小编一起来看下吧
  • 推荐,大数据可视化大屏前端H5源码,共20套。
  • draw.io 原型图设计编辑器:https://github.com/jgraph/drawio method draw svg绘制编辑器:https://github.com/methodofaction/Method-Draw Fabric.js canvas图形编辑器:https://github.com/fabricjs/fabric.js
  • node.js爬取网页上的数据返回到前端,并用js插件echarts作曲线图可视化数据
  • 是基于echarts的智慧物流服务中心平台的前端搭建; 主要使用了前端开发常用的可视化工具echarts; 可在其基础上修改使用; 富有现代化/科技感; 可借助此项目学习echarts框架等。
  • 前端可通过url+cypher查询语句,返回构建好的json数据。 3D分层展示 节点柱状图信息展示 与Gis互通消息,互动展示 Gis互动,地图样式多样 demo1 demo2 后台服务介绍 1:config.js 配置连接neo4j的相关参数 2:...
  • 前端图表可视化插件 名称 地址 漂亮的HTML5 JavaScript图表----------CanvansJS https://canvasjs.com/ JavaScript图表和地图----------amcharts https://www.amcharts.com/ 您网站的开源HTML图表--...
  • 前端可视化页面自适应

    千次阅读 2019-11-25 12:03:24
    解决方案一 整体布局:flex+百分比 box-sizing: border-box css字体设置:rem margin\padding : vh echarts图表字体:自定义一个fontSize(num)函数,在大屏调好合适的数,在option配置参数时使用fontSize(20) ...
  • 前端可视化布局工具

    万次阅读 2018-11-14 08:46:14
    2.可视化拖拽 UI 组建,生成页面 3.直接输入设计稿,输出可用页面 可视化布局工具 1、layoutlt:这款在线工具可以快速简单的搭建基于Bootstrap响应式布局,操作简单,拖动即可,胜在方便快捷。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 89,245
精华内容 35,698
关键字:

前端可视化

友情链接: compile-simulator.rar