在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
2023-09-14 09:07:25 时间
文章目录
1、实现的效果
2、前端代码
<template>
<div>
<h3 style="color: black;text-align: left">汽车租赁情况数据分析</h3>
<hr>
<div ref="chart2" style="width:50%;height:376px; float: left"></div>
<div style="width:50%;height:376px;float: right" ref="chart"></div>
<div style="width:100%;height:376px;float: left">
<div style="margin-top: 5px">
<hr>
<h1 style="float: left">友情提示:</h1><br><br><br><br>
<span style="float: left">1、商家可以根据租赁汽车的排名情况、加大对热门汽车的推广和上新</span>
<br><br>
<span style="float: left">2、根据各类汽车租赁情况的总体展示,及时调整汽车商品的管理</span>
<br><br>
<span style="float: left">3、商家可以及时了解用户对租赁汽车商品的租赁情况</span>
</div>
</div>
</div>
</template>
<script>
//局部引用
const echarts = require('echarts');
export default{
data(){
return {
}
},
methods: {
initCharts2(){
const _this = this
// 基于准备好的dom,初始化echarts实例
let myChart2 = echarts.init(this.$refs.chart2);
var values =[];
//请求后台数据
axios.get('/static/getcarranking').then(function (resp) {
if(resp.data.code==200){
console.log(resp.data.data.carRank.length)
console.log(resp)
for( var i =0;i<resp.data.data.carRank.length;i++){
var test={"value":resp.data.data.carRank[i].value,"name":resp.data.data.carRank[i].name}
values.push(test);
}
// 绘制图表
myChart2.setOption({
title: {
text: '汽车租赁排名前六展示',
left:'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient:'vertical',
left: 'left',
data:values
},
series: [
{
name: '数据来源',
type: 'pie',
radius:'60%',
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: values
}
]
});
}
})
},
initCharts(){
const _this =this
// 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(this.$refs.chart);
var names=[]; //横坐标数组
var values =[]; //纵坐标数组
//请求后台数据
axios.get('/static/getcartypenum').then(function (resp) {
if(resp.data.code==200){
console.log(resp.data.data.carTypeNum.length)
console.log(resp)
for( var i =0;i<resp.data.data.carTypeNum.length;i++){
names.push(resp.data.data.carTypeNum[i].name);
values.push(resp.data.data.carTypeNum[i].value);
}
// 绘制图表
myChart.setOption({
title: { text: '不同类型汽车租赁情况' },
tooltip: {},
xAxis: {
data: names
},
yAxis: {},
series: [{
name: '租赁数量',
type: 'bar',
data: values
}]
});
}
})
}
},
//一加载页面就调用
mounted () {
this.initCharts();
this.initCharts2();
}
}
</script>
<style>
</style>
3、后端controller代码
package com.zheng.yu.controller;
import com.zheng.yu.config.response.Result;
import com.zheng.yu.pojo.Wallet;
import com.zheng.yu.service.*;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiModel;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Api(value = "数据分析", tags = "数据分析")
@ApiModel
@RestController
public class DataStatisticsController {
@Autowired
DataStatisticsService dataStatisticsService;
@Autowired
UserService userService;
@Autowired
OrderService orderService;
@Autowired
CarService carService;
@Autowired
WalletService walletService;
//查询汽车租赁情况
@RequestMapping(value = "/static/getcarranking", method = RequestMethod.GET)
public Result getCarRanking(){
List<HashMap<String, Object>> list = dataStatisticsService.getCarRanking();
System.out.println(list);
return Result.ok().data("carRank",list);
}
//不同类型的汽车的销量
@RequestMapping(value = "/static/getcartypenum", method = RequestMethod.GET)
public Result getCarTypeNum(){
Map<String, String> map = new HashMap<String, String>();
// List<HashMap<String, String>> list = mapper.getRentAmountMonthDetail(startTime, endTime);
List<HashMap<String, Object>> list = dataStatisticsService.getCarTypeNum();
System.out.println(list);
return Result.ok().data("carTypeNum",list);
}
}
4、servie层代码
package com.zheng.yu.service;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public interface DataStatisticsService {
//查询各种汽车的租赁数量
public List<HashMap<String, Object>> getCarTypeNum();
//查询汽车的租赁排行情况
public List<HashMap<String,Object>> getCarRanking();
}
5、serviceImpl层代码
package com.zheng.yu.service.Impl;
import com.zheng.yu.mapper.DataStatisticsMapper;
import com.zheng.yu.service.DataStatisticsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service
public class DataStatisticsServiceImpl implements DataStatisticsService {
@Autowired
DataStatisticsMapper dataStatisticsMapper;
// 查询各种汽车的租赁数量
public List<HashMap<String, Object>> getCarTypeNum() {
return dataStatisticsMapper.getCarTypeNum();
}
//查询汽车的租赁排行情况
public List<HashMap<String, Object>> getCarRanking() {
return dataStatisticsMapper.getCarRanking();
}
}
6、mapper层代码
package com.zheng.yu.mapper;
import org.apache.ibatis.annotations.Mapper;
import org.springframework.stereotype.Repository;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Mapper
@Repository
public interface DataStatisticsMapper {
//查询各种汽车的租赁数量
public List<HashMap<String, Object>> getCarTypeNum();
//查询汽车的租赁排行情况
public List<HashMap<String,Object>> getCarRanking();
}
7、xml中的sql语句
<?xml version="1.0" encoding="UTF8"?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zheng.yu.mapper.DataStatisticsMapper">
<!-- 查询汽车类型总的租赁情况-->
<select id="getCarTypeNum" resultType="java.util.HashMap">
select type as name ,count(type) as value from carshop.order_item group by type
</select>
<select id="getCarRanking" resultType="java.util.HashMap">
select name ,count(name) as value from carshop.order_item
group by name
order by count(name) desc limit 6
</select>
</mapper>
8、遇到的问题
8.1 怎样将查询的结果封装成map ?
解决方法:resultType=“java.util.HashMap”
接收查询出来的结果 : List<HashMap<String,Object>>
8.2 怎样在一个页面中同时设置几个表格?
直接写在方法里进行,有几个表格就写几个方法
基本流程:
- 1、基于准备好的dom,初始化echarts实例(自己设置的div,就是图表放置的位置)
- 2、方法的调用,将后端的数据拿到,赋予给前端的数据集合
- 3、绘制图标、将数据替换(数据库中的数据替换假数据)
- 4、加载页面调用,进行方法的初始化
相关文章
- Java项目毕业设计:基于springboot+vue的电影视频网站系统「建议收藏」
- 尚硅谷Vue课程P30-P35笔记(后台回复 vue 可获得更多笔记!)
- SpringBoot前后端数据传输加密「建议收藏」
- 使用SpringBoot RestTemplate实现第三方接口对接
- springboot事物oracle,SpringBoot 事务管理
- SpringBoot+SpringCloud面试题整理
- SpringBoot 入门爬虫项目实战
- 细说分片上传与极速秒传(SpringBoot+Vue实现)
- Vue笔记(10) vue-router
- 【说站】Springboot如何从yml或properties配置文件中获取属性值
- idea springboot项目搭建_idea社区版配置Tomcat
- 20-SpringBoot整合RabbitMQ
- springcloud实战:springboot的核心原理
- Java项目分享-SpringBoot + Vue + MyBatis 音乐网站项目
- 在网页文档中引入Vue.js的方法有哪些?_vue直接引入js文件没有用
- springboot多环境配置文件_Springboot教程
- SpringBoot + Vue 学生选课管理系统源码(包含数据库文件)
- 基于SSM+SpringBoot+Vue+ElmentUI实现公司案件管理系统
- java基于springboot外卖系统在线订餐系统app源码厨艺论坛APP
- 【springboot项目】纳米搜索引擎
- 3-2. SpringBoot项目集成【用户身份认证】实战 【实战核心篇】基于JWT生成和校验Token
- Springboot整合Redis与数据持久化
- springboot数据库连接池使用策略详解编程语言
- SpringBoot+vue前后端开发学习笔记3详解编程语言
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- 使用Vue框架使用MSSQL数据库实现快速开发(vue mssql)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- 优化网站性能,Vue搭配Redis缓存更加有效(vue使用redis缓存)
- Vue搭配Redis做针对性取值(vue redis取值)
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)