springboot整合Echarts

最新推荐文章于 2024-08-21 15:17:44 发布

花乐晴

最新推荐文章于 2024-08-21 15:17:44 发布

阅读量1.8k

点赞数 4

本文链接：https://blog.csdn.net/weixin_44195615/article/details/105073550

版权

Echarts：https://www.echartsjs.com/examples/zh/index.html#chart-type-pie

示例：https://www.echartsjs.com/zh/tutorial.html#5%20分钟上手%20ECharts

一、工作准备

1、下载Echarts：https://echarts.baidu.com/download.html
在这里插入图片描述
2、下载jQuery：

二、编辑代码

1、实体类

package com.sxt.stat.domain;
public class BaseEntity {
	private String name;
	private Double value;
	public BaseEntity() {
	}
	
	public BaseEntity(String name, Double value) {
		super();
		this.name = name;
		this.value = value;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Double getValue() {
		return value;
	}
	public void setValue(Double value) {
		this.value = value;
	}	
}

2、mapper接口与mapper配置文件

package com.sxt.stat.mapper;
import java.util.List;
import com.sxt.stat.domain.BaseEntity;
/**
 * mapper接口
 * @author Administrator
 *
 */
public interface StatMapper {
	/**
	 * 查询用户地区的数据
	 * @return
	 */
	List<BaseEntity> queryUserAreaStat();
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.sxt.stat.mapper.StatMapper">
	<!-- 查询用户地区的数据 -->
	<select id="queryUserAreaStat"
		resultType="com.sxt.stat.domain.BaseEntity">
		select address as name,count(1) as value from sys_user
		GROUP BY address
	</select>
</mapper>

3、service接口

package com.sxt.stat.service;
import java.util.List;
import com.sxt.stat.domain.BaseEntity;
/**
 * 据服务接口
 * @author LJH
 *
 */
public interface StatService {
	/**
	 * 查询用户地区的数据
	 * @return
	 */
	List<BaseEntity> loadUserAreaStatList();	
}

4、业务实现类

package com.sxt.stat.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.sxt.stat.domain.BaseEntity;
import com.sxt.stat.mapper.StatMapper;
import com.sxt.stat.service.StatService;
@Service //注入业务接口
public class StatServiceImpl implements StatService {
	//注入mapper接口
	@Autowired
	private StatMapper statMapper;

	@Override
	public List<BaseEntity> loadUserAreaStatList() {
		return statMapper.queryUserAreaStat();
	}
}

5、前端控制器

package com.sxt.stat.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.sxt.stat.domain.BaseEntity;
import com.sxt.stat.service.StatService;
/**
 * 统计分析
 * @author LJH
 *
 */
@RequestMapping("stat")
@Controller
public class StatController {	
	@Autowired
	private StatService statService;
	/**
	 * 跳转到用户地区统计页面
	 */
	@RequestMapping("toUserAreaStat")
	public String toUserAreaStat() {
		return "stat/userAreaStat";
	}
	/**
	 * 加载用户地区数据
	 */
	@RequestMapping("loadUserAreaStatJosn")
	@ResponseBody
	public List<BaseEntity> loadUserAreaStatJosn(){
		return this.statService.loadUserAreaStatList();
	}
		
}

6、前端页面

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户地区统计</title>
</head>
<body style="height: 100%; margin: 0">
       <div id="container" style="height: 600%"></div>
       <!--引入echarts.min.js文件  -->
       <script type="text/javascript" src="/resources/echarts/js/echarts.min.js"></script>
       <!-- 引入jquery-3.1.1.min.js文件 -->
       <script type="text/javascript" src="/resources/echarts/js/jquery-3.1.1.min.js"></script>
       
       <!--代码编辑区  -->
       <script type="text/javascript">
        //发送请求（get请求）
		$.get("/stat/loadUserAreaStatJosn",function(data){
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			option = {
			    title : {
			        text: '用户地址统计',
			        subtext: '真实有效',
			        x:'center'
			    },
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        left: 'left',
			        //数据
			        data: data
			    },
			    series : [
			        {
			            name: '用户数量(占比)',
			            type: 'pie',
			            radius : '55%',
			            center: ['50%', '60%'],
			            //数据
			            data:data,
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			};
			if (option && typeof option === "object") {
			    myChart.setOption(option, true);
			}
		})    
       </script>
   </body>
</html>