在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: 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、加载页面调用，进行方法的初始化