网站做研究生毕业论文/营销型网站建设的价格
最近遇到一个作业，要求使用 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”%>
<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", //请求发送到TestServletdata : {},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>
小程序查看
