SpringBoot+Vue使用Echarts的方式

更新時(shí)間：2025年05月23日 09:45:48 作者：水星國王

這篇文章主要介紹了SpringBoot+Vue使用Echarts的方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

前言

在vue項(xiàng)目中使用echarts，本次演示是使用vue2

1 前端準(zhǔn)備

echarts官網(wǎng)：

https://echarts.apache.org/zh/index.html

官網(wǎng)提供了基本的使用說明和大量的圖表

1.1 下載echarts

執(zhí)行命令

npm install echarts

直接這樣執(zhí)行很可能會(huì)失敗，建議使用cnpm install echarts，前提是配置鏡像

這樣就代表下載echarts成功了

1.2 引入echarts

引入很簡單，只需要

// 引入echarts
import * as echarts from 'echarts';

1.3 使用echarts

使用echarts也分為幾個(gè)步驟，這里分開說明

1.3.1 準(zhǔn)備echarts容器

創(chuàng)建一個(gè)echarts容器，一般div即可

<div id="main" class="data-class"></div>

1.3.2 初始化echarts

這一步相當(dāng)于讓vue知道，我們要將一個(gè)id為main的容器為echarts展示

// 根據(jù)容器初始化echarts
const myChart = echarts.init(document.getElementById('main'));

1.3.3 渲染echarts

給myChart 渲染基本數(shù)據(jù)，包括標(biāo)題，樣式，xy軸等基本屬性，這里用的是官方demo

  // 繪制圖表
    myChart.setOption({
      title: {
        text: 'ECharts 入門示例'
      },
      tooltip: {},
      xAxis: {
        data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
      },
      yAxis: {},
      series: [
        {
          name: '銷量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });

這樣一個(gè)基本的基于vue使用echarts的demo就完事了，查看界面

完整代碼

<template>
  <div id="main" class="data-class"></div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts';
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
export default {
  name: "Data",
  data() {
    return {

    };
  },
  methods:{
  },
  mounted(){
    // 根據(jù)容器初始化echarts
    const myChart = echarts.init(document.getElementById('main'));
    // 繪制圖表
    myChart.setOption({
      title: {
        text: 'ECharts 入門示例'
      },
      tooltip: {},
      xAxis: {
        data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
      },
      yAxis: {},
      series: [
        {
          name: '銷量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  }
}



</script>

<style scoped>
.data-class{
  height: 300px;
  width: 100%;
}
</style>

2 使用接口完成

以上只是一個(gè)demo，工作中都需要統(tǒng)計(jì)業(yè)務(wù)數(shù)據(jù)，前后端共同完成

2.1 后端接口準(zhǔn)備

后端只需要提供一個(gè)接口，返回的格式根據(jù)圖表需要的數(shù)據(jù)格式進(jìn)行返回

這里使用隨機(jī)數(shù)模仿一個(gè)業(yè)務(wù)統(tǒng)計(jì)的接口，year代表年份，num代表數(shù)量

@GetMapping("/testStatistics")
    public Result testStatistics(){
        ArrayList<Map<String,Object>> resultList = new ArrayList<>();
        for (int i = 2018; i < 2025; i++) {
            Map<String, Object> resultMap = new HashMap<>();
            resultMap.put("year",i);
            resultMap.put("num", RandomUtil.randomInt(1000,10000));
            resultList.add(resultMap);
        }
        return Result.ok(resultList);
    }

返回的就是這樣的格式

2.2 前端渲染處理

前端只需要把后端返回的業(yè)務(wù)數(shù)據(jù)渲染到容器中即可，參考代碼：

<template>
  <div id="main" class="data-class"></div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts';
// 引入axios
import axios from "axios";
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
export default {
  name: "Data",
  data() {
    return {

    };
  },
  mounted(){
    // 請求接口返回視圖數(shù)據(jù)
    async function getData() {
      try {
        // 使用 await 等待異步請求完成
        const res = await axios.get('http://localhost:9090/statistics/testStatistics');
        // 返回所需數(shù)據(jù)
        return res.data.data;
      } catch (error) {
        // 處理請求錯(cuò)誤
        console.error('請求出錯(cuò):', error);
        throw error;
      }
    }
    // 異步獲取數(shù)據(jù)
    (async () => {
      const data = await getData();
      // 根據(jù)容器初始化echarts
      const myChart = echarts.init(document.getElementById('main'));
      // 繪制圖表
      myChart.setOption({
        title: {
          text: '年收入統(tǒng)計(jì)'
        },
        tooltip: {

        },
        xAxis: {
          data:data.map(item => item.year)
        },
        yAxis: {},
        series: [
          {
            name: '收入',
            type: 'bar',
            data: data.map(item => item.num)
          }
        ]
      });
    })();

  }
}



</script>

<style scoped>
.data-class{
  height: 300px;
  width: 100%;
}
</style>

查看效果