【avue-data】使用“API接口数据“动态渲染

飞熊 • 2024年1月2日下午12:09 • 技术随笔 • 阅读 563

avue-date 使用接口（Java）动态获取数据

1. 新建大屏

1.1 “新建大屏”

1.2 填写大屏基本信息

2. 新建Echarts

以“柱状图”为例：API接口

强调：柱状图和折线图要饭蝴蝶数据格式一致

2.1 选择“柱形图”组件

2.2 数据类型：API接口数据

点击选项卡“交互”，填入信息
① 数据类型：AP接口数据
② 接口地址：返回【柱形图需要数据结构】，这里的接口地址不限项目（任意项目均可）。只要最后返回的是柱形图需要的固定结构即可。代码在下边展示。
③ 请求方式：对应接口地址的请求方式

2.3 接口编写（Java）

注意：要返回柱状图需要的数据格式才行

如下所示

{
    "series": [
        {
            "data": [
                13271863,
                42874824,
                49284274
            ],
            "name": "品牌"
        }
    ],
    "categories": [
        "苹果",
        "三星",
        "小米"
    ]
}

编写

① 自定义返回数据 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层
新建一个文件 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;
	}

③ 返回结果如下

{
    "title": {
        "text": "柱状图"
    },
    "series": [
        {
            "data": [
                13271863,
                42874824,
                49284274
            ],
            "name": "品牌"
        }
    ],
    "categories": [
        "苹果",
        "三星",
        "小米"
    ]
}

④ avue-date获取到的页面

以“饼状图”为例：API接口

返回数据格式如下即可

[
    {
        "name": "苹果",
        "value": 1000879
    },
    {
        "name": "三星",
        "value": 3400879
    },
    {
        "name": "小米",
        "value": 2300879
    }
]