在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、加载页面调用,进行方法的初始化
相关文章
|
29天前
|
Java 数据库连接 测试技术
SpringBoot入门 - 添加内存数据库H2
SpringBoot入门 - 添加内存数据库H2
43 3
SpringBoot入门 - 添加内存数据库H2
|
1月前
|
存储 人工智能 Cloud Native
云栖重磅|从数据到智能:Data+AI驱动的云原生数据库
在9月20日2024云栖大会上,阿里云智能集团副总裁,数据库产品事业部负责人,ACM、CCF、IEEE会士(Fellow)李飞飞发表《从数据到智能:Data+AI驱动的云原生数据库》主题演讲。他表示,数据是生成式AI的核心资产,大模型时代的数据管理系统需具备多模处理和实时分析能力。阿里云瑶池将数据+AI全面融合,构建一站式多模数据管理平台,以数据驱动决策与创新,为用户提供像“搭积木”一样易用、好用、高可用的使用体验。
云栖重磅|从数据到智能:Data+AI驱动的云原生数据库
|
1月前
|
Java 数据库连接 测试技术
SpringBoot入门(4) - 添加内存数据库H2
SpringBoot入门(4) - 添加内存数据库H2
52 4
SpringBoot入门(4) - 添加内存数据库H2
|
29天前
|
存储 监控 数据处理
flink 向doris 数据库写入数据时出现背压如何排查?
本文介绍了如何确定和解决Flink任务向Doris数据库写入数据时遇到的背压问题。首先通过Flink Web UI和性能指标监控识别背压,然后从Doris数据库性能、网络连接稳定性、Flink任务数据处理逻辑及资源配置等方面排查原因,并通过分析相关日志进一步定位问题。
165 61
|
25天前
|
Java 关系型数据库 数据库连接
使用 Spring Boot 执行数据库操作:全面指南
使用 Spring Boot 执行数据库操作:全面指南
91 1
|
1月前
|
SQL 关系型数据库 数据库
国产数据实战之docker部署MyWebSQL数据库管理工具
【10月更文挑战第23天】国产数据实战之docker部署MyWebSQL数据库管理工具
140 4
国产数据实战之docker部署MyWebSQL数据库管理工具
|
27天前
|
关系型数据库 MySQL 数据库
GBase 数据库如何像MYSQL一样存放多行数据
GBase 数据库如何像MYSQL一样存放多行数据
|
2月前
|
Java 数据库连接 测试技术
SpringBoot入门(4) - 添加内存数据库H2
SpringBoot入门(4) - 添加内存数据库H2
36 2
SpringBoot入门(4) - 添加内存数据库H2
|
1月前
|
SQL 前端开发 关系型数据库
SpringBoot使用mysql查询昨天、今天、过去一周、过去半年、过去一年数据
SpringBoot使用mysql查询昨天、今天、过去一周、过去半年、过去一年数据
63 9
|
1月前
|
Java 数据库连接 测试技术
SpringBoot入门(4) - 添加内存数据库H2
SpringBoot入门(4) - 添加内存数据库H2
69 13