使用ajax获取数据，完成对echarts图标的渲染，实现效果

项目放在了github上，如果有需要，可以参考。地址：echartDemo

直接上代码

@Controller
public class UserController {

	@Autowired
	private UserService service;
	
	@RequestMapping("/lineChart")
	public String lineChart() {
		
		return "/lineChart";
	}
	
	@RequestMapping("/pieChart")
	public String pieChart() {
		
		return "/pieChart";
	}
	
	@RequestMapping("/barChart")
	public String barChart() {
		
		return "/barChart";
	}
	
	//折线  柱状取值
	@RequestMapping("/chart1")
	@ResponseBody
	public List<User> chart1(Model model){
		List<User> userList = service.getUserList();
		return userList;
	}
	
	//扇形取值
	@RequestMapping("/chart2")
	@ResponseBody
	public List<charts> chart2(Model model){
		List<User> userList = service.getUserList();
		List<charts> chart = new ArrayList<charts>();
		for (User user : userList) {
			charts a = new charts(user.getScore(), user.getName());
			chart.add(a);
		}
		return chart;
	}
}


这里因为pie扇形的值是{value:  , name:  }, 所以又定义了一个charts实体类，然后循环把查询到的值，添加到chart里面。就可以直接拿到页面使用。
dao层   service层  就是平常的查询方法。

前端代码
这个是折线统计图的代码，其他的两个没有放上来。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>
<link rel="stylesheet" type="text/css" 
	href="./statics/layui.css">
<script src="./statics/echarts.min.js"></script>
<script src="./statics/jquery.min.js"></script>
</head>
<body>
<div style="width:2000px;height:1800px;">
	<a href="./pieChart"><button type="button" class="layui-btn">扇形统计图</button></a>
	<a href="./barChart"><button type="button" class="layui-btn">柱状统计图</button></a>
	<a href="./lineChart"><button type="button" class="layui-btn">折线统计图</button></a>
	<div style="height: 400px" class="" id="lineChart"></div>
</div>

<script>
$(function () {
    //折线图
    var echartsA = echarts.init(document.getElementById('lineChart'));
    echartsA.setOption({

        title: {
            text: '学生成绩'
        },

        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: ['成绩']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            data: []
        }],

        yAxis: [{
            type: 'value'
        }],
        series: [{
            name: '成绩',
            type: 'line',
            areaStyle: {normal: {}},
            data: [],
            itemStyle: {
                normal: {
                    color: '#59aea2'
                },
                emphasis: {}
            }
        }
        ]
    });

    echartsA.showLoading();

    var user = [];
    var score = [];

    $.ajax({
        type: 'post',
        async: true,
        url: '${pageContext.request.contextPath}/chart1',
        data: {},
        dataType: 'json',
        success: function (result) {
            if (result) {
                for (var i = 0; i < result.length; i++) {
                	user.push(result[i].name);
                }
                for (var i = 0; i < result.length; i++) {
                	score.push(result[i].score);
                }

                echartsA.hideLoading();
                echartsA.setOption({
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        data: user
                    },
                    series: [{
                        name: '点击量',
                        type: 'line',
                        areaStyle: {normal: {}},
                        data: score,
                        itemStyle: {
                            normal: {
                                color: '#59aea2'
                            },
                            emphasis: {}
                        }
                    }
                    ]
                });
            }
        },
        error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            echartsA.hideLoading();
        }
    });
})
</script>
</body>
</html>

最后实现的效果：
在这里插入图片描述

在这里插入图片描述

使用ajax获取数据，完成对echarts图标的渲染，实现效果

猜你喜欢