ECharts 初探

Hoking發表於2018-05-15
Echarts

關於ECharts的內容請瀏覽http://echarts.baidu.com/echarts2/doc/about.html

本例主要講解和演示基於Spring MVC + ECharts 的Demo。

第一步：下載ECharts，下載地址。

本例使用的型別為：

ECharts：echarts.min.js

JQuery：jquery-1.11.1.min.js

Spring：spring 4.3.10.RELEASE

第二步：環境搭建，請參考：Spring MVC環境搭建與基本操作

2.1 在WEB-INF下建立存放靜態資源的資料夾static

具體目錄結構為：

/WEB-INF/static/images

/WEB-INF/static/css

/WEB-INF/static/js

將所需要的js檔案放置在/WEB-INF/static/js目錄下。

2.2 修改xxxx-servlet.xml，增加如下配置。

<!-- 設定使用註解的類所在的jar包 -->
	<context:component-scan base-package="com.mahaochen.paralegal" />
	<bean
		class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
		<property name="messageConverters">
			<list>
				<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"></bean>
			</list>
		</property>
	</bean>
	
	<!-- 在Spring配置檔案中配置ViewResolver -->
	<!-- ViewResolver -->
	<!-- 
	InternalResourceViewResolver：用於支援Servlet、JSP檢視解析；
    viewClass：JstlView表示JSP模板頁面需要使用JSTL標籤庫，classpath中必須包含jstl的相關jar包；
    prefix和suffix：查詢檢視頁面的字首和字尾（字首[邏輯檢視名]字尾），比如傳進來的邏輯檢視名為hello，則該該jsp檢視頁面應該存放在“WEB-INF/jsp/hello.jsp”；
	-->
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
		<property name="prefix" value="/WEB-INF/jsp/" />
		<property name="suffix" value=".jsp" />
	</bean>
	 
	<!-- SpringMVC設定不攔截靜態資源css、js、images -->
	<mvc:annotation-driven />
	<mvc:resources location="/WEB-INF/static/images/" mapping="/images/**"/> 
	<mvc:resources location="/WEB-INF/static/css/" mapping="/css/**"/> 
	<mvc:resources location="/WEB-INF/static/js/" mapping="/js/**"/>

2.3 在WEB-INF/jsp/建立echarts.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/Paralegal/js/echarts.min.js"></script>
<script type="text/javascript" src="/Paralegal/js/jquery-1.11.1.min.js"></script>
<title>ECharts 測試頁面</title>
</head>
<body>
<h2>Login</h2>
<div id="main" style="width:100%; height:400px;"></div>
<button id="button" onclick="loadDatas()">按鈕</button>
</body>
<script type="text/javascript">
		function loadDatas() {
			var myChart = echarts.init(document.getElementById('main'));
			// 顯示標題，圖例和空的座標軸
			myChart.setOption({
				title : {
					text : '非同步資料載入示例'
				},
				tooltip : {},
				legend : {
					data : [ '釋出排行' ]
				},
				xAxis : {
					data : []
				},
				yAxis : {
					splitLine : {
						show : false
					},//去除網格線
					name : ''
				},
				series : [ {
					barWidth : "30px",
					name : '釋出排行',
					type : 'bar',
					itemStyle : {
						normal : {
							label : {
								show : true,
								position : 'top',
								textStyle : {
									color : '#333'
								}
							}
						}
					},
					data : []
				} ]
			});
			myChart.showLoading(); //資料載入完之前先顯示一段簡單的loading動畫
			var names = []; //類別陣列（實際用來盛放X軸座標值）
			var nums = []; //銷量陣列（實際用來盛放Y座標值）
			$.ajax({
				contentType : "application/json",
				type : 'get',
				cache: false,
				url : '/Paralegal/echarts/getDatas',//請求資料的地址
				dataType : "json", //返回資料形式為json
				success : function(result) {
					//請求成功時執行該函式內容，result即為伺服器返回的json物件
					$.each(result.list, function(index, item) {
						names.push(item.depname); //挨個取出類別並填入類別陣列                    
						nums.push(item.num); //挨個取出銷量並填入銷量陣列
					});
					myChart.hideLoading(); //隱藏載入動畫
					myChart.setOption({ //載入資料圖表
						xAxis : {
							data : names
						},
						series : [ {
							// 根據名字對應到相應的系列
							name : '釋出排行', //顯示在上部的標題
							data : nums
						} ]
					});
				},
				error : function(errorMsg) {
					//請求失敗時執行該函式
					alert("頁面請求資料失敗!");
					myChart.hideLoading();
				}
			});
		};
		loadDatas();
	</script>
</html>

2.3 編寫EChartsController

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/echarts")
public class EChartsController {

	@RequestMapping("/test")
	private String index(){
		return "echarts";
	}
	
	@RequestMapping("/getDatas")
	@ResponseBody
	private Map<String, List<Map<String, Object>>> getDatas() {

		 Map<String, List<Map<String, Object>>> map = new HashMap<String, List<Map<String,Object>>>();
		 
		 List<Map<String, Object>> list = new ArrayList<Map<String,Object>>();
		 for(int i=0;i<5;i++){
			 Map<String, Object> itmMap = new HashMap<String, Object>();
			 itmMap.put("depname", "dep"+i);
			 itmMap.put("num", new Random().nextInt(1000) );
			 list.add(itmMap);
		 }
		 map.put("list", list);
		 System.out.println(map);
		return map;
	}
	
	
}

第三步：效果演示。



注意事項：

GET訪問瀏覽器認為是等冪的。即一個相同的URL 只有一個結果[相同是指 整個URL字串完全匹配]
所以 第二次訪問的時候 如果 URL字串沒變化 瀏覽器是 直接拿出了第一次訪問的結果
POST則認為是一個 變動性 訪問 （瀏覽器 認為 POST的提交 必定是 有改變的）
防止 GET 的 等冪 訪問 就在URL後面加上 ？+new Date();，[總之就是使每次訪問的URL字串不一樣的]

設計WEB頁面的時候 也應該遵守這個原則。

可以通過修改

type : 'get',
cache: false,

type : 'get',
來測試驗證。

相關文章