在项目中,关于前端实现数据可视化的技术选择

前言

        在项目中,数据可视化以图表、报表类型为主。

需求背景

  • 技术框架是Vue2.x版本,组件库是Ant Design of Vue
  • 能够支撑足够多的图表类型开发
  • 图表大小/位置能够随意变动
  • 图表样式需要支持丰富多样的用户配置
  • 强大、开放的图表语法支持复杂的数据可视化场景
  • 兼顾电脑端和手机端、同时兼顾开发周期和后期维护
  • 版本稳定、社区活跃,方便定位问题和解决
  • 有大屏需求

Ant Design是蚂蚁金服开源的企业级 UI 设计React 组件库。而Ant Design of Vue 是第三方将 Ant Design 的组件库转换为 Vue 组件,便于开发者在 Vue 框架中使用。

Echarts

        特点:配置式开发,也就是绘制图表理论上不需要编写代码(除了初始化),只需要提供一个配置对象即可,所有的内容都可以通过配置调整。

        优点:

  • 百度开源、开箱即用、功能强大、社区活跃、文档丰富、版本迭代积极
  • 衍生开发、配置丰富、扩展丰富(可以画出各种炫酷效果makeapie echarts社区图表可视化案例)
  • 支持按需求打包(echarts.js官网提供了在线构建的工具,可以在线构建项目时,选择项目所需要使用到的模块,从而达到减小JS文件的体积)
  • 支持中国地图功能

        缺点:

  •  PC端大数据量体验较差
  • 移动端缺陷凸出(卡顿、部分PC功能不支持、触摸事件鬼畜等)
  • echarts.js的体积较大(一个基础的echarts.js都要400K左右,相对于D3.js和hightcharts.js来说都是比较大的)
  • echarts.js的可定制性差(说到echarts.js的定制性差,其实不止是包括echarts.js/hightcharts.js也是如此,因为这一类型的数据可视化框架主要是高度的进行分装,所以你在使用的时候只需要设置一下配置就可以了,但是如果是出现了要绘制配置中不支持的图表怎么办,那么你就只能放弃,尝试着使用其他的框架了)
  • 高度封装的组件库,没办法拿来再二次封装

AntV

        AntV 是蚂蚁金服开源的数据可视化解决方案。基于项目的业务需求,我考虑了以下Antv旗下三个开源库:

  •         G2
  •         G2Plot
  •         Ant Design Charts

        我们先讲讲三者的区别:

        G2

         G2 作为底层依赖,使用了图形语法。

         可以看到它的实现都是通过函数风格式、声明形式的 API 和组件化的编程范式来完成的:

         优点:功能强大

         缺点:上手难

        G2Plot

        全面依赖 G2,G2Plot 层仅仅是基于 G2 强大的图形、交互、事件、动画能力,一图一做的扩展不同的常见业务图表,开箱即用、易于配置。

        优点:上手简单,配置简单

        

        Ant Design Charts

        Ant Design Charts 是 G2Plot 的 React 版本,基于 React 封装了 G2Plot,无需感知destroy()、update() 等函数,只需关系 data 和 config,功能和 G2Plot 保持一致。

        新版本的Ant Design Charts甚至不局限于 G2Plot,目前已经在 G6 的基础封装了部分流程图、组织架构图等,后续还会接入 L7 (地理可视化) 等图表库。

        总而言之,G2Plot和Ant Design Charts可以理解为基于G2的实现。

        那么蚂蚁金服这几套技术框架的优缺点是啥?

        G2优点:自由度较高:由可视化理论做基础,没有类似 Echart 的 chart 概念,可用“可视化语法”绘制想要的图表,非常灵活。

        例如一根堆积柱形图的坐标系由笛卡尔坐标系改为极坐标系,堆积柱形图就变为了圆环图。

        代码复用率较高:因其有一套完善的可视化语法,所以团队或公司可根据自己的 UI 需求,用 g2 做底层库,封装自己的 charts 库。

        缺点:产品成熟度一般、社区也不活跃、大屏需要定制化开发,有一定开发门槛;组件库需前端编码实现数据绑定,若需拖拽式等功能需要额外开发(没有暴露resize方法);最重要的是很难!

        G2Plot和Ant design Charts优缺点与Echarts差不多。

HighCharts

        语法也是和 ECharts 差不多的配置式。

        它的优点是它有详细的文档,示例和详细的 CSS,产品稳定性好,缺点是商用版付费

        这个付费直接让我pass了它

D3

        非常著名的交互式绘图引擎,也算是偏底层绘图的库,类似于 G2

        开源的JavaScript函数库。很多其他的库都是基于它所开发,功能十分强大,灵活性也高,支持 HTML、SVG 和 CSS。

        优点:相当于武侠世界里的绝世内功,学会了它,就可以使出十八般武艺。各种定制化的可视化图表都可以轻松完成。

        缺点:难。需要 web 技术、可视化理论、数学逻辑。

        低版本的IE浏览器中图形无法正常显示

最终采用

        要商用,首先淘汰了HighCharts

        没有可视化开发基础。淘汰了D3和G2

        用的Vue不是React,淘汰了Ant Design Charts

        因为需要快速上手、绘制的图表没有夸张的个性化定制,Echarts和G2Plot进入决赛

        考虑到版本稳定和社区活跃,同时翻阅了Echarts的扩展画廊,发现Echarts还是有蛮多花里胡哨的实现,最后选择了Echarts

        但是移动端的问题最后还是踩坑了,但是我最后想出解决的方法,请看本专栏的另外一篇推文

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/86758.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UG NX二次开发(C++)-采用std::vector对体对象的质心进行排序

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1、前言2、体对象质心结构体的构造3、采用NXOpen获取part中的所有体对象4、通过遍历体对象集合来实现std::vector<MyBody>的赋值5、对结构体排序6、调用的完整源代码7、生成dll并测试一、pan…

【深度学习实验】前馈神经网络(四):自定义逻辑回归模型:前向传播、反向传播算法

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入必要的工具包 1. 逻辑回归Logistic类 a. 构造函数__init__ b. __call__(self, x)方法 c. 前向传播forward d. 反向传播backward 2. 模型训练 3. 代码整合 一、实验介绍 实现逻…

如何实现设备可视化系统建设?

随着工业生产的复杂性和精细化程度不断提升&#xff0c;设备可视化已经成为现代工厂运营管理的重要工具之一。通过实时监控、数据分析和图像呈现等技术手段&#xff0c;设备可视化能够提供给管理者和操作人员更加直观、精确的信息&#xff0c;进而提高生产效率、降低运营成本、…

Linux 目录结构介绍

对上面的说明: root 目录 &#xff1a; linux 超级权限 root 的主目录 home 目录 &#xff1a; 系统默认的用户主目录&#xff0c;如果添加用户是不指定用户的主目录&#xff0c;默认在/home 下创建与用户同名的文件夹 bin 目录 &#xff1a; 存放系统所需要的重要命令&am…

uniapp Echart X轴Y轴文字被遮挡怎么办,或未能铺满整个容器

有时候布局太小&#xff0c;使用echarts&#xff0c;x轴y轴文字容易被遮挡&#xff0c;怎么解决这个问题呢&#xff0c;或者是未能铺满整个容器。 方法1&#xff1a; 直接设置 containLabel 字段 options: { grid: { containLabel: true, },} 方法2: 间接设置&#xff0c;但是…

vue3中withDefaults是什么

问: const props withDefaults(defineProps<{// 数据列表lotteryList: { pic: string; name?: string }[];// 中奖idwinId: number;// 抽奖初始转动速度initSpeed: number;// 抽奖最快转动速度fastSpeed: number;// 抽奖最慢转动速度slowSpeed: number;// 基本圈数baseCi…

VPP ARC和feature初始化

遍历feature_main主结构的next_arc单向链表&#xff0c;按照顺序为每个ARC注册结构分配索引&#xff08;feature_arc_index&#xff09;&#xff0c;如果注册ARC的时候为成员arc_index_ptr附了值&#xff0c;将ARC索引写入此值。 将arc_name作为key&#xff0c;areg注册结构为…

为什么添加了@EnableDiscoveryClient注解就可以实现服务注册

添加了nacos的maven依赖之后&#xff0c;只需要在启动类上加一个EnableDiscoveryClient注解就可以实现服务注册&#xff0c;这个注解为什么可以实现&#xff1f; EnableDiscoveryClient注解 进去到EnableDiscoveryClient注解之后&#xff0c;只有简单的几行代码&#xff1a; …

【新版】系统架构设计师 - 案例分析 - 信息安全

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 文章目录 架构 - 案例分析 - 信息安全安全架构安全模型分类BLP模型Biba模型Chinese Wall模型 信息安全整体架构设计WPDRRC模型各模型安全防范功能 网络安全体系架构设计开放系统互联安全体系结构安全服务与安全机制…

mysql workbench常用操作

1、No database selected Select the default DB to be used by double-clicking its name in the SCHEMAS list in the sidebar 方法一&#xff1a;双击你要使用的库 方法二&#xff1a;USE 数据库名 2、复制表名&#xff0c;字段名 3、保存链接

简单趋势策略研究

交易对象&#xff1a;目前使用各种主力合约进行交易。 交易平台&#xff1a;易盛极星极星产品网 手续费研究:白糖期货手续费和保证金2023年09月更新 - 九期网 本人使用的期货交易公司&#xff1a;中信期货&#xff08;幸亏资金量大&#xff0c;返还高&#xff0c;不然就是给…

vue3+ts 实现移动端分页

current 开始页码 pageSize 结束页码 const sizeref<number>(10) //一页显示十条 const eachCurrentPageref<number>(1) //默认是第一页interface ITdata {current: number,pageSize: number,// xxxx 其他参数... } const selectApplyList ref<…

联想电脑打开exe提示要在Microsoft Store中搜索应用

问题&#xff1a; 你需要为此任务安装应用。 是否要在Microsoft Store中搜索一个&#xff1f; 如图&#xff1a; 出现此情况&#xff0c;仅需要做如下操作&#xff0c;在要打开的exe文件上右键&#xff0c;属性&#xff1a; 如图箭头所示&#xff0c;点击“解除锁定”出现对钩&…

题解:ABC321D - Set Menu

题解&#xff1a;ABC321D - Set Menu 题目 链接&#xff1a;Atcoder。 链接&#xff1a;洛谷。 难度 算法难度&#xff1a;B。 思维难度&#xff1a;C。 调码难度&#xff1a;B。 综合评价&#xff1a;见洛谷链接。 算法 枚举二分查找。 思路 先对b升序排序&#x…

C++提高编程:02 STL入门

这里写目录标题 STL初识1 STL的诞生2 STL基本概念3 STL六大组件4 STL中容器、算法、迭代器5 容器算法迭代器初识5.1 vector存放内置数据类型5.2 Vector存放自定义数据类型5.3 Vector容器嵌套容器 STL初识 1 STL的诞生 长久以来&#xff0c;软件界一直希望建立一种可重复利用的…

<十二>objectARX开发:Arx注册命令类型的含义以及颜色索引对应RGB值

1、注册命令类型 我们经常在acrxEntryPoint.cpp中看到注册命令如下: 那么各个宏定义代表什么意思呢? 主标识:(常用的) ACRX_CMD_MODAL: 在别的命令执行的时候该命令不会在其中执行。ACRX_CMD_TRANSPARENT: 命令可以再其它命令中执行,但在该标志下ads_sssetfirst()不能使…

SELECT * from t_user where user_id = xxx,可以从那几个点去优化这句sql

优化SQL查询可以从以下几个方面入手&#xff1a; 1. 索引优化&#xff1a;通过为查询涉及的列添加合适的索引&#xff0c;可以提高查询的效率。在该SQL语句中&#xff0c; user_id 列被用作查询条件&#xff0c;可以为 user_id 列创建一个索引。 2. 避免使用 SELECT *&#xf…

LeetCode 494.目标和 (动态规划 + 性能优化)二维数组 压缩成 一维数组

494. 目标和 - 力扣&#xff08;LeetCode&#xff09; 给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 或 - &#xff0c;然后串联起所有整数&#xff0c;可以构造一个 表达式 &#xff1a; 例如&#xff0c;nums [2, 1] &#xff0c;可以在 2…

用Redis做数据排名

1.背景 用Redis做数据缓存用的比较多&#xff0c;大家都能熟练使用String和Hash结构去存储数据&#xff0c;今天讲下如何使用ZSet来做数据排名。 假设场景是需要按天存储全国城市的得分数据&#xff0c;可以查询前十名的城市排名。 这个case可以使用传统关系型数据库做…

如何修复wmvcore.dll缺失问题,wmvcore.dll下载修复方法分享

近年来&#xff0c;电脑使用的普及率越来越高&#xff0c;人们在日常生活中离不开电脑。然而&#xff0c;有时候我们可能会遇到一些问题&#xff0c;其中之一就是wmvcore.dll缺失的问题。wmvcore.dll是Windows平台上用于支持Windows Media Player的动态链接库文件&#xff0c;如…