標籤：es2017 結束 object img obj uri rms set data
最近因為項目的需要學習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") @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資料。
三、頁面
<%@ 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載入資料
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
