在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作

简介: 这篇文章介绍了如何在Vue页面中结合SpringBoot、MyBatis、ElementUI和ECharts,实现从数据库获取数据并展示为图表的过程,包括前端和后端的代码实现以及遇到的问题和解决方法。

文章目录

    • 1、实现的效果
    • 2、前端代码
    • 3、后端controller代码
    • 4、servie层代码
    • 5、serviceImpl层代码
    • 6、mapper层代码
    • 7、xml中的sql语句
    • 8、遇到的问题
      • 8.1 怎样将查询的结果封装成map ?
      • 8.2 怎样在一个页面中同时设置几个表格?

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>

8.2 怎样在一个页面中同时设置几个表格?

直接写在方法里进行,有几个表格就写几个方法
基本流程:

  • 1、基于准备好的dom,初始化echarts实例(自己设置的div,就是图表放置的位置)
  • 2、方法的调用,将后端的数据拿到,赋予给前端的数据集合
  • 3、绘制图标、将数据替换(数据库中的数据替换假数据)
  • 4、加载页面调用,进行方法的初始化
相关文章
|
12天前
|
JavaScript 定位技术
echarts地图数据信息流向图效果
本文介绍了如何使用 ECharts 创建一个地图数据信息流向图效果,包括设置地理坐标、线条动画和流向图的实现方法,并通过 Vue.js 封装了一个可重用的 ECharts 地图组件。
62 23
echarts地图数据信息流向图效果
|
12天前
|
关系型数据库 MySQL 数据库
ORM对mysql数据库中数据进行操作报错解决
ORM对mysql数据库中数据进行操作报错解决
36 2
|
10天前
|
Java 数据库连接 数据库
spring复习05,spring整合mybatis,声明式事务
这篇文章详细介绍了如何在Spring框架中整合MyBatis以及如何配置声明式事务。主要内容包括:在Maven项目中添加依赖、创建实体类和Mapper接口、配置MyBatis核心配置文件和映射文件、配置数据源、创建sqlSessionFactory和sqlSessionTemplate、实现Mapper接口、配置声明式事务以及测试使用。此外,还解释了声明式事务的传播行为、隔离级别、只读提示和事务超时期间等概念。
spring复习05,spring整合mybatis,声明式事务
|
10天前
|
JavaScript Java 关系型数据库
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
本文介绍了一个基于Spring Boot和Vue.js实现的在线考试系统。随着在线教育的发展,在线考试系统的重要性日益凸显。该系统不仅能提高教学效率,减轻教师负担,还为学生提供了灵活便捷的考试方式。技术栈包括Spring Boot、Vue.js、Element-UI等,支持多种角色登录,具备考试管理、题库管理、成绩查询等功能。系统采用前后端分离架构,具备高性能和扩展性,未来可进一步优化并引入AI技术提升智能化水平。
毕设项目&课程设计&毕设项目:基于springboot+vue实现的在线考试系统(含教程&源码&数据库数据)
|
12天前
|
Java 关系型数据库 MySQL
毕设项目&课程设计&毕设项目:springboot+jsp实现的房屋租租赁系统(含教程&源码&数据库数据)
本文介绍了一款基于Spring Boot和JSP技术的房屋租赁系统,旨在通过自动化和信息化手段提升房屋管理效率,优化租户体验。系统采用JDK 1.8、Maven 3.6、MySQL 8.0、JSP、Layui和Spring Boot 2.0等技术栈,实现了高效的房源管理和便捷的租户服务。通过该系统,房东可以轻松管理房源,租户可以快速找到合适的住所,双方都能享受数字化带来的便利。未来,系统将持续优化升级,提供更多完善的服务。
毕设项目&课程设计&毕设项目:springboot+jsp实现的房屋租租赁系统(含教程&源码&数据库数据)
|
13天前
|
Java 数据库连接 数据库
SpringBoot 整合jdbc和mybatis
本文详细介绍了如何在SpringBoot项目中整合JDBC与MyBatis,并提供了具体的配置步骤和示例代码。首先,通过创建用户实体类和数据库表来准备基础环境;接着,配置Maven依赖、数据库连接及属性;最后,分别展示了JDBC与MyBatis的集成方法及其基本操作,包括增删查改等功能的实现。适合初学者快速入门。
SpringBoot 整合jdbc和mybatis
|
22天前
|
缓存 前端开发 Java
【Java面试题汇总】Spring,SpringBoot,SpringMVC,Mybatis,JavaWeb篇(2023版)
Soring Boot的起步依赖、启动流程、自动装配、常用的注解、Spring MVC的执行流程、对MVC的理解、RestFull风格、为什么service层要写接口、MyBatis的缓存机制、$和#有什么区别、resultType和resultMap区别、cookie和session的区别是什么?session的工作原理
【Java面试题汇总】Spring,SpringBoot,SpringMVC,Mybatis,JavaWeb篇(2023版)
|
8天前
|
存储 API 数据库
QML使用Sqlite数据库存储ListModel数据
本文介绍了在QML中使用Sqlite数据库存储ListModel数据的方法,包括如何创建数据库、读取数据、动态添加和删除数据,以及如何在程序启动和退出时与数据库同步数据。
|
9天前
|
XML Java 关系型数据库
springboot 集成 mybatis-plus 代码生成器
本文介绍了如何在Spring Boot项目中集成MyBatis-Plus代码生成器,包括导入相关依赖坐标、配置快速代码生成器以及自定义代码生成器模板的步骤和代码示例,旨在提高开发效率,快速生成Entity、Mapper、Mapper XML、Service、Controller等代码。
springboot 集成 mybatis-plus 代码生成器
|
10天前
|
Web App开发 数据可视化 前端开发
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
本文介绍了ECharts的基本使用和语法格式,包括如何引入ECharts、创建容器、初始化echarts实例对象、配置option参数和一些基础图表的绘制方法。文章还提供了简单图表绘制和使用图例添加的示例代码,以及对ECharts特性和优势的概述。
Echart的使用初体验,Echarts的基本使用及语法格式,简单图表绘制和使用及图例添加【学习笔记】
下一篇
无影云桌面