avue-date uses interface (Java) to dynamically obtain data
1. Create a new large screen
1.1 "New large screen"
1.2 Fill in the basic information of the large screen
2. Create a new Echarts
Take "histogram" as an example: API interface
Emphasis: The data format of the histogram and the line chart beg for food are consistent
2.1 Select the "Histogram" component
2.2 Data type: API interface data
Click on the tab "Interaction" and fill in the information
① Data type: AP interface data
② Interface address: return [Data structure required for column chart], the interface address here is not limited to items (any item is acceptable). As long as the final return is the fixed structure required by the column chart. The code is shown below.
③ Request method: the request method corresponding to the interface address
2.3 Interface writing (Java)
Note: To return the data format required for the histogram
As follows
{
"series": [
{
"data": [
13271863,
42874824,
49284274
],
"name": "品牌"
}
],
"categories": [
"苹果",
"三星",
"小米"
]
}
write
① Custom return data TestEcharts.java
package org.springblade.modules.visual.entity;
import java.util.List;
import java.util.Map;
public class TestEcharts {
private Object title; // 可有可无（此处仅用来做笔记）
private List<Map<String,Object>> series;
private List<String> categories;
public Object getTitle() {
return title;
}
public void setTitle(Object title) {
this.title = title;
}
public List<Map<String,Object>> getSeries() {
return series;
}
public void setSeries(List<Map<String,Object>> series) {
this.series = series;
}
public List<String> getCategories() {
return categories;
}
public void setCategories(List<String> categories) {
this.categories = categories;
}
}
② Controller layer
Create a new file TestEchartsController
@ApiOperation("柱状图 和 折线图")
@GetMapping("/getBarChart")
public TestEcharts getTestEcharts() {
TestEcharts echarts = new TestEcharts();
// {
"name":""}
Map<String,Object> map = new HashMap<String,Object>();
map.put("text","柱状图");
echarts.setTitle(map);
// ["","",""]
ArrayList<String> strings = new ArrayList<>();
strings.add("苹果");
strings.add("三星");
strings.add("小米");
echarts.setCategories(strings);
// [{
},{
}]
ArrayList<Map<String, Object>> maps = new ArrayList<>();
HashMap<String , Object> seriesMap = new HashMap<String,Object>();
seriesMap.put("name","品牌");
ArrayList<Integer> datas = new ArrayList<>();
datas.add(13271863);
datas.add(42874824);
datas.add(49284274);
seriesMap.put("data",datas);
maps.add(seriesMap);
echarts.setSeries(maps);
return echarts;
}
③ The returned results are as follows
{
"title": {
"text": "柱状图"
},
"series": [
{
"data": [
13271863,
42874824,
49284274
],
"name": "品牌"
}
],
"categories": [
"苹果",
"三星",
"小米"
]
}
④ The page obtained by avue-date
Take the "pie chart" as an example: API interface
The returned data format is as follows
[
{
"name": "苹果",
"value": 1000879
},
{
"name": "三星",
"value": 3400879
},
{
"name": "小米",
"value": 2300879
}
]