ssh结合echarts作图表展现

时间 2019-11-18 标签 ssh 结合 echarts 作图表展现

在平常的开发中，咱们经常须要使用图表对数据进行展现，在这里做者使用百度的开源图表echarts动态的展现数据。javascript

看过echarts的API都知道，要想使用某种类型的图表展现数据，必须封装好一个JSON对象返回给前台作相应的处理。在这里推荐一个echart对应的实体依赖。在pom.xml中引入html

<!-- ECharts的JAVA类库 -->
        <!-- 项目地址：https://github.com/abel533/ECharts -->
		<dependency>
			<groupId>com.github.abel533</groupId>
			<artifactId>ECharts</artifactId>
			<version>3.0.0.2</version>
		</dependency>

而后在controller封装一个echarts所需的option返回给前端，在这里从数据库的提取的过程部分的代码我就不写了。数据库就简单的两列属性【年份、金额】。在这里贴出代码，相信不少小伙伴仍是明白滴，不明白的能够留言哦，我看到会一一回复的。前端

private void setData(){
        yearList = new ArrayList<>();
        amountList = new ArrayList<>();
        List<Gdp> gdpList = gdpService.selectList(new EntityWrapper<Gdp>());
        for (Gdp gdp:gdpList) {
            yearList.add(gdp.getYear());
            amountList.add(gdp.getAmount());
        }
    }

    /**
     * 柱状图
     */
    @RequestMapping("/bar_chart")
    @ResponseBody
    public String barChart(){
        setData();

        Option option = new Option();
        option.title().text("中华人民共和国国内生产总值(GDP)").subtext("纯属虚构");
        option.tooltip().trigger(Trigger.axis);
        option.legend("万亿元");
        option.toolbox().show(true).feature(Tool.mark, Tool.dataView, 
new MagicType(Magic.line, Magic.bar).show(true), Tool.restore, Tool.saveAsImage);
        option.calculable(true);
        option.xAxis(new CategoryAxis().data(yearList.toArray()));
        option.yAxis(new ValueAxis());

        Bar bar = new Bar("万亿元");
        bar.data(amountList.toArray());
        bar.markPoint().data(new PointData().type(MarkType.max).name("最大值"), 
new PointData().type(MarkType.min).name("最小值"));
        bar.markLine().data(new PointData().type(MarkType.average).name("平均值"));

        option.series(bar);
        return JSON.toJSONString(option);
    }

而后前端发起ajax请求，获取option对象并显示。java

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>柱状图</title>
    <style>*{ margin:0} html,body{ height:100%} 
    .wrapper{ min-height:100%; height:auto !important; height:100%; margin:0 auto -155px} 
    .footer,.push{ height:155px} 
    table.gridtable{ font-family:verdana,arial,sans-serif; font-size:11px; 
        color:#333; border-width:1px; border-color:#666; 
        border-collapse:collapse; margin:5px auto} 
    table.gridtable th{ border-width:1px; padding:8px; border-style:solid; 
        border-color:#666; background-color:#dedede} 
    table.gridtable td{ border-width:1px; padding:8px; border-style:solid; 
        border-color:#666; background-color:#fff} 
    .middle{ text-align:center; margin:0 auto; width:90%; height:auto} 
    .info{ font-size:12px; text-align:center; line-height:20px; padding:40px} 
    .info a{ margin:0 10px; text-decoration:none; color:green}</style>
    <script type="text/javascript" src="resources/jquery/jquery-2.2.3.min.js"></script>
    <!-- ECharts单文件引入 -->
    <script src="${ctx}/resources/js/echarts-all-3.js"></script>
    <!-- 修改主题 -->
    <script src="${ctx}/resources/js/macarons.js"></script>

</head>
<body>
    <div id="main" style="height:400px"></div>
    <script>
        window.onload = function(){
            $.ajax({
                type: "post",
                url: "${ctx}/gdp/bar_chart",
                dataType: "json",
                async: false,
                success: function (data) {
                    var option = eval("("+data+")");
                    // theme 来源于 macarons.js
                    var myChart = echarts.init(document.getElementById('main'),theme);
                    myChart.setOption(option);
                }
            })
        }
    </script>
</body>
</html>