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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。