springboot vue统计图表代码

以下是一个使用Spring Boot和Vue.js实现的统计图表的示例代码：

1. 后端代码

首先，我们需要创建Spring Boot应用程序，并添加以下依赖项：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger2</artifactId>
    <version>2.9.2</version>
</dependency>

<dependency>
    <groupId>io.springfox</groupId>
    <artifactId>springfox-swagger-ui</artifactId>
    <version>2.9.2</version>
</dependency>

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
</dependency>

然后，我们需要定义数据模型和控制器，以便我们可以从前端获取数据并返回统计结果。

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Data {
    private String name;
    private int value;
}

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

    @GetMapping("/data")
    public List<Data> getData() {
        List<Data> dataList = new ArrayList<>();
        dataList.add(new Data("A", 10));
        dataList.add(new Data("B", 20));
        dataList.add(new Data("C", 30));
        return dataList;
    }
}

2. 前端代码

我们将使用Vue.js来构建前端应用程序，并使用echarts.js来绘制统计图表。首先需要安装Vue.js和echarts.js：

npm install vue echarts --save

然后，我们需要在Vue应用程序中添加以下代码：

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <div class="card">
          <div class="card-body">
            <div class="chart-container" ref="chart"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  name: 'App',
  data () {
    return {
      data: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      axios.get('/api/data').then(response => {
        this.data = response.data
        this.renderChart()
      }).catch(error => {
        console.log(error)
      })
    },
    renderChart () {
      const chart = echarts.init(this.$refs.chart)
      const xData = []
      const yData = []
      this.data.forEach(item => {
        xData.push(item.name)
        yData.push(item.value)
      })
      chart.setOption({
        title: {
          text: '统计图表'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: yData,
          type: 'bar'
        }]
      })
    }
  }
}
</script>

在上面的代码中，我们首先使用axios从后端获取数据，然后使用echarts.js绘制统计图表。我们将图表容器的引用存储在$refs中，然后在renderChart()方法中使用它来初始化echarts实例并绘制图表。

3. 运行代码

最后，我们需要使用以下命令启动后端和前端应用程序：

mvn spring-boot:run

npm run serve

然后，我们可以在浏览器中访问http://localhost:8080来查看统计图表。