SpringBoot+Vue使用Echarts的方式

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

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

前言

在vue項目中使用echarts，本次演示是使用vue2

1 前端準備

echarts官網(wǎng)：

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

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

1.1 下載echarts

執(zhí)行命令

npm install echarts

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

這樣就代表下載echarts成功了

1.2 引入echarts

引入很簡單，只需要

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

1.3 使用echarts

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

1.3.1 準備echarts容器

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

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

1.3.2 初始化echarts

這一步相當于讓vue知道，我們要將一個id為main的容器為echarts展示

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

1.3.3 渲染echarts

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

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

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

完整代碼

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

<script>
// 引入echarts
import * as echarts from 'echarts';
// 基于準備好的dom，初始化echarts實例
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 使用接口完成

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

2.1 后端接口準備

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

這里使用隨機數(shù)模仿一個業(yè)務統(tǒng)計的接口，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è)務數(shù)據(jù)渲染到容器中即可，參考代碼：

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

<script>
// 引入echarts
import * as echarts from 'echarts';
// 引入axios
import axios from "axios";
// 基于準備好的dom，初始化echarts實例
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) {
        // 處理請求錯誤
        console.error('請求出錯:', 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)計'
        },
        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>

查看效果

總結

總體還是很簡單的，只需要根據(jù)視圖需要的數(shù)據(jù)格式和后端溝通好返回的格式

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

PowerJob分布式任務調度源碼流程解讀
這篇文章主要為大家介紹了PowerJob分布式任務調度源碼流程解讀,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2024-02-02
解決SpringMVC獲取請求參數(shù)亂碼問題
在使用SpringMVC和thymeleaf進行請求參數(shù)處理時,可能會遇到亂碼問題,對于GET方法亂碼,可通過修改Tomcat的server.xml文件,添加URIEncoding="UTF-8"解決,而POST方法亂碼,則需在web.xml配置SpringMVC提供的過濾器
2024-11-11
HttpMessageConverter報文信息轉換器的深入講解
在Spring中內置了大量的HttpMessageConverter,通過請求頭信息中的MIME類型,選擇相應的HttpMessageConverter,這篇文章主要給大家介紹了關于HttpMessageConverter報文信息轉換器的相關資料,需要的朋友可以參考下
2022-01-01
使用Spring Cache時設置緩存鍵的注意事項詳解
在現(xiàn)代的Web應用中,緩存是提高系統(tǒng)性能和響應速度的重要手段之一,Spring框架提供了強大的緩存支持,通過??@Cacheable??、??@CachePut??、??@CacheEvict??等注解可以方便地實現(xiàn)緩存功能,本文給大家介紹了使用Spring Cache時設置緩存鍵的注意事項
2025-01-01
關于BigDecimal類型數(shù)據(jù)的絕對值和相除求百分比
這篇文章主要介紹了關于BigDecimal類型數(shù)據(jù)的絕對值和相除求百分比,Java在java.math包中提供的API類BigDecimal，用來對超過16位有效位的數(shù)進行精確的運算,需要的朋友可以參考下
2023-07-07
Java Jmeter全局變量設置過程圖解
這篇文章主要介紹了Java Jmeter全局變量設置過程圖解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-05-05
SpringMVC HttpMessageConverter報文信息轉換器
??HttpMessageConverter???，報文信息轉換器，將請求報文轉換為Java對象，或將Java對象轉換為響應報文。???HttpMessageConverter???提供了兩個注解和兩個類型：??@RequestBody，@ResponseBody???，??RequestEntity，ResponseEntity??
2023-01-01
舉例講解Java的Jackson庫中ObjectMapper類的使用
這篇文章主要介紹了舉例講解Java的Jackson庫中ObjectMapper類的使用,Jackson庫通常被用來實現(xiàn)Java的對象和JSON之間的轉換功能,需要的朋友可以參考下
2016-01-01
Java Structs框架原理案例詳解
這篇文章主要介紹了Java Structs框架原理案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下
2021-08-08
spring?bean標簽中的init-method和destroy-method詳解
這篇文章主要介紹了spring?bean標簽中的init-method和destroy-method,在很多項目中，經常在xml配置文件中看到init-method 或者 destroy-method ，因此整理收集下，方便以后參考和學習，需要的朋友可以參考下
2023-04-04