百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

4个前端可视化库:Echart、AntV(前端可视化工具有哪些)

liuian 2025-01-31 14:03 19 浏览

4个前端可视化库:Echart、AntV、D3和Three,你更喜欢用哪一个?

1. ECharts

第一步:获取DOM节点,得到一个容器,待会用于放图表的

第二步:echarts.init(chartDom):初始化,输入dom节点,得到一个echart的实例

第三步:配置options,用户可以通过json格式的数据,指定图表的内容,从以下几个部分配置:title、tooltip、legend、xAxis、yAxis、series。

第四步:myChart.setOption(option),把你的配置设置进去,让它按照你的配置来画图。

使用评价:简单易用,难点都封装好了,只需要配置数据即可。所以非常适合小白用户,如果需要在网页中快速展示图表信息,刚好这个图表是比较常规的,不需要过多地调整和配置,就可以采用eCharts。

美观度评价:自带渐入动画、图表配色不错。


2. AntV

AntV是蚂蚁集团数据可视化团队打造的一个非常完善的数据可视化解决方案,进入到AntV的官网中我们可以发现它由七大模块组成:

1. G2|G2Plot:可视化图形语法和通用图表库

2. S2:多维可视分析表格

3. G6|Graphin:关系数据可视化分析工具和图分析组件

4. X6|XFlow:流程图相关的图表和组件

5. L7|L7Plot:地理空间数据可视化框架和地理图表

6. F2|F6:移动端的可视化解决方案

7. AVA:可视分析技术框架


3. D3

D3.js是一个很popular的库,好消息是有很多资料,坏消息是很多都是英文的。

而且在看官网的案例之前,要先搞懂Observable,不然,案例会看得你怀疑人生。

它一般结合svg进行绘图,用起来很麻烦,像在造轮子,但是灵活度很高,基本上你可以实现任何你想要的图表。


4. Three

Three.js是用来绘制三维图形的,它属于WebGL技术。如果学过OpenGL相关知识,那么用Three.js就会相对比较简单了。

需要采取以下步骤:

1. 创建场景

2. 设置一个Camera,相当于让它当你的眼睛,去看Three世界内的物体

3. 设置渲染器

4. 创建物体,三步走:geometry、material、Mesh(geometry, material)

#程序员# #前端# #可视化# #编程#

相关推荐

Optional是个好东西,如果用错了就太可惜了

原文出处:https://xie.infoq.cn/article/e3d1f0f4f095397c44812a5be我们都知道,在Java8新增了一个类-Optional,主要是用来解决程...

IDEA建议:不要在字段上使用@Autowire了!

在使用IDEA写Spring相关的项目的时候,在字段上使用@Autowired注解时,总是会有一个波浪线提示:Fieldinjectionisnotrecommended.纳尼?我天天用,咋...

Spring源码|Spring实例Bean的方法

Spring实例Bean的方法,在AbstractAutowireCapableBeanFactory中的protectedBeanWrappercreateBeanInstance(String...

Spring技巧:深入研究Java 14和SpringBoot

在本期文章中,我们将介绍Java14中的新特性及其在构建基于SpringBoot的应用程序中的应用。开始,我们需要使用Java的最新版本,也是最棒的版本,Java14,它现在还没有发布。预计将于2...

Java开发200+个学习知识路线-史上最全(框架篇)

1.Spring框架深入SpringIOC容器:BeanFactory与ApplicationContextBean生命周期:实例化、属性填充、初始化、销毁依赖注入方式:构造器注入、Setter注...

年末将至,Java 开发者必须了解的 15 个Java 顶级开源项目

专注于Java领域优质技术,欢迎关注作者:SnailClimbStar的数量统计于2019-12-29。1.JavaGuideGuide哥大三开始维护的,目前算是纯Java类型项目中Sta...

字节跨平台框架 Lynx 开源:一个 Web 开发者的原生体验

最近各大厂都在开源自己的跨平台框架,前脚腾讯刚宣布计划四月开源基于Kotlin的跨平台框架「Kuikly」,后脚字节跳动旧开源了他们的跨平台框架「Lynx」,如果说Kuikly是一个面向...

我要狠狠的反驳“公司禁止使用Lombok”的观点

经常在其它各个地方在说公司禁止使用Lombok,我一直不明白为什么不让用,今天看到一篇文章列举了一下“缺点”,这里我只想狠狠地反驳,看到列举的理由我竟无言以对。原文如下:下面,结合我自己使用Lomb...

SpringBoot Lombok使用详解:从入门到精通(注解最全)

一、Lombok概述与基础使用1.1Lombok是什么Lombok是一个Java库,它通过注解的方式自动生成Java代码(如getter、setter、toString等),从而减少样板代码的编写,...

Java 8之后的那些新特性(六):记录类 Record Class

Java是一门面向对象的语言,而对于面向对象的语言中,一个众所周知的概念就是,对象是包含属性与行为的。比如HR系统中都会有雇员的概念,那雇员会有姓名,ID身份,性别等,这些我们称之为属性;而雇员同时肯...

为什么大厂要求安卓开发者掌握Kotlin和Jetpack?优雅草卓伊凡

为什么大厂要求安卓开发者掌握Kotlin和Jetpack?深度解析现代Android开发生态优雅草卓伊凡一、Kotlin:Android开发的现代语言选择1.1Kotlin是什么?Kotlin是由...

Kotlin这5招太绝了!码农秒变优雅艺术家!

Kotlin因其简洁性、空安全性和与Java的无缝互操作性而备受喜爱。虽然许多开发者熟悉协程、扩展函数和数据类等特性,但还有一些鲜为人知的特性可以让你的代码从仅仅能用变得真正优雅且异常简洁。让我们来看...

自行部署一款免费高颜值的IT资产管理系统-咖啡壶chemex

在运维时,ICT资产太多怎么办,还是用excel表格来管理?效率太低,也不好多人使用。在几个IT资产管理系统中选择比较中,最终在Snipe-IT和chemex间选择了chemex咖啡壶。Snip...

PHP对接百度语音识别技术(php对接百度语音识别技术实验报告)

引言在目前的各种应用场景中,语音识别技术已经越来越常用,并且其应用场景正在不断扩大。百度提供的语音识别服务允许用户通过简单的接口调用,将语音内容转换为文本。本文将通过PHP语言集成百度的语音识别服务,...

知识付费系统功能全解析(知识付费项目怎么样)

开发知识付费系统需包含核心功能模块,确保内容变现、用户体验及运营管理需求。以下是完整功能架构:一、用户端功能注册登录:手机号/邮箱注册,第三方登录(微信、QQ)内容浏览:分类展示课程、文章、音频等付费...