vue+springboot折线统计图

### 使用 Vue 和 Spring Boot 实现折线统计图 #### 1. 安装 ECharts 库 为了在 Vue 中使用 ECharts 创建折线图，首先需要安装 ECharts。可以通过 npm 来安装： ```bash npm install echarts --save ``` 这一步骤确保了可以在项目中引入并使用 ECharts 的功能[^1]。 #### 2. 编写前端代码展示折线图 接下来，在 Vue 组件内初始化 ECharts 并设置折线图的数据结构。下面是一个简单的例子来说明如何创建一个基础的折线图组件 `LineChart.vue`: ```vue <template> <div ref="lineChart" style="width: 600px;height:400px;"></div> </template> <script> import * as echarts from 'echarts'; export default { name: "LineChart", mounted() { this.initChart(); }, methods: { initChart() { const chartDom = this.$refs.lineChart; const myChart = echarts.init(chartDom); var option; option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }] }; option && myChart.setOption(option); } } } </script> ``` 这段代码展示了如何利用 ECharts 初始化一个折线图实例，并设置了 X 轴的时间序列以及 Y 轴对应的数值数据。 #### 3. 后端提供 API 接口返回 JSON 数据 为了让图表动态显示实际数据而不是静态示例数据，需构建 RESTful 风格的服务接口供前端调用。这里假设已经有一个名为 `StatisticsController.java` 的控制器类用于处理统计数据请求： ```java @RestController @RequestMapping("/api/statistics") public class StatisticsController { @GetMapping("/lineData") public ResponseEntity<List<Integer>> getLineChartData(){ List<Integer> lineData = Arrays.asList(150, 230, 224, 218, 135, 147, 260); // 示例数据 return new ResponseEntity<>(lineData, HttpStatus.OK); } } ``` 此 Java 方法定义了一个 GET 请求处理器 `/api/statistics/lineData` 返回了一组整数列表作为响应体给客户端应用。 #### 4. 修改前端代码从服务器获取真实数据 最后修改前面编写的 Vue 组件逻辑部分，使其能够向后端发起 HTTP 请求从而获得最新的数据更新图表视图。可以借助 axios 或者 fetch 进行网络通信操作： ```javascript methods: { async fetchDataAndInitChart() { try { let response = await axios.get('/api/statistics/lineData'); let newData = response.data; const chartDom = this.$refs.lineChart; const myChart = echarts.init(chartDom); let updatedOption = { ...this.option, series: [{...this.option.series[0], data: newData}] }; myChart.setOption(updatedOption); } catch (error) { console.error('Error fetching or setting up the chart:', error); } } }, mounted() { this.fetchDataAndInitChart(); } ``` 上述 JavaScript 函数实现了异步加载来自服务器的新鲜数据并将这些数据显示于页面上的折线图之中。