1.引入相关依赖
<!--mybatisplus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>${mybatisplus.version}</version>
</dependency>
<!--lombok-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
2.我们以查询省份疫情数据，数量为例做一个echarts疫情数据填充
@Data
@AllArgsConstructor
@NoArgsConstructor
public class NameNumber {
@JsonProperty("value") //echarts 要求返回的名称，要不封装不上数据
private int number;
@JsonProperty("name") //echarts 要求返回的名称，要不封装不上数据
private String goodsname;
}
3.PieVo.java 用来返回json数据的实体，里面装着List
@Data
@NoArgsConstructor
@AllArgsConstructor
public class PieVo {
private List<NameNumber> nameNumberList;
}
4.EchartsController.java
@RestController
@RequestMapping("/echarts")
public class EchartsController {
@Autowired
PieMapper pieMapper;
@RequestMapping("/pie")
public PieVo loadAll(){
PieVo pieVo = new PieVo();
List<NameNumber> pieVoList = pieMapper.findNameNumber();
pieVo.setNameNumberList(pieVoList);
return pieVo;
}
}
5.PieMapper.java
@Mapper
public interface PieMapper {
@Select("select goodsname,number from bus_goods")
public List<NameNumber> findNameNumber();
}
6.echarts中国疫情地图页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" th:src="@{/echarts/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/echarts/echarts.js}"></script>
<script type="text/javascript" th:src="@{/echarts/china.js}"></script>
</head>
<body>
<div id="main" style="height: 500px;width:1000px;text-align: center"></div>
<script type="text/javascript">
$.ajax({ //你需要写这些请求 异步请求数据
type: "GET",
url: "/echarts/pie",
dataType: 'json',
success: function (data) {
//地图开始
var optionMap = {
backgroundColor: '#FFFFFF',
title: {
text: '全国地图大数据',
subtext: '',
x: 'center'
},
tooltip: {
trigger: 'item'
},
//左侧小导航图标
visualMap: {
show: true,
x: 'left',
y: 'center',
splitList: [
{start: 500, end: 600}, {start: 400, end: 500},
{start: 300, end: 400}, {start: 200, end: 300},
{start: 100, end: 200}, {start: 0, end: 100},
],
color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea']
},
//配置属性
series: [{
name: '数据',
type: 'map',
mapType: 'china',
roam: true,
label: {
normal: {
show: true //省份名称
},
emphasis: {
show: true
}
},
data: data.nameNumberList //省份数据
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
myChart.on('click', function (params) {
window.alert('这是：' + (params.name));
// $.get("url","data",function (data) {
// alert(data);
// },"type");
});
//使用制定的配置项和数据显示图表
myChart.setOption(optionMap);
//自适应大小
window.addEventListener("resize", function () {
myChart.resize();
})
}
});
</script>
</body>
</html>
路人王
评论