Echarts饼图展示动态数据

﹏ヽ暗。殇╰゛Y 2022-05-11 11:14 364阅读 0赞

Echarts饼图展示动态数据

注：本例是在SSM框架基础上实现的，通过其他框架或ｓｅｒｖｌｅｔ也同样可以实现;（不要纠结于此）

echarts.jsp文件

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions"  prefix="fn"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>饼图测试</title>
            
            <script src="${ctx}/js/jquery-2.0.3.min.js" ></script>
            
            <script src="${ctx}/js/echarts.min.js" ></script>
    		<script type="text/javascript">
    			var json = [];
    	        var datas =[];
    			
    			$(function(){
    				//ajax调用
    				ajaxGetData();
    			});	                    
    
    			function ajaxGetData(){
    				$.ajax({
    					url:"${ctx}/bug/user/getPie",
    					type: "get",
    					success:function(data){
    						//以下两种解析json的方法都可以
    						//var jsonObject = JSON.parse(data);
    						var jsonObject = eval("("+data+")");
    						for(var i=0;i<jsonObject.length;i++){
    							json.push({value:jsonObject[i].age,name:jsonObject[i].name});
    							datas.push(jsonObject[i].name);
    						}
    						printPie();
    					}
    				});
    			}
    			
    			function printPie(){
    				var echartsPie = echarts.init(document.getElementById('echartsPie'));
    				var option = {
    					    title : {
    					        text: '女神年龄分布',
    					        subtext: '独家报道',
    					        x:'center'
    					    },
    					    tooltip : {
    					        trigger: 'item',
    					        formatter: "{a} <br/>{b} : {c} 岁"
    					    },
    					    legend: {
    					        orient : 'vertical',
    					        x : 'left',
    					        data:datas
    					    },
    					    toolbox: {
    					        show : true,
    					        feature : {
    					            mark : {show: true},
    					            dataView : {show: true, readOnly: false},
    					            magicType : {
    					                show: true, 
    					                type: ['pie', 'funnel'],
    					                option: {
    					                    funnel: {
    					                        x: '25%',
    					                        width: '50%',
    					                        funnelAlign: 'left',
    					                        max: 1548
    					                    }
    					                }
    					            },
    					            restore : {show: true},
    					            saveAsImage : {show: true}
    					        }
    					    },
    					    calculable : true,
    					    series : [
    					        {
    					            name:'女神',
    					            type:'pie',
    					            radius : '55%',//饼图的半径大小
    					            center: ['50%', '60%'],//饼图的位置
    					            data:json
    					        }
    					    ]
    					}; 
    				echartsPie.setOption(option);
    			}
    			
    		</script>
    		
    	</head>
    	<body style="background-color: white;overflow-x:hidden;">
    		<div style="min-width: 100%;">
    			<div id="echartsPie" style="width: 600px;height:400px;"></div>
    		</div>
    	</body>
    </html>

User.java文件

package com.java.bug.beans;
    import org.apache.ibatis.type.Alias;
    
    /**
     * 描述：用户实体类
     */
    @Alias("user")
    public class User {
    
        private Long id;// 编号
        
        private String name;// 姓名
        
        private Long age;// 年龄
        
    
        public Long getId() {
            return id;
        }
    
        public void setId(Long id) {
            this.id = id;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public Long getAge() {
            return age;
        }
    
        public void setAge(Long age) {
            this.age = age;
        }
    
    }

UserController.java文件

package com.java.bug.controller;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import javax.servlet.http.HttpServletResponse;
    
    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 com.java.bug.beans.User;
    import com.java.bug.service.IUserService;
    
    import net.sf.json.JSONArray;
    
    @RestController
    @RequestMapping("/user")
    public class UserController extends BaseController{
    	
    	@Autowired
    	IUserService userService;
    	
    	@RequestMapping(value="/getPie",method={RequestMethod.POST,RequestMethod.GET})
    	public String getPie(HttpServletResponse response){
    		Map<Object, Object> map = new HashMap<Object, Object>();
    		List<User> userserList = userService.selectUserByCondition(map);
    		response.setCharacterEncoding("UTF-8");
    		PrintWriter out = null;
    		try {
    			out = response.getWriter();
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    		out.write(JSONArray.fromObject(userserList).toString());// 饼图
    		out.flush();
    		return null;
    	}
    
    }

UserService.java文件

package com.java.bug.service;
    
    import java.util.List;
    import java.util.Map;
    
    import com.java.bug.beans.User;
    
    /**
     * 描述：UserService
     */
    public interface IUserService {
    
    	/**
    	 * 条件查询 ||通过外键查询
    	 */
    	public List<User> selectUserByCondition(Map<Object, Object> map);
    }

UserServiceImpl.java文件

package com.java.bug.service.impl;
    
    import java.util.List;
    import java.util.Map;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import com.java.bug.beans.User;
    import com.java.bug.dao.UserDao;
    import com.java.bug.service.IUserService;
    
    /**
     * 描述：UserServiceImpl
     */
    @Service("userService")
    public class UserServiceImpl implements IUserService {
    
    	@Autowired
    	private  UserDao userDao;
    
    	@Override
    	public List<User> selectUserByCondition(Map<Object, Object> map) {
    		return userDao.selectUserByCondition(map);
    	}
    }

UserDao.java文件

package com.java.bug.dao;
    
    
    import java.util.List;
    import java.util.Map;
    
    import com.java.bug.beans.User;
    
    /**
     * 描述：UserDao
     */
    public interface UserDao extends BaseDao<User> {
    
    	/**
    	 * 条件查询 
    	 */
    	public List<User> selectUserByCondition(Map<Object, Object> map);
    }

User.xml文件

<?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.java.bug.dao.UserDao">
    	
    	<select id="selectUserByCondition"  parameterType="java.util.Map" resultType="user">
    		SELECT * FROM User
    		<where>
    			1=1
    		</where>
    	</select>
    </mapper>

User.sql文件（脚本）

/*
    Navicat MySQL Data Transfer
    
    Source Server         : localhost
    Source Server Version : 50623
    Source Host           : localhost:3306
    Source Database       : bug
    
    Target Server Type    : MYSQL
    Target Server Version : 50623
    File Encoding         : 65001
    
    Date: 2018-10-19 16:33:34
    */
    
    SET FOREIGN_KEY_CHECKS=0;
    
    -- ----------------------------
    -- Table structure for `User`
    -- ----------------------------
    DROP TABLE IF EXISTS `User`;
    CREATE TABLE `User` (
      `id` bigint(20) NOT NULL AUTO_INCREMENT,
      `name` varchar(255) DEFAULT NULL,
      `age` bigint(20) DEFAULT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;
    
    -- ----------------------------
    -- Records of User
    -- ----------------------------
    INSERT INTO `User` VALUES ('1', '高圆圆', '20');
    INSERT INTO `User` VALUES ('2', '赵丽颖', '22');
    INSERT INTO `User` VALUES ('3', '江莱', '24');

效果图：

![70][]

[70]: /images/20220505/0d6c6d1f8ae04a9585553aab720c3ffb.png