最近遇到一个作业，要求使用 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<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 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 就不放了,重点是传数据的那一部分。

<%@ 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>

<body>
<div class="bgcolor">
<div style="z-index:100;" id="dowebok">
<!--第一屏-->

<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>（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>
---------------------

Echarts 动态更新散点图的更多相关文章

  1. vue+vuex+axios+echarts画一个动态更新的中国地图

    一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...

  2. echarts动态加载数据无法更新series 无法更新图表

    最近遇到一个Echarts图表无法动态更新数据的问题 最初我在option中设置series的值为一个数组,想着通过修改数组来动态更新图表,但是没变 化,后来发觉是因为图表数据会和之前的合并 看官方的 ...

  3. 基于Python实现matplotlib中动态更新图片(交互式绘图)

    最近在研究动态障碍物避障算法,在Python语言进行算法仿真时需要实时显示障碍物和运动物的当前位置和轨迹,利用Anaconda的Python打包集合,在Spyder中使用Python3.5语言和mat ...

  4. vue+echarts 动态绘制图表以及异步加载数据

    前言 背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s (我这里用了淘宝镜像,不知道同学自 ...

  5. 全国疫情精准定点动态更新(.net core)

    前言 疫情远比我们在年初想的发展迅速,在过年前还计划着可以亲戚聚聚,结果都泡汤了,开始了自家游. 在初三的时候,看到那个丁香医生,觉得不够详细,比如说我想看下周边城市的疫情情况,但是我地理不好,根本不 ...

  6. JSPatch – 动态更新iOS APP

    原文:http://blog.cnbang.net/works/2767/ JSPatch是最近业余做的项目,只需在项目中引入极小的引擎,就可以使用JavaScript调用任何Objective-C的 ...

  7. JAVA代码热部署，在线不停服动态更新

    本地debug的时候,可以实时编译并更新代码,线上也可以不停服来动态更新类,即所说的java热部署.   JDK代理的两种方式: 1.premain方式是Java SE5开始就提供的代理方式,但其必须 ...

  8. elasticsearch同义词及动态更新

    第一种:参考地址:http://dev.paperlesspost.com/setting-up-elasticsearch-synonyms/271.Add a synonyms file.2.Cr ...

  9. 在Android中实现service动态更新UI界面

    之前曾介绍过Android的UI设计与后台线程交互,据Android API的介绍,service一般是在后台运行的,没有界面的.那么如何实现service动态更新UI界面呢?案例:通过service ...

随机推荐

  1. 转：SQL 索引最左前缀原理

    表结构和索引列 假设数据库中表是这样的:  我们只考虑一张表employees.titles: 索引是(emp_no,title,from_date) SHOW INDEX FROM employee ...

  2. [Elasticsearch] 集群的工作原理 - 第一部分

    本文翻译自Elasticsearch官方指南的life inside a cluster一章. ES就是为高可用和可扩展而生的. 扩展能够通过购置性能更强的server(垂直扩展或者向上扩展,Vert ...

  3. VS2012调试执行，网页打不开

    360修复漏洞篇 TODO 修复了漏洞.vs2012在firefox和ie中都打不开 解决思路:360漏洞修复→已安装漏洞→卸载刚刚安装的漏洞 就可以解决 忽略漏洞 正常打开.

  4. OpenCV2马拉松第25圈——直线拟合与RANSAC算法

    计算机视觉讨论群162501053 转载请注明:http://blog.csdn.net/abcd1992719g/article/details/28118095 收入囊中 最小二乘法(least ...

  5. 1064. Complete Binary Search Tree (30)【二叉树】——PAT (Advanced Level) Practise

    题目信息 1064. Complete Binary Search Tree (30) 时间限制100 ms 内存限制65536 kB 代码长度限制16000 B A Binary Search Tr ...

  6. 【转】Android的WebView控件载入网页显示速度慢的究极解决方案

    秒(甚至更多)时间才会显示出来.研究了很久,搜遍了国外很多网站,也看过PhoneGap的代码,一直无解. 一般人堆WebView的加速,都是建议先用webView.getSettings().setB ...

  7. JavaScript Patterns 1 Introduction

    1.1 Pattern "theme of recurring events or objects… it can be a template or model which can be u ...

  8. Quartz.net使用入门(三)

    Windows服务,自定义安装,卸载服务+Quartz.net app.config配置文件 <?xml version="1.0"?> <configurati ...

  9. Spark中统计程序运行时间

    import java.text.SimpleDateFormat import java.util.Date val s=NowDate() //显示当前的具体时间 val now=new Date ...

  10. Django day26 HyperlinkedIdentityField，序列化组件的数据校验以及功能的（全局，局部）钩子函数，序列化组件的反序列化和保存

    一:HyperlinkedIdentityField(用的很少):传三个参数:第一个路由名字,用来反向解析,第二个参数是要反向解析的参数值,第三个参数:有名分组的名字 -1 publish = ser ...