关于ajax后台获取数据，echarts表呈现数据

最新推荐文章于 2023-04-03 14:28:14 发布

糖炒栗子小子

最新推荐文章于 2023-04-03 14:28:14 发布

阅读量3.2k

点赞数

文章标签： ajax json echarts

本文链接：https://blog.csdn.net/shanshenghui/article/details/50541848

版权

首先建立后台json数据自己构造的后台数据如下：

public void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/json; charset=utf-8");
JSONObject jsonObj=new JSONObject();
//后台数据，这里给定数据就不从数据库获取了
Map map=new HashMap();
map.put("categor", new String[]{"第一季度","第二季度","第三季度","第四季度"});
map.put("soft_data", new int[]{80, 120, 200,90} );
map.put("net_data", new int[]{50, 200, 120, 110});
map.put("mobile_data",new int[]{20, 60, 30, 15});
jsonObj.putAll(map);
response.getWriter().println(jsonObj.toString());

}

然后在html文件中代码：<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="echarts.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<div id="main" style="width: 500px;height:600px;"></div>

<script type="text/javascript">

$(function () {
//获得后台数据
var category_data; //类型信息
var soft_data; //软板块销售数据
var net_data; //网板块销售数据
var mobile_data; //移动板块销售数据
$.ajax({
url: "/JavaEchartsJson/servlet/JavaEchartsJson",
async: false,
type: 'GET',
dataType: 'json',
timeout: 1000,
cache: false,
success: function (data) {
//成功时执行的回调方法
category_data = data.categor;
soft_data = data.soft_data;
net_data = data.net_data;
mobile_data = data.mobile_data;
},
error: erryFunction //错误时执行方法
});

function erryFunction() {
alert("数据没返回成功！");
};

var mychart = echarts.init(document.getElementById("main"));
var option = {
title: {
text: "天猫商场季度报表",
subtext: "数据纯属虚构"
},
tooltip: {
show: true,
trigger: "axis"
},
legend: {
left:"right",
data: ['软件板块', '网络板块', '移动板块']
},
toolbox: {
show: true,
restore: {show: false},
magicType: {show: true, type: ["line", "bar"]},
saveImage: {show: true}
},
xAxis: {
type: 'category',
data: category_data
},
yAxis: {
type: "value"
},
series: [{
name: "软件板块", type: "bar", data: soft_data
}, {
name: "网络板块", type: "bar", data: net_data
}, {
name: "移动板块", type: "bar", data: mobile_data
}]
}

mychart.setOption(option);
});

</script>

</body>
</html>