ECharts Java 动态加载数据，echartsjava
java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaEE, JavaME, JavaSE）的总称。本站提供基于Java框架struts,spring,hibernate等的桌面应用、web交互及移动终端的开发技巧与资料
保持永久学习的心态，将成就一个优秀的你，来 继续搞起java知识。
1、前台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">
<title>ECharts</title>
<script type="text/javascript" src="${ctx}/plugins/<a href="http://www.cfei.net/archives/tag/echarts" title="浏览关于“echarts”的文章" target="_blank" class="tag_link">echarts</a>-2.2.1/echarts.js"></script>
<script type="text/javascript" src="${ctx}/plugins/jquery-1.8.3/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
// 配置路径
require.config({
paths: {
echarts: &#39;${ctx}/plugins/echarts-2.2.1&#39;
}
});
// 按需加载
require(
[
&#39;echarts&#39;,
&#39;echarts/chart/bar&#39;,
&#39;echarts/chart/line&#39;
],
function (ec) {
var chart = document.getElementById(&#39;chart&#39;);
var echart = ec.init(chart);
echart.showLoading({
text: &#39;正在努力加载中...&#39;
});
var categories = [];
var values = [];
// 同步执行
$.ajaxSettings.async = false;
// 加载<a href="http://www.cfei.net/archives/tag/%e6%95%b0%e6%8d%ae" title="浏览关于“数据”的文章" target="_blank" class="tag_link">数据</a>
$.getJSON(&#39;${ctx}/dataAccessServlet&#39;, function (json) {
categories = json.categories;
values = json.values;
});
var option = {
tooltip: {
show: true
},
legend: {
data: [&#39;销量&#39;]
},
xAxis: [
{
type: &#39;category&#39;,
data: categories
}
],
yAxis: [
{
type: &#39;value&#39;
}
],
series: [
{
&#39;name&#39;: &#39;销量&#39;,
&#39;type&#39;: &#39;bar&#39;,
&#39;data&#39;: values
}
]
};
echart.setOption(option);
echart.hideLoading();
}
);
</script>
</head>
<body>
<div id="chart" style="width: 580px;height: 420px;margin: 0 auto;border: 1px solid gray;"></div>
</body>
</html>
2、后台JSON数据
protected void doPost(HttpServletRequest request,
HttpServletResponse response) 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, request, response);
}
3、最终实现效果
ECharts Java 类库：http://git.oschina.net/free/ECharts
JAVA数据echarts
因为水平有限，难免有疏忽或者不准确的地方，希望大家能够直接指出来，我会及时改正。一切为了知识的分享。
后续会有更多的精彩的内容分享给大家。
支付宝扫一扫
微信扫一扫
