Fastball图表组件
很多业务场景都会用到图表类的数据展示组件, 所以我们也提供了一些简单的图表, 后续会持续扩充.
配置说明
图表需实现的接口是一致的, 但是不同类型图表的注解, 以及要配置的内容是不同的, 因此我们将需实现接口和图表配置分离.
图表数据的抽象
不同图表的配置有很大的差异, 对于数据的要求也有一些不同, 我们不希望让后端同学关心到太多的细节, 因此做了一些抽象.
以折线图为例:
我们需要返回的数据核心其实是 X 轴 和 Y 轴的数据, 示例为年份和数据, 当然 X 轴和 Y 轴互换也是可以的. 比如:
json
[
//...
{
"x": "2011",
"y": "392"
}, {
"x": "2012",
"y": "473"
}, {
"x": "2013",
"y": "629"
},
//...
]
但其实并不需要讲字段绑定为 x 和 y, 因为这样就需要额外封装模型, 对返回信息进行处理, 因为返回数据里面, 包含了 X 轴和 Y 轴所需数据即可.
示例中就是 year 和 salesVolume, 所以我们不需要修改返回数据模型, 仅需要声明哪个字段作为 X 轴, 哪个字段作为 Y 轴, 至于数据摘要等逻辑, 就交给前端组件来完成.
只需要告知前端, x=year, y=salesVolume, 则就返回原始数据即可, 不需要额外的数据转换或者封装.
json
[
//...
{
"year": "2011",
"salesVolume": "392"
}, {
"year": "2012",
"salesVolume": "473"
}, {
"year": "2013",
"salesVolume": "629"
},
//...
]
同理, 如果我们需要一个多折线图:
其实只需要在多一个 Z 轴即可, 就是返回值中有一个字段来标识如何区分线就可以了, 但是 Z 轴这个概念不好理解, 所以用 seriesField.
下面的例子就是 seriesField=goodsType, 就可以根据商品类型产出各自销售额的多线图了.
至于其他图表基本上是一致的, 只是有些特殊图形会不太一样.
基础图表
- 实现接口:
dev.fastball.ui.components.chart.Chart<Model> - 使用场景: 用于普通图表数据的展示, 比如数据是前端组件关系或者菜单配置传递的
- 方法说明:
Collection<Model> loadData(): 用于返回图表数据
- 示例代码链接:
java
@UIComponent
@RequiredArgsConstructor
@AreaChartConfig(
xField = "year",
yField = "salesVolume",
seriesField = "goodsType"
)
public class MultipleAreaChart implements Chart<SalesStatistics> {
private final SalesStatisticsRepo repo;
@Override
public Collection<SalesStatistics> loadData() {
return repo.findAll();
}
}
有参图表
- 实现接口:
dev.fastball.ui.components.chart.VariableChart<Model, Param> - 使用场景: 用于普通图表数据的展示, 但是有入参, 比如根据组织来查询组织的年度销售额
- 方法说明:
Collection<Model> loadData(Param): 用于返回图表数据, 入参是组件传入参数
- 示例代码链接:
java
@UIComponent
@UIComponent
@RequiredArgsConstructor
@BarChartConfig(
xField = "salesVolume",
yField = "year"
)
public class OrgBasicBarChart implements VariableChart<SalesStatistics, Org> {
private final SalesStatisticsRepo repo;
@Override
public Collection<SalesStatistics> loadData(Org org) {
if (org == null || org.getId() == null) {
return repo.findByGoodsType(GoodsType.Food);
}
return repo.findByGoodsType(GoodsType.values()[org.getId() % GoodsType.values().length]);
}
}
图表类型
图表需实现的接口是一致的, 但是不同类型图表的注解, 以及要配置的内容是不同的, 下面就以各种图表类型独立描述.
折线图
- 配置注解:
@dev.fastball.ui.components.chart.config.LineChartConfig - 属性说明:
- xField:
- 类型:
String - 默认值: 无
- 配置作用: X 轴的字段
- 类型:
- yField:
- 类型:
String - 默认值: 无
- 配置作用: Y 轴的字段
- 类型:
- seriesField:
- 类型:
String - 默认值:
"" - 配置作用: 分类字段, 多折线图则需要配置该字段, 用来声明数据的分类, 从而产生不同的折现, 默认为空, 即为单折线图
- 类型:
- xField:
- 示例代码链接:
java
@UIComponent
@LineChartConfig(
xField = "year",
yField = "salesVolume",
seriesField = "goodsType"
)
public class MultipleLineChart implements Chart<SalesStatistics> {
private final SalesStatisticsRepo repo;
@Override
public Collection<SalesStatistics> loadData() {
return repo.findAll();
}
}
柱状图
- 配置注解:
@dev.fastball.ui.components.chart.config.ColumnChartConfig - 属性说明:
- xField:
- 类型:
String - 默认值: 无
- 配置作用: X 轴的字段
- 类型:
- yField:
- 类型:
String - 默认值: 无
- 配置作用: Y 轴的字段
- 类型:
- seriesField:
- 类型:
String - 默认值:
"" - 配置作用: 分类字段, 多柱图则需要配置该字段, 用来声明数据的分类, 从而产生不同的数据柱, 默认为空, 即为单柱图
- 类型:
- xField:
- 示例代码链接:
java
@UIComponent
@ColumnChartConfig(
xField = "year",
yField = "salesVolume",
seriesField = "goodsType"
)
public class MultipleColumnChart implements Chart<SalesStatistics> {
private final SalesStatisticsRepo repo;
@Override
public Collection<SalesStatistics> loadData() {
return repo.findAll();
}
}
面积图
- 配置注解:
@dev.fastball.ui.components.chart.config.AreaChartConfig - 属性说明:
- xField:
- 类型:
String - 默认值: 无
- 配置作用: X 轴的字段
- 类型:
- yField:
- 类型:
String - 默认值: 无
- 配置作用: Y 轴的字段
- 类型:
- seriesField:
- 类型:
String - 默认值:
"" - 配置作用: 分类字段, 多面积图则需要配置该字段, 用来声明数据的分类, 从而产生不同的折现, 默认为空, 即为单面积图
- 类型:
- xField:
- 示例代码链接:
java
@UIComponent
@AreaChartConfig(
xField = "year",
yField = "salesVolume",
seriesField = "goodsType"
)
public class MultipleAreaChart implements Chart<SalesStatistics> {
private final SalesStatisticsRepo repo;
@Override
public Collection<SalesStatistics> loadData() {
return repo.findAll();
}
}
条形图
- 配置注解:
@dev.fastball.ui.components.chart.config.BarChartConfig - 属性说明:
- xField:
- 类型:
String - 默认值: 无
- 配置作用: X 轴的字段
- 类型:
- yField:
- 类型:
String - 默认值: 无
- 配置作用: Y 轴的字段
- 类型:
- seriesField:
- 类型:
String - 默认值:
"" - 配置作用: 分类字段, 如果需要多条图则需要配置该字段, 用来声明数据的分类, 从而产生不同的堆叠条, 默认为空, 即为单条状图
- 类型:
- xField:
- 示例代码链接:
java
@UIComponent
@BarChartConfig(
xField = "salesVolume",
yField = "year",
seriesField = "goodsType"
)
public class MultipleBarChart implements Chart<SalesStatistics> {
private final SalesStatisticsRepo repo;
@Override
public Collection<SalesStatistics> loadData() {
return repo.findAll();
}
}