springboot和vue怎么根据数据库表中的不同活动类型活动把数据在前端动态显示echarts图,数据库表activity,活动类型type,活动类型包括助老和助残,请给出代码
时间: 2023-08-02 11:10:29 浏览: 44
首先,我们需要在后端根据活动类型查询数据,并将数据传递到前端。以下是使用Spring Boot和MyBatis实现的示例代码:
1. 创建ActivityMapper.java文件
```java
@Mapper
public interface ActivityMapper {
List<Activity> getActivityByType(String type);
}
```
2. 创建ActivityService.java文件
```java
@Service
public class ActivityService {
@Autowired
private ActivityMapper activityMapper;
public List<Activity> getActivityByType(String type) {
return activityMapper.getActivityByType(type);
}
}
```
3. 创建ActivityController.java文件
```java
@RestController
@RequestMapping("/activity")
public class ActivityController {
@Autowired
private ActivityService activityService;
@GetMapping("/type/{type}")
public List<Activity> getActivityByType(@PathVariable("type") String type) {
return activityService.getActivityByType(type);
}
}
```
4. 在前端使用Vue.js和ECharts动态显示数据。以下是示例代码:
```html
<template>
<div>
<div ref="chart" style="width:100%; height:500px;"></div>
</div>
</template>
<script>
import axios from 'axios';
import echarts from 'echarts';
export default {
mounted() {
this.loadData();
},
data() {
return {
data: [],
};
},
methods: {
loadData() {
axios.get('/activity/type/助老').then((response) => {
this.data = response.data;
this.drawChart();
});
},
drawChart() {
let chart = echarts.init(this.$refs.chart);
let option = {
title: {
text: '助老活动统计',
},
tooltip: {},
legend: {
data: ['活动人数'],
},
xAxis: {
data: this.data.map((item) => item.name),
},
yAxis: {},
series: [
{
name: '活动人数',
type: 'bar',
data: this.data.map((item) => item.count),
},
],
};
chart.setOption(option);
},
},
};
</script>
```
以上代码中,我们使用axios从后端获取数据,并使用ECharts动态绘制图表。注意,上述代码中的“助老”是示例中的活动类型,你需要根据实际情况修改为你的活动类型。