脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → SpringBoot+Vue使用Echarts

SpringBoot+Vue使用Echarts的方式

 更新时间：2025年05月23日 09:45:48   作者：水星国王  
这篇文章主要介绍了SpringBoot+Vue使用Echarts的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

前言

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

1 前端准备

echarts官网：

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

官网提供了基本的使用说明和大量的图表

1.1 下载echarts

执行命令

npm install echarts

直接这样执行很可能会失败，建议使用cnpm install echarts，前提是配置镜像

这样就代表下载echarts成功了

1.2 引入echarts

引入很简单，只需要

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

1.3 使用echarts

使用echarts也分为几个步骤，这里分开说明

1.3.1 准备echarts容器

创建一个echarts容器，一般div即可

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

1.3.2 初始化echarts

这一步相当于让vue知道，我们要将一个id为main的容器为echarts展示

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

1.3.3 渲染echarts

给myChart 渲染基本数据，包括标题，样式，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(){
    // 根据容器初始化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，工作中都需要统计业务数据，前后端共同完成

2.1 后端接口准备

后端只需要提供一个接口，返回的格式根据图表需要的数据格式进行返回

这里使用随机数模仿一个业务统计的接口，year代表年份，num代表数量

@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 前端渲染处理

前端只需要把后端返回的业务数据渲染到容器中即可，参考代码：

<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(){
    // 请求接口返回视图数据
    async function getData() {
      try {
        // 使用 await 等待异步请求完成
        const res = await axios.get('http://localhost:9090/statistics/testStatistics');
        // 返回所需数据
        return res.data.data;
      } catch (error) {
        // 处理请求错误
        console.error('请求出错:', error);
        throw error;
      }
    }
    // 异步获取数据
    (async () => {
      const data = await getData();
      // 根据容器初始化echarts
      const myChart = echarts.init(document.getElementById('main'));
      // 绘制图表
      myChart.setOption({
        title: {
          text: '年收入统计'
        },
        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>

查看效果

总结

总体还是很简单的，只需要根据视图需要的数据格式和后端沟通好返回的格式

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • PowerJob分布式任务调度源码流程解读

    PowerJob分布式任务调度源码流程解读

    这篇文章主要为大家介绍了PowerJob分布式任务调度源码流程解读,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-02-02
  • 解决SpringMVC获取请求参数乱码问题

    解决SpringMVC获取请求参数乱码问题

    在使用SpringMVC和thymeleaf进行请求参数处理时,可能会遇到乱码问题,对于GET方法乱码,可通过修改Tomcat的server.xml文件,添加URIEncoding="UTF-8"解决,而POST方法乱码,则需在web.xml配置SpringMVC提供的过滤器
    2024-11-11
  • HttpMessageConverter报文信息转换器的深入讲解

    HttpMessageConverter报文信息转换器的深入讲解

    在Spring中内置了大量的HttpMessageConverter,通过请求头信息中的MIME类型,选择相应的HttpMessageConverter,这篇文章主要给大家介绍了关于HttpMessageConverter报文信息转换器的相关资料,需要的朋友可以参考下
    2022-01-01
  • 使用Spring Cache时设置缓存键的注意事项详解

    使用Spring Cache时设置缓存键的注意事项详解

    在现代的Web应用中,缓存是提高系统性能和响应速度的重要手段之一,Spring框架提供了强大的缓存支持,通过​​@Cacheable​​、​​@CachePut​​、​​@CacheEvict​​等注解可以方便地实现缓存功能,本文给大家介绍了使用Spring Cache时设置缓存键的注意事项
    2025-01-01
  • 关于BigDecimal类型数据的绝对值和相除求百分比

    关于BigDecimal类型数据的绝对值和相除求百分比

    这篇文章主要介绍了关于BigDecimal类型数据的绝对值和相除求百分比,Java在java.math包中提供的API类BigDecimal，用来对超过16位有效位的数进行精确的运算,需要的朋友可以参考下
    2023-07-07
  • Java Jmeter全局变量设置过程图解

    Java Jmeter全局变量设置过程图解

    这篇文章主要介绍了Java Jmeter全局变量设置过程图解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • SpringMVC HttpMessageConverter报文信息转换器

    SpringMVC HttpMessageConverter报文信息转换器

    ​​HttpMessageConverter​​​，报文信息转换器，将请求报文转换为Java对象，或将Java对象转换为响应报文。​​​HttpMessageConverter​​​提供了两个注解和两个类型：​​@RequestBody，@ResponseBody​​​，​​RequestEntity，ResponseEntity​​
    2023-01-01
  • 举例讲解Java的Jackson库中ObjectMapper类的使用

    举例讲解Java的Jackson库中ObjectMapper类的使用

    这篇文章主要介绍了举例讲解Java的Jackson库中ObjectMapper类的使用,Jackson库通常被用来实现Java的对象和JSON之间的转换功能,需要的朋友可以参考下
    2016-01-01
  • Java Structs框架原理案例详解

    Java Structs框架原理案例详解

    这篇文章主要介绍了Java Structs框架原理案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • spring bean标签中的init-method和destroy-method详解

    spring bean标签中的init-method和destroy-method详解

    这篇文章主要介绍了spring bean标签中的init-method和destroy-method,在很多项目中，经常在xml配置文件中看到init-method 或者 destroy-method ，因此整理收集下，方便以后参考和学习，需要的朋友可以参考下
    2023-04-04

最新评论