Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

以下是 “Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)”的完整攻略。

1. 环境搭建

首先需要安装好Node.js和npm, 安装好之后，通过npm安装vue-cli, 并用命令vue init webpack projectname创建项目。

npm install -g vue-cli
vue init webpack projectname

完成之后，安装所需要的ElementUI和echarts模块。

npm install element-ui --save
npm install echarts --save

2. 后端部分

后端使用Springboot，同时需要配置CORS跨域支持，这样才能把数据传递给前端。

首先在pom.xml中添加相关依赖。

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

<!--防止CORS攻击-->
<dependency>
    <groupId>org.springframework.security</groupId>
    <artifactId>spring-security-config</artifactId>
</dependency>

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

然后在application.properties中配置跨域请求相关的参数。

# 允许所有源访问
cors.allowed.origins = *
cors.allowed.methods = GET, POST, PUT, DELETE
cors.allowed.headers = Authorization,Content-Type

在Controller中添加接口，返回需要展示的数据。

@RequestMapping(value = "/ring", method = RequestMethod.GET)
public List<Integer> getRingData() {
    List<Integer> data = new ArrayList<Integer>(
            Arrays.asList(70, 30));
    return data;
}

3. 前端部分

在前端项目中，需要用到ElementUI和echarts库。

Vue中使用ElementUI库，加入代码

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

然后需要安装vue-axios库，用来进行AJAX请求。

npm i vue-axios -S

在main.js中引入。

import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);

接下来就可以通过vue-axios进行请求，把后端的数据获取到，并传递给echarts进行展示。

<template>
  <el-row>
    <el-col :span="12">
      <div ref="ring" :style="{ width: '300px', height: '300px', margin: '0 auto' }"></div>
    </el-col>
  </el-row>
</template>

<script>
import echarts from 'echarts';

export default {
  name: 'HelloWorld',
  data() {
    return {
      option: null
    }
  },
  mounted() {
    this.$axios.get('/ring').then(response => {
      this.renderChart(response.data[0], response.data[1]);
    }).catch(error => {
      console.log(error);
    });
  },
  methods: {
    renderChart(data1, data2) {
      var ring = echarts.init(this.$refs.ring);
      var option = {
        series: [
          {
            type: 'pie',
            radius: ['80%', '90%'],
            startAngle: 225,
            color: ['#1ccc6e', '#f0f2f5'],
            hoverAnimation: false,
            legendHoverLink: false,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: data1,
                itemStyle: {
                  normal: {
                    borderColor: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#1ccc6e' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#1ccc6e' // 100% 处的颜色
                        }
                      ],
                      globalCoord: false // 缺省为 false
                    }
                  }
                }
              },
              {
                value: data2,
              }
            ]
          }
        ]
      };
      ring.setOption(option);
    }
  }
}
</script>

4. 示例说明

示例1: 后端部分

在后端中，我们需要注意以下几点：

1. 保证所需要的依赖已添加

2. 正确配置CORS跨域参数

3. 编写需要返回数据的接口

比如，在Controller中的代码可以改为：

@RestController
@RequestMapping(value = "/api")
public class ApiController {

    @GetMapping("/ring")
    public List<Integer> getRingData() {
        return Arrays.asList(70, 30);
    }
}

示例2: 前端部分

在前端中，我们需要注意以下几点：

1. 使用ElementUI库和echarts库

2. 使用vue-axios库进行AJAX请求

3. 注意渲染图表的方式

比如，可以在Vue中添加下面代码：

<template>
  <div class="ring-chart" ref="chart"></div>
</template>

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

export default {
  name: 'RingChart',
  data () {
    return {
      data: []
    }
  },
  mounted () {
    this.chart = echarts.init(this.$refs.chart)
    axios.get('/api/ring').then((res) => {
      this.data = res.data
      this.renderChart()
    })
  },
  methods: {
    renderChart () {
      this.chart.setOption({
        series: [
          {
            name: '动态圆环图',
            type: 'pie',
            radius: ['70%', '90%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            data: [
              {
                value: this.data[0],
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(32,163,212,1)'
                  }, {
                    offset: 1,
                    color: 'rgba(9,136,213,1)'
                  }]),
                  label: {
                    normal: {
                      formatter: '{d} %',
                      textStyle: {
                        fontSize: 24
                      }
                    }
                  }
                }
              },
              {
                value: this.data[1],
                itemStyle: {
                  color: '#dcdfe2'
                }
              }]
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
.ring-chart {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
</style>

这些示例可以帮助开发人员更好地理解和实现该功能。