echarts 動態資料互動例項
阿新 • • 發佈：2019-01-10
最近在學習echarts，找到了很多的資料，找起來比較麻煩，為了方便自己以後的使用，特此做個筆記。
首先是echarts如何使用，要先下載echarts相關的包，我這邊提供的是echarts3.0的下載地址：http://echarts.baidu.com/download.html</p><p>
之前看到echarts2.0的引入有兩種方法：模組化單檔案引入和標籤式單檔案引入，介紹如下，感興趣的可以看一看：http://study.163.com/course/introduction.htm?
之前在網上找了好多資料，都沒有實現，自己整理了各路大神的資料，下面我將介紹一個Demo，實現動態資料互動
1，前臺jsp頁面</p><p>a.首先引入echarts jar包，我這裡還加入了jquery jar包和bootstrap jar包，為了手機上顯示美觀
<!-- 移動裝置優先（讓專案友好的支援移動裝置） --> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title>echarts動態資料互動</title> <link rel="stylesheet" href="<%=request.getContextPath()%>/css/bootstrap.min.css"> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-2.1.4.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath() %>/js/echarts.js"></script>
b.其次為 ECharts 準備一個具備大小（寬高）的
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>c，下面就是最主要的部分，初始化echarts例項，並配置</p><p></p><pre name="code" class="javascript"><script type="text/javascript">
$(function(){ var url = '<%=request.getContextPath()%>/ApplyServlet'; var id = 'main'; setChartBar(url); }); //設定ajax訪問後臺填充柱圖 function setChartBar(url){ var Chart=echarts.init(document.getElementById("main")); Chart.showLoading( {text: 'Loding...' } ); var categories=[]; var values=[]; $.ajax({ url:url, dataType:"json", type:'post', success:function(json){ categories = json.categories; values = json.values; var option = { tooltip: { show: true }, legend: { data: ['銷量'] }, xAxis: [ { type: 'category', data: categories } ], yAxis: [ { type: 'value' } ], series: [ { 'name': '銷量', 'type': 'bar', 'data': values } ] }; Chart.hideLoading(); Chart.setOption(option); } }); } </script>
2，後臺互動
a,新建ApplyServlet
package com.fpp.action;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fpp.util.JsonUtils;
public class ApplyServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String[] categories = {"鞋", "襯衫", "外套", "牛仔褲"};
Integer[] values = {80, 50, 75, 100};
Map<String, Object> json = new HashMap<String, Object>();
json.put("categories", categories);
json.put("values", values);
JsonUtils.writeJson(json, req, resp);
}
} <servlet>
<servlet-name>ApplyServlet</servlet-name>
<servlet-class>com.fpp.action.ApplyServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ApplyServlet</servlet-name>
<url-pattern>/ApplyServlet</url-pattern>
</servlet-mapping>c，配置一個工具類JsonUtils
package com.fpp.util;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.serializer.SerializerFeature;
public class JsonUtils {
public static void writeJson(Object object,
HttpServletRequest request, HttpServletResponse response) {
writeJsonByFilter(object, null, null, request, response);
}
public static void writeJsonByIncludesProperties(Object object, String[] includesProperties,
HttpServletRequest request, HttpServletResponse response) {
writeJsonByFilter(object, includesProperties, null, request, response);
}
public static void writeJsonByExcludesProperties(Object object, String[] excludesProperties,
HttpServletRequest request, HttpServletResponse response) {
writeJsonByFilter(object, null, excludesProperties, request, response);
}
public static void writeJsonByFilter(Object object, String[] includesProperties,
String[] excludesProperties, HttpServletRequest request, HttpServletResponse response) {
response.setContentType("text/html;charset=utf-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter writer = null;
try {
writer = response.getWriter();
FastjsonPropertyFilter filter = new FastjsonPropertyFilter();
if (includesProperties != null && includesProperties.length > 0) {
filter.getIncludes().addAll(Arrays.<String> asList(includesProperties));
}
if (excludesProperties != null && excludesProperties.length > 0) {
filter.getExcludes().addAll(Arrays.<String> asList(excludesProperties));
}
String userAgent = request.getHeader("User-Agent");
if (userAgent.indexOf("MSIE") > -1 && (userAgent.indexOf("MSIE 6") > -1)) {
writer.write(JSON.toJSONString(object, filter,
SerializerFeature.WriteDateUseDateFormat,
SerializerFeature.DisableCircularReferenceDetect,
SerializerFeature.BrowserCompatible));
} else {
writer.write(JSON.toJSONString(object, filter,
SerializerFeature.WriteDateUseDateFormat,
SerializerFeature.DisableCircularReferenceDetect));
}
writer.flush();
} catch (IOException e) {
e.printStackTrace();
} finally {
if (writer != null) {
writer.close();
}
}
}
}
package com.fpp.util;
import java.util.HashSet;
import java.util.Set;
import com.alibaba.fastjson.serializer.PropertyFilter;
public class FastjsonPropertyFilter implements PropertyFilter {
private final Set<String> includes = new HashSet<String>();
private final Set<String> excludes = new HashSet<String>();
public boolean apply(Object source, String name, Object value) {
if (excludes.contains(name)) {
return false;
}
if (excludes.contains(source.getClass().getSimpleName() + "." + name)) {
return false;
}
if (includes.size() == 0 || includes.contains(name)) {
return true;
}
if (includes.contains(source.getClass().getSimpleName() + "." + name)) {
return true;
}
return false;
}
public Set<String> getIncludes() {
return includes;
}
public Set<String> getExcludes() {
return excludes;
}
} 3，最終的效果
學習相關網址：
echarts jar包下載地址：http://echarts.baidu.com/download.html
echarts API :http://echarts.baidu.com/api.html#echarts
echarts 例項：http://echarts.baidu.com/echarts2/doc/example.html
echarts 配置：http://echarts.baidu.com/option.html#series-pie.data