郑州网站托管公司,顺德网站制作案例价格,wordpress登录404,wordpress 加载jquery前言 在项目中#xff0c;数据可视化以图表、报表类型为主。 需求背景
技术框架是Vue2.x版本#xff0c;组件库是Ant Design of Vue能够支撑足够多的图表类型开发图表大小/位置能够随意变动图表样式需要支持丰富多样的用户配置强大、开放的图表语法支持复杂的数据可视化场景…前言 在项目中数据可视化以图表、报表类型为主。 需求背景
技术框架是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 全面依赖 G2G2Plot 层仅仅是基于 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 但是移动端的问题最后还是踩坑了但是我最后想出解决的方法请看本专栏的另外一篇推文
