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(){// 根据容器初始化echartsconst 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();// 根据容器初始化echartsconst 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>

查看效果

在这里插入图片描述