『贴代码』
我的博文
个人作品
优选问答
「搜索」
【本期话题】更多
三人寄语更多
你连F12都不关注,你好意思说你是前端?
点赞:0
逻辑注解清晰的代码优于那些一眼看不明白的语法糖
点赞:0
需求就是系统的千年杀,相爱相杀那种!
点赞:0
实际遇到的问题往往在那些视频课程中是不会出现的!
点赞:0
抛开需求讲架构,和纸上谈兵无差!
点赞:1
时间与空间总是在换来换去,鱼和熊掌往往不可同得!
点赞:0
由于时间的问题,我们往往会给自己埋坑,等着后续或者下一任来填!
点赞:0
往往会为了一个项目,搭建适合他专属的脚手架!
点赞:1
设置后,UI不会变更,要不给他一个SetTimeout试试,原因自己想
点赞:0
在循环里面慎重的使用await!
点赞:0
框架PasteForm实际开发案例,换个口味显示数据,支持echarts,只需要标记几个特性即可在管理端显示(2)
尘埃 2025-04-05 23 3 0
你相信么,只要写几行后端代码(不超过10行)即可实现数据图表echarts的显示!!!使用PasteForm框架,你会发觉管理端的开发是那么的简单!一起来看看是如何实现的!

更多特性PasteForm的介绍,请前往PasteForm操作文档查看 PasteForm操作文档与介绍


;

PasteForm框架的主要思想就是对Dto进行标记特性,然后管理端的页面就会以不一样的UI呈现
使用PasteForm框架开发,让你免去开发管理端的烦恼,你只需要专注于业务端和用户端!

在管理端中,如果说表格是基本的显示方式,那么图表chart就是一个锦上添花的体现!
如果一个项目拥有100个数据库表,那么大概有多少表需要以图表显示,或者说有多少需要支持图表和表格显示?
10个? 那你开发这些要花费多少时间呢?
使用PasteForm开发,你只需要几行代码即可实现一个图表的显示!
一起来看看是如何实现的
那么如果使用PasteForm框架开发的项目的管理端如何实现echarts的显示呢?

图表效果

在这里插入图片描述
上面是模拟表的显示效果,可以看到目前的测试字段是成绩一 成绩二 身高和X轴的时间!
可以说是非常普遍的需求,对吧!
显示方式的话支持line和bar

我们一起来看看要实现上面的东西的Dto是怎样的

Dto写法

在这里插入图片描述
看上图,是不是很简单,只做了7个标记!

特性介绍

ui

这个主要是给chart使用的,默认表格是table,也就是列表页面支持table和chart模式
chart就是图表有line,bar模式的,目前采用的是echarts的组件

字段 类型 示例 说明
args1 字符串 table 首显方式table就是默认的表格形式
args2 字符串 chart 备选方式
args1 字符串
args1 字符串

如果args2不填写,则UI中不会出现用户可以切换的按钮!
args1写哪个,哪个就是默认显示的方式
如果query有,比如show_type=chart,而args1又为table
则chart生效!!!

chartx

X轴 一般表示时间 在图中表示时间轴

参数 类型 示例 备注
args1 str 时间 X轴的名称,貌似好像没用
args2 str 备用 备用
args3 str 备用 备用
args4 str 备用 备用

注意一个Model里面只能有一个为chartx,有且只能有一个!

charty

Y轴信息,我的理解Y轴柱,上图的左侧的成绩多少分,右侧的身高多少cm

这个特性是标注在Class上的
按照标注顺序有序标0开始
比如上图的,可能成绩有语文,数学,英语,身高
那么语文,数学,英语就用左边柱子的刻度
身高单独用右边的刻度!

参数 类型 示例 说明
args1 str 成绩 显示名称,比如上面的成绩,身高
args2 str left 柱子放置位置,left左侧,right右侧
args3 int 0 偏移量
args4 str {value}cm 格式化显示

那么接下来的就是数据轴了,请看chartseries

chartseries

数据轴,上面案例说的 语文 数学 英语 身高的具体数值! 就是主视图区域的柱子bar或者线段line

参数 类型 示例 说明
args1 str line line线段线条模式bar柱子形式
args2 int 0 用之前的charty的哪一根,注意和顺序有关
args3 str 标题 语文
args4 str 备用 备用

我的理解args3就是legend,最中间上面那个!

来源出处

如果后续还有新的特性添加,或者特性变更,都将在PasteDocument中进行更新

PasteForm文档介绍

使用PasteForm框架开发,告别管理端,你只需要专注于服务端和用户端!

评论列表
尘埃
3 23 0
快捷注册
热门推荐更多
PasteSpider
;
最新动态
  • 144.****.110 正在查看 PasteForm中是如何处理Enum枚举类型的? !
  • 144.****.110 正在查看 PasteForm中是如何处理Enum枚举类型的? !
  • 191.****.16 正在查看 PasteSpiderV5在WindowsServer中以Service的方式运行 !
  • 191.****.16 正在查看 PasteSpiderV5在WindowsServer中以Service的方式运行 !
  • 94.****.202 正在查看 PasteSpider升级服务器上的一个服务或集群服务 !
  • 94.****.202 正在查看 PasteSpider升级服务器上的一个服务或集群服务 !
  • 124.****.177 正在查看 PasteSpider之占位符,宏,对象属性遍历的说明 !
  • 124.****.177 正在查看 PasteSpider之占位符,宏,对象属性遍历的说明 !
  • 75.****.154 正在查看 在centos7中安装docker !
  • 75.****.154 正在查看 在centos7中安装docker !
  • 62.****.48 正在查看 框架PasteForm实际开发案例,支持多级对象的表单看看有多简单只要几个特性即可!(1) !
欢迎加入QQ讨论群 296245685 [PasteSpider]介绍 [PasteForm]介绍 @2022-2023 PasteCode.cn 版权所有 ICP证 闽ICP备2021013869号-2