springboot和vue和mybatis-plus怎么根据数据库表中的不同活动类型活动把数据在前端动态显示echarts图,数据库表activity,活动类型type,活动类型包括助老和助残,请给出代码

首先，我们需要在后端通过Springboot和Mybatis-Plus实现对数据库表的查询操作，并将查询到的结果以JSON格式返回给前端。具体代码如下：

@RestController
@RequestMapping("/activity")
public class ActivityController {
    
    @Autowired
    private ActivityService activityService;
    
    @GetMapping("/listByType")
    public List<Activity> getActivityListByType(@RequestParam("type") String type) {
        return activityService.getActivityListByType(type);
    }
}

上述代码中，我们通过@GetMapping注解将请求路径映射到方法getActivityListByType上，并使用@RequestParam注解获取请求参数type。在方法中调用ActivityService的getActivityListByType方法，该方法将会根据type参数从数据库中查询数据，并返回一个List<Activity>类型的对象。Springboot会将该对象转换为JSON格式并返回给前端。

接下来，我们需要在前端使用Vue.js实现对后端API的调用，并在页面中使用Echarts动态展示数据。具体代码如下：

<template>
  <div class="activity">
    <div class="activity-type">
      <button @click="setType('助老')">助老</button>
      <button @click="setType('助残')">助残</button>
    </div>
    <div class="activity-chart">
      <echarts :options="chartOptions"></echarts>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import echarts from 'echarts'

export default {
  name: 'Activity',
  components: {
    echarts
  },
  data() {
    return {
      type: '助老',
      chartOptions: {}
    }
  },
  created() {
    this.updateChart()
  },
  methods: {
    setType(type) {
      this.type = type
      this.updateChart()
    },
    updateChart() {
      axios.get(`/activity/listByType?type=${this.type}`).then(res => {
        const data = res.data.map(item => {
          return {
            name: item.name,
            value: item.count
          }
        })
        this.chartOptions = {
          title: {
            text: `${this.type}活动统计`,
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            bottom: 10,
            left: 'center',
            data: data.map(item => item.name)
          },
          series: [
            {
              name: '活动统计',
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: data.sort((a, b) => a.value - b.value),
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              label: {
                formatter: '{b}: {c} ({d}%)'
              },
              labelLine: {
                length: 10,
                length2: 20
              }
            }
          ]
        }
      })
    }
  }
}
</script>

<style scoped>
.activity {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.activity-type {
  margin-top: 20px;
}

.activity-type button {
  margin-left: 10px;
}

.activity-chart {
  width: 800px;
  height: 600px;
  margin-top: 20px;
}
</style>

上述代码中，我们使用Vue.js实现了一个简单的活动统计页面。该页面包括一个活动类型选择区域和一个Echarts图表展示区域。在页面加载时，我们会调用updateChart方法获取默认类型（助老）的活动数据，并将数据转换为Echarts所需的格式。然后我们使用Echarts组件展示数据，并通过setType方法实现切换活动类型的功能。

在updateChart方法中，我们使用axios库向后端发送请求，并通过res.data获取后端返回的数据。然后我们将数据转换为Echarts所需的格式，并通过this.chartOptions将数据赋值给Echarts组件的options属性。最后，Echarts自动根据options属性中的数据生成图表。

需要注意的是，上述代码中的ActivityService和Activity在我这里只是示例代码，具体实现需要根据你自己的数据库表结构进行调整。