springboot+vue+mysql+echarts

Spring Boot是一个基于Spring框架的快速开发Web应用程序的框架，Vue是一种流行的JavaScript框架，用于构建用户界面，MySQL是一种流行的关系型数据库，Echarts是一个基于JavaScript的图表库，用于可视化数据。结合这些技术可以构建一个功能强大的Web应用程序，以下是一个简单的演示：

1.后端使用Spring Boot和Mybatis Plus连接MySQL数据库，提供API接口供前端调用，以下是一个简单的示例代码：

@RestController
@RequestMapping("/api")
public class DataController {

    @Autowired
    private DataService dataService;

    @GetMapping("/data")
    public List<Data> getData() {
        return dataService.getData();
    }
}

2.前端使用Vue和Element-UI构建用户界面，使用Echarts可视化数据，以下是一个简单的示例代码：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="value" label="值"></el-table-column>
    </el-table>
    <div ref="chart" style="height: 400px;"></div>
  </div>
</template>

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

export default {
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    axios.get('/api/data').then(response => {
      this.tableData = response.data
      this.renderChart()
    })
  },
  methods: {
    renderChart() {
      const chart = echarts.init(this.$refs.chart)
      const data = this.tableData.map(item => ({ name: item.name, value: item.value }))
      chart.setOption({
        title: { text: '数据可视化' },
        tooltip: {},
        xAxis: { data: data.map(item => item.name) },
        yAxis: {},
        series: [{
          name: '值',
          type: 'bar',
          data: data.map(item => item.value)
        }]
      })
    }
  }
}
</script>