在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、加载页面调用,进行方法的初始化
相关文章
|
2月前
|
存储 JSON 关系型数据库
【干货满满】解密 API 数据解析:从 JSON 到数据库存储的完整流程
本文详解电商API开发中JSON数据解析与数据库存储的全流程,涵盖数据提取、清洗、转换及优化策略,结合Python实战代码与主流数据库方案,助开发者构建高效、可靠的数据处理管道。
|
12天前
|
存储 数据管理 数据库
数据字典是什么?和数据库、数据仓库有什么关系?
在数据处理中,你是否常困惑于字段含义、指标计算或数据来源?数据字典正是解答这些问题的关键工具,它清晰定义数据的名称、类型、来源、计算方式等,服务于开发者、分析师和数据管理者。本文详解数据字典的定义、组成及其与数据库、数据仓库的关系,助你夯实数据基础。
数据字典是什么?和数据库、数据仓库有什么关系?
|
4月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
361 1
|
5月前
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。技术学习共同进步
372 7
|
5月前
|
存储 缓存 数据库
数据库数据删除策略:硬删除vs软删除的最佳实践指南
在项目开发中,“删除”操作常见但方式多样,主要分为硬删除与软删除。硬删除直接从数据库移除数据,操作简单、高效,但不可恢复;适用于临时或敏感数据。软删除通过标记字段保留数据,支持恢复和审计,但增加查询复杂度与数据量;适合需追踪历史或可恢复的场景。两者各有优劣,实际开发中常结合使用以满足不同需求。
358 4
|
22天前
|
存储 关系型数据库 数据库
【赵渝强老师】PostgreSQL数据库的WAL日志与数据写入的过程
PostgreSQL中的WAL(预写日志)是保证数据完整性的关键技术。在数据修改前,系统会先将日志写入WAL,确保宕机时可通过日志恢复数据。它减少了磁盘I/O,提升了性能,并支持手动切换日志文件。WAL文件默认存储在pg_wal目录下,采用16进制命名规则。此外,PostgreSQL提供pg_waldump工具解析日志内容。
|
3月前
|
Java 数据库连接 数据库
Spring boot 使用mybatis generator 自动生成代码插件
本文介绍了在Spring Boot项目中使用MyBatis Generator插件自动生成代码的详细步骤。首先创建一个新的Spring Boot项目,接着引入MyBatis Generator插件并配置`pom.xml`文件。然后删除默认的`application.properties`文件,创建`application.yml`进行相关配置,如设置Mapper路径和实体类包名。重点在于配置`generatorConfig.xml`文件,包括数据库驱动、连接信息、生成模型、映射文件及DAO的包名和位置。最后通过IDE配置运行插件生成代码,并在主类添加`@MapperScan`注解完成整合
468 1
Spring boot 使用mybatis generator 自动生成代码插件
|
3月前
|
存储 SQL Java
数据存储使用文件还是数据库,哪个更合适?
数据库和文件系统各有优劣:数据库读写性能较低、结构 rigid,但具备计算能力和数据一致性保障;文件系统灵活易管理、读写高效,但缺乏计算能力且无法保证一致性。针对仅需高效存储与灵活管理的场景,文件系统更优,但其计算短板可通过开源工具 SPL(Structured Process Language)弥补。SPL 提供独立计算语法及高性能文件格式(如集文件、组表),支持复杂计算与多源混合查询,甚至可替代数据仓库。此外,SPL 易集成、支持热切换,大幅提升开发运维效率,是后数据库时代文件存储的理想补充方案。
|
4月前
|
供应链 JavaScript BI
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统,基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发,帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能,业务流程清晰且操作简便。支持二次开发与商用,提供自定义界面、审批流配置及灵活报表设计,助力企业高效管理与数字化转型。
382 2
ERP系统源码,基于SpringBoot+Vue+ElementUI+UniAPP开发

热门文章

最新文章