Echarts通過json加載數據
阿新 • • 發佈：2017-09-08
axis erer java restore ucc web avi ref pin
最近因為項目的需要學習Echarts，通過官網http://echarts.baidu.com/feature.html可以系統學習，下面就說下自己寫的一個例子。
一、創建實體：
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; } }
二、寫控制層，具體情況根據自己框架
@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") @ResponseBodypublic 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數據。
三、頁面
<%@ 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>
其中要引入的echarts.min.js可以在官網下載。
四、效果圖
Echarts通過json加載數據