在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+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:">汽车租赁情况数据分析</h3>
    <hr>
    <div ref="chart2" style="width:50%;height:376px; float:"></div>
    <div style="width:50%;height:376px;float:" ref="chart"></div>

       <div style="width:100%;height:376px;float:">
      <div style="margin-top:">
        <hr>
        <h1 style="float:">友情提示:</h1><br><br><br><br>
        <span style="float:">1、商家可以根据租赁汽车的排名情况、加大对热门汽车的推广和上新</span>
        <br><br>
        <span style="float:">2、根据各类汽车租赁情况的总体展示，及时调整汽车商品的管理</span>
        <br><br>
        <span style="float:">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、加载页面调用，进行方法的初始化