没灵感了,就做一个图表可视化编辑器玩玩吧

嗨, 大家好,我是徐小夕。

之前一直在社区分享零代码&低代码的技术实践,也陆陆续续设计并开发了多款可视化搭建产品,比如:

  • H5-Dooring(页面可视化搭建平台)

  • V6.Dooring(可视化大屏搭建平台)

  • 橙子6试卷(表单搭建引擎)

今天和大家分享一款我做的在线图表编辑器,它可以让不懂技术的人也能轻松配置自己的图表。

926671adf0d6d10fcd66f3cc97ce0f09.gif
73.gif

体验地址:http://wep.turntip.cn/design/bubbleMap

开发背景

开发这个小项目主要还是为了方便我平时做图表素材的需求。因为我在很多文章视频中都会用到图表来提高内容表现力,但是市面上很多在线图表都需要收费,所以我就自己做了一款在线编辑图表的工具,供大家免费使用。

2455960c7b8b9f47907bdabe6b00cd8f.png
image.png

基本介绍

目前我开发的图表工具支持10+常用图表,同时部分图表还支持手绘风格,比如柱状图,饼图,面积图等。

9d9b58e94550579fed4f45f4ee80e5b1.png
image.png

当然还支持非常具有展现力的气泡图谱:

7f1e1a101750ef4278e0967369248888.gif
731.gif

如果大家要做性格分析,雷达图也是个不错的选择:

ff20fd67ab3fc33ca56fdcb1536cea1e.png
image.png

对于数据散点分布,我们也可以直接用散点图来线上一键编辑:

c2e2e2893f87a59e30cd434381d9ec05.png
image.png

当然还内置了很多图表,这里就不一一介绍了,大家可以线上体验。

体验地址:http://wep.turntip.cn/design/bubbleMap

技术实现

331c64db557f31b18b1e7d418d9c7d3f.png
image.png

目前制作这个小工具我采用了 nextjs 作为前端解决方案,技术栈有reactantdg2g6等,同时我设计了一套标准数据结构,可以让我们轻松集成任何第三方图表库。

如果大家想学习具体的技术实现,可以在趣谈前端中找我要源码,这块后面会开源出来,欢迎大家提出更好的建议~

后期还会持续迭代更新H5-Dooring以及可视化搭建系列产品,欢迎大家交流反馈,如果你也有好的想法或者产品,欢迎在留言区交流~

770dcea62e8ce4fbc91e7d0782f7ff71.png

往期精彩

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
系统根据B/S,即所谓的电脑浏览器/网络服务器方式,运用Java技术性,挑选MySQL作为后台系统。系统主要包含对客服聊天管理、字典表管理、公告信息管理、金融工具管理、金融工具收藏管理、金融工具银行卡管理、借款管理、理财产品管理、理财产品收藏管理、理财产品银行卡管理、理财银行卡信息管理、银行卡管理、存款管理、银行卡记录管理、取款管理、转账管理、用户管理、员工管理等功能模块。 文中重点介绍了银行管理的专业技术发展背景和发展状况,随后遵照软件传统式研发流程,最先挑选适用思维和语言软件开发平台,依据需求分析报告模块和设计数据库结构,再根据系统功能模块的设计制作系统功能模块图、流程表和E-R图。随后设计架构以及编写代码,并实现系统能模块。最终基本完成系统检测和功能测试。结果显示,该系统能够实现所需要的作用,工作状态有明显缺陷。 系统登录功能是程序必不可少的功能,在登录页面必填的数据有两项,一项就是账号,另一项数据就是密码,当管理员正确填写并提交这二者数据之后,管理员就可以进入系统后台功能操作区。进入银行卡列表,管理员可以进行查看列表、模糊搜索以及相关维护等操作。用户进入系统可以查看公告和模糊搜索公告信息、也可以进行公告维护操作。理财产品管理页面,管理员可以进行查看列表、模糊搜索以及相关维护等操作。产品类型管理页面,此页面提供给管理员的功能有:新增产品类型,修改产品类型,删除产品类型。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值