springboot vue动态统计图表代码

这里提供一个基于Spring Boot和Vue.js的动态统计图表例子。这个例子使用了ECharts图表库来绘制图表。

1. 在Spring Boot中，需要在pom.xml中添加以下依赖：

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>echarts</artifactId>
    <version>4.9.0</version>
</dependency>

2. 在Vue.js中，需要在index.html中引入ECharts的js和css文件：

<!-- 引入 ECharts 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 引入 ECharts 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.css">

3. 在Vue.js中，需要在组件中定义一个div元素作为图表的容器，并在mounted()函数中使用ECharts初始化图表。例如：

<template>
  <div id="chart-container"></div>
</template>
<script>
  export default {
    mounted() {
      // 初始化 ECharts 实例
      const chart = echarts.init(document.getElementById('chart-container'));
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '动态统计图表',
        },
        tooltip: {},
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20, 30],
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      chart.setOption(option);
    },
  };
</script>

4. 在Spring Boot中，需要在Controller中提供一个接口，用于返回图表数据。例如：

@RestController
@RequestMapping("/api")
public class ChartController {
 
    @GetMapping("/chart-data")
    public Map<String, Object> getChartData() {
        Map<String, Object> data = new HashMap<>();
        // 生成随机数据
        int[] dataArray = new int[7];
        Random random = new Random();
        for (int i = 0; i < 7; i++) {
            dataArray[i] = random.nextInt(50);
        }
        // 将数据放入返回的Map中
        data.put("xAxisData", new String[]{"周一", "周二", "周三", "周四", "周五", "周六", "周日"});
        data.put("seriesData", dataArray);
        return data;
    }
}

5. 在Vue.js中，使用axios库来请求接口，并将返回的数据更新到图表中。例如：

<template>
  <div id="chart-container"></div>
</template>
<script>
  import axios from 'axios';
  export default {
    mounted() {
      // 初始化 ECharts 实例
      const chart = echarts.init(document.getElementById('chart-container'));
      // 使用 axios 请求接口获取数据
      axios.get('/api/chart-data')
        .then(response => {
          // 从返回的数据中获取 x 轴和 y 轴的数据
          const xAxisData = response.data.xAxisData;
          const seriesData = response.data.seriesData;
          // 指定图表的配置项和数据
          const option = {
            title: {
              text: '动态统计图表',
            },
            tooltip: {},
            xAxis: {
              data: xAxisData,
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: seriesData,
              },
            ],
          };
          // 使用刚指定的配置项和数据显示图表。
          chart.setOption(option);
        })
        .catch(error => {
          console.log(error);
        });
    },
  };
</script>

这样，一个基于Spring Boot和Vue.js的动态统计图表就完成了。