Echarts經過json加載數據

時間 2019-11-17

標籤 echarts 經過 json 加載數據欄目 JavaScript 简体版

原文原文鏈接

最近由於項目的須要學習Echarts，經過官網http://echarts.baidu.com/feature.html能夠系統學習，下面就說下本身寫的一個例子。javascript

1、建立實體：css

public class Series
{
    public String name;
    public String type;
    public List<Integer> data;
    public Series(String name, String type, List<Integer> data)
    {
        this.name = name;
        this.type = type;
        this.data = data;
    }
    
    public String toName()
    {
        return name;
    }

}

2、寫控制層，具體狀況根據本身框架html

@Controller
@RequestMapping("/demo")
public class DemoController {
    private static final Logger logger = LoggerFactory
            .getLogger(DemoController.class);
        
    @RequestMapping("/echartsQuery")
    public String echartsQuery(Model model, String pageNos)
    {
        logger.info("展現頁面開始");        
        logger.info("展現頁面結束");        
            
        return "wsip/echartsShow";
    }
    
    @RequestMapping("/echartsView")
    @ResponseBody
    public String echartsView()
    {
        List<String> xAxisData = new ArrayList<String>();  
        List< JSONObject> seriesList = new ArrayList< JSONObject>(); 
        for (int i = 1; i < 13; i++)
        {
            xAxisData.add(i+"月");
        }
        for (int i = 1; i < 4; i++)
        {
            List<Integer> list = new ArrayList<Integer>();
            for (int j = 1; j < 13; j++)
            {
                 list.add((int)(Math.random()*100));
            }
            Series series = new Series("銷售"+i, Series.TYPE_LINE, list);
            JSONObject job = new JSONObject();
            job.put("name", series.toName());
            job.put("type", "bar");
            job.put("data",series.data);  
            seriesList.add(job); 
        }
        //xAxisData和seriesList轉爲json
        JSONObject jsob = new JSONObject(); 
        jsob.put("xAxisData", xAxisData);  
        jsob.put("seriesList", seriesList); 
        return jsob.toString();
    }
    
}

這裏的數據不是查詢數據庫，而是模擬查詢的數據，原理同樣。其中@ResponseBody這個註解必定要有，否則前臺獲取的不是json數據。java

3、頁面jquery

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<c:set var="BP" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<title>demo</title>
<link rel="stylesheet" href="${BP}/resources/ued-new/css/rdc.min.css">
<link rel="stylesheet" href="${BP}/resources/ued-new/css/style.css">
<script src="${BP}/resources/ued-new/plugins/jquery-1.10.2.min.js"></script>
<script src="${BP}/resources/js/plugins/echarts-3/echarts.min.js"></script>
</head>
<body>
    <div class="ued-crumbs ued-crumbs-line">
        <span class="ued-crumbs-title"><i class="ued-ico ued-ico-home"></i><b>您當前所在位置：</b></span>
        <a href="#">echarts</a>
    </div>
    <br><br><br><br>
        <div class="title ">
            <h1>echarts</h1>
        </div>    
        <div class="rcont-mould">
        <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
        <div id="main" style="width: 100%;height:500px;"></div>    
        </div>

</body>

<script type="text/javascript">

//基於準備好的dom，初始化echarts實例 
var myChart = echarts.init(document.getElementById('main'));
// 顯示標題，圖例和空的座標軸
option = {
    title: {
        text: '2016年三位銷售員業績',
        subtext: '數據爲虛構'
    },
    tooltip: {},
    legend: {
        data:["銷售1","銷售2","銷售3"]
    },
    toolbox:
    {
        show:true,
        feature:
        {
            dataView:{show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    xAxis: {
        type:"category",
        data: []
    },
    yAxis: [{
        type:"value",
    }],
    series: [
        {  
            name:"銷售1",  
            type:"bar",  
            data:[]  
        },  
        {  
            name:"銷售2",  
            type:"bar",  
            data:[]  
        },  
        {  
            name:"銷售3",  
            type:"bar",  
            data:[]  
        }
    ]
};
myChart.showLoading(); //loading動畫


$.ajax({
    type : "post",
    async : true,
    url : "${pageContext.request.contextPath}/demo/echartsView",
    dataType:"json",
    success:function(result) {
        
        if(result)
        {
           var obj = eval('(' + result + ')'); 
           myChart.hideLoading();
             myChart.setOption({
                 xAxis:{  
                     data:obj.xAxisData
                 },  
                 series:obj.seriesList
             });
        }
                  
   },
    error : function(errorMsg) {
        //請求失敗時執行該函數
    alert("請求數據失敗!");
    myChart.hideLoading();
    }
});
myChart.setOption(option);
</script>

</html>