springboot配合mybatis整合vue中的echarts

首先，你需要在Spring Boot项目中添加MyBatis和MyBatis-Spring-Boot-Starter依赖，这可以通过在pom.xml文件中添加以下代码实现：

<!-- MyBatis -->
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.2.0</version>
</dependency>

然后，你需要配置MyBatis的数据源，这可以通过在application.properties文件中添加以下代码实现：

spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

接下来，你需要创建数据访问层DAO，这可以通过在Spring Boot项目中创建一个包并添加以下代码实现：

@Mapper
public interface MyDAO {
    List<Map<String, Object>> queryData();
}

然后，你需要在MyBatis的Mapper中编写SQL语句，这可以通过在resources/mapper目录下创建一个XML文件并添加以下代码实现：

<mapper namespace="com.example.demo.dao.MyDAO">
    <select id="queryData" resultType="java.util.Map">
        SELECT * FROM data_table
    </select>
</mapper>

最后，你需要在Spring Boot的Controller中编写代码，将查询结果传递给前端页面，这可以通过在Spring Boot项目中创建一个Controller并添加以下代码实现：

@RestController
public class MyController {
    @Autowired
    private MyDAO myDAO;

    @GetMapping("/data")
    public List<Map<String, Object>> getData() {
        return myDAO.queryData();
    }
}

然后，在Vue项目中使用axios库来调用Spring Boot的Controller，获取数据并使用Echarts进行可视化展示，这可以通过在Vue项目中添加以下代码实现：

<template>
  <div id="chart" style="width: 100%; height: 400px;"></div>
</template>

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

export default {
  mounted() {
    axios.get('/data').then(res => {
      const data = res.data
      const chartData = []
      for (let i = 0; i < data.length; i++) {
        chartData.push([data[i].name, data[i].value])
      }
      const chart = echarts.init(document.getElementById('chart'))
      chart.setOption({
        title: {
          text: 'Echarts 数据可视化'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: chartData.map(item => item[0])
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: chartData.map(item => item[1]),
          type: 'bar'
        }]
      })
    })
  }
}
</script>

这样，你就可以在Vue中使用Echarts对Spring Boot和MyBatis查询结果进行可视化展示了。