使用Echarts 动态更新散点图
最近遇到一個作業，要求使用 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 + "]";
}
}
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 {
}
}
好了，現在到了最重要的前端方面了。
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);
數據接收部分：
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();
}
})
我把整個jsp都放上來了，但是里面的 css 還有 js 就不放了,重點是傳數據的那一部分。
<%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>
LOL數據分析
<div class="section">
<div class="ly-box01">
<img class="ly-img01" src="img/logol.png" style="width:100%;height:100%">
</div>
</div>
<!--第三屏-->
<div class="section">
<div class="timeline"></div>
<div class="timepoint21"></div>
<div class="ly-box11">
<div id="man" style=" width: 600px;height: 500px;"></div>
<script type="text/javascript">
// 基于準備好的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();
}
})
</script>
</div>
<div class="ly-triangle21"></div>
</div>
<!--試驗-->
<ul class="bg-bubbles">
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
<li><img src="img/logol.png" style="width:100%;height:100%"></li>
</ul>
</div>
<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>
小程序查看
總結
以上是生活随笔為你收集整理的使用Echarts 动态更新散点图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python发送飞书消息
- 下一篇： 【Quartus系列】实验一： 3-8译