最近遇到一个作业,要求使用 Echarts 散点图,本来这个图是很容易的,官网上也有很多的教程。但是如果可以动态的更新 Echarts 散点图就更好了。我本身对 js 不感兴趣,经过不停的查找资料最终实现了这一功能。
我的项目是 Servlet + jsp + Echarts。先从 Servlet 入手,我们的项目需要传递的数值是 x 坐标和 y 坐标。我首先写了一个 JavaBean
julie.java
package JavaBean;
public class julei {
public julei(double x, double y) {
this.x = x;
this.y = y;
}
double x;
public double getX() {
return x;
}
public void setX(double x) {
this.x = x;
}
public double getY() {
return y;
}
public void setY(double y) {
this.y = y;
}
double y;
@Override
public String toString() {
return "[" + this.x + "," + this.y + "]";
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Servlet中的代码,因为使用的是 json 来传递的数据,所以 json 相关的包还是少不了的。
BackServlet
package Servlet;
import JavaBean.Readtxt;
import JavaBean.julei;
import org.json.JSONArray;
import org.json.JSONObject;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@javax.servlet.annotation.WebServlet("/BackServlet")
public class BackServlet extends javax.servlet.http.HttpServlet {
protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
List list = new ArrayList<>();
try {
list = Readtxt.out();//这是我们项目中的一个类,不重要。
}catch (Exception e)
{
System.out.println(e.toString());
}
JSONArray jsonArray = new JSONArray(list);
System.out.println(jsonArray.toString());
//最重要的就是这一句,将数据发送给谁来申请的位置
response.getWriter().write(jsonArray.toString());
}
protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
好了,现在到了最重要的前端方面了。
index.jsp
正常声明散点图,只要把data声明为空就好。
var myChart = echarts.init(document.getElementById('man'));
var option = {
title : {
text: '死亡分布图',
},
xAxis: {axisTick: {//决定是否显示坐标刻度
alignWithLabel: true,
show:true
},},
yAxis: {},
series: [{
symbolSize: 20,
data: [],
type: 'scatter'
}]
};
myChart.setOption(option);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
数据接收部分:
var num = [];
var gao = new Array();
$.ajax({
type : "post",
async : true, //异步请求(同步请求将会锁住浏览器,其他操作须等请求完成才可执行)
url : "BackServlet", //请求发送到TestServlet
data : {},
dataType : "json", //返回数据形式为json
//7.请求成功后接收数据name+num两组数据
success : function(result) {
//result为服务器返回的json对象
if (result) {
//8.取出数据存入数组
for (var i = 0; i < result.length; i++) {
gao.push([result[i].x,result[i].y]);//这一句很重要,它将数据转化为了正确的格式。
}
myChart.hideLoading(); //隐藏加载动画
//9.覆盖操作-根据数据加载数据图表
myChart.setOption({
series : [ {
// 根据名字对应到相应的数据
data : gao//在这里对data进行赋值。
} ]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
完毕
我把整个jsp都放上来了,但是里面的 css 还有 js 就不放了,重点是传数据的那一部分。
pageEncoding="UTF-8"%>
LOL数据分析
// 基于准备好的dom,初始化echarts实例
var value=[];
$.ajaxSettings.async=false;
var myChart = echarts.init(document.getElementById('man'));
var option = {
title : {
text: '死亡分布图',
},
xAxis: {axisTick: {//决定是否显示坐标刻度
alignWithLabel: true,
show:true
},},
yAxis: {},
series: [{
symbolSize: 20,
data: [],
type: 'scatter'
}]
};
myChart.setOption(option);
var num = [];
var gao = new Array(4);
$.ajax({
type : "post",
async : true, //异步请求(同步请求将会锁住浏览器,其他操作须等请求完成才可执行)
url : "BackServlet", //请求发送到TestServlet
data : {},
dataType : "json", //返回数据形式为json
//7.请求成功后接收数据name+num两组数据
success : function(result) {
//result为服务器返回的json对象
if (result) {
//8.取出数据存入数组
for (var i = 0; i < result.length; i++) {
gao.push([result[i].x,result[i].y]);
}
// document.write(gao);
myChart.hideLoading(); //隐藏加载动画
//9.覆盖操作-根据数据加载数据图表
myChart.setOption({
series : [ {
// 根据名字对应到相应的数据
data : gao
} ]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
---------------------
标签:请求,myChart,散点图,json,result,var,import,动态,Echarts
来源: https://www.cnblogs.com/ly570/p/11060597.html