SpringBoot+Vue使用Echarts的方式
目录
- 前言
- 1 前端准备
- 1.1 下载echarts
- 1.2 引入echarts
- 1.3 使用echarts
- 1.3.1 准备echarts容器
- 1.3.2 初始化echarts
- 1.3.3 渲染echarts
- 2 使用接口完成
- 2.1 后端接口准备
- 2.2 前端渲染处理
- 总结
前言
在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: [ { n编程ame: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] });
这样一个基本的基于vue使用echarts的demo就完事了,查看界面
完整代码
<templa编程客栈te> <div id="main" class="data-class"></div> </template> <script> // 引入echarts import * as echarts from 'echarts'; // 基于准备好的dom,初始化echarts实例 export default { name: "Data", d编程ata() { 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 ArrayL编程客栈ist<>(); for (int iYUpsAisM = 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>
查看效果
总结
总体还是很简单的,只需要根据视图需要的数据格式和后端沟通好返回的格式
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程客栈(www.devze.com)。
精彩评论