用Echarts动态渲染饼图，Vue 2、Axios、Springboot强强联手

Android

2023-02-15 13:18:36

echarts、axios 和 Springboot：构建动态饼图的强强联合

在数据可视化的广阔天地中，echarts、axios 和 Springboot 这三个强大的工具正携手创造非凡。它们的联合为我们开启了一扇大门，让我们得以轻松构建动态的、引人入胜的数据可视化作品。

了解 echarts、axios 和 Springboot

echarts ，一个数据可视化开源库，以其绘制各种图表的能力而闻名，包括饼图、折线图和柱状图。它提供了丰富的选项和配置，让定制图表变得轻而易举。

axios ，一个 HTTP 请求库，可用于发送各种 HTTP 请求，例如 GET、POST、PUT 和 DELETE。它以其易用性和对不同网络环境的适应性而受到青睐。

Springboot ，一个 Java 框架，旨在简化 Java 应用程序的开发。它提供自动配置和简化配置的功能，使构建应用程序变得更加容易。

创建一个 Vue 2 项目

为了展示 echarts、axios 和 Springboot 的威力，我们将构建一个 Vue 2 项目，并创建一个动态渲染的饼图。

首先，创建一个新的 Vue 2 项目：

vue create echarts-axios-springboot

接下来，安装必要的依赖项：

npm install echarts axios

在 main.js 文件中，配置 echarts 和 axios：

import Vue from 'vue'
import App from './App.vue'
import echarts from 'echarts'
import axios from 'axios'

Vue.prototype.$echarts = echarts
Vue.prototype.$axios = axios

new Vue({
  render: h => h(App),
}).$mount('#app')

后端接口开发

为了获取饼图数据，我们需要在 Springboot 项目中开发一个后端接口。创建一个新的 Controller 类，例如 MyController.java：

@RestController
public class MyController {

    @RequestMapping(value = "/getChartData", method = RequestMethod.GET)
    public List<ChartData> getChartData() {
        List<ChartData> chartData = new ArrayList<>();

        ChartData data1 = new ChartData("Apple", 30);
        ChartData data2 = new ChartData("Orange", 20);
        ChartData data3 = new ChartData("Banana", 15);

        chartData.add(data1);
        chartData.add(data2);
        chartData.add(data3);

        return chartData;
    }
}

启动 Springboot 项目并确保它正常运行。

前端饼图渲染

在 Vue 项目中，创建一个名为 Chart.vue 的组件，用于渲染饼图：

<template>
  <div>
    <div id="pie-chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  name: 'Chart',
  data() {
    return {
      chart: null,
      chartData: [],
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs['pie-chart'])
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.$axios.get('/getChartData')
        .then(response => {
          this.chartData = response.data
          this.renderChart()
        })
        .catch(error => {
          console.log(error)
        })
    },
    renderChart() {
      const option = {
        title: {
          text: 'Fruit Sales',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            type: 'pie',
            data: this.chartData,
          },
        ],
      }

      this.chart.setOption(option)
    },
  },
}
</script>

在 App.vue 文件中，注册 Chart 组件：

<template>
  <div id="app">
    <Chart></Chart>
  </div>
</template>

<script>
import Chart from './components/Chart.vue'

export default {
  name: 'App',
  components: {
    Chart,
  },
}
</script>