Echarts 動態更新散點圖

時間 2019-11-17

標籤 echarts 動態更新散點圖简体版

原文原文鏈接

最近遇到一個做業，要求使用 Echarts 散點圖，原本這個圖是很容易的，官網上也有不少的教程。可是若是能夠動態的更新 Echarts 散點圖就更好了。我自己對 js 不感興趣，通過不停的查找資料最終實現了這一功能。
個人項目是 Servlet + jsp + Echarts。先從 Servlet 入手，咱們的項目須要傳遞的數值是 x 座標和 y 座標。我首先寫了一個 JavaBeanjavascript

julie.javacss

package JavaBean;html

public class julei {
public julei(double x, double y) {
this.x = x;
this.y = y;
}
double x;前端

public double getX() {
return x;
}java

public void setX(double x) {
this.x = x;
}jquery

public double getY() {
return y;
}web

public void setY(double y) {
this.y = y;
}ajax

double y;json

@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<julei> 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 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 就不放了,重點是傳數據的那一部分。

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>LOL數據分析</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src='js/echarts.js'></script>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>

</div>
</div>

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();
}
})

</script>
</div>
<div class="ly-triangle21"></div>
</div>

</div>（http://www.my516.com）

<audio src="music/1.mp3" autoplay="autoplay" loop="loop" /><script src="js/jquery-1.8.3.min.js"></script><script src="js/jquery.fullPage.min.js"></script><script src="js/diy.js"></script></body></html>---------------------

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。