追求卓越一諾千金

藍藍設計__初中数学试讲教案,2011年成立|_160彩票苹果版,主創清華團隊-_-格瑞特月神学院,專注軟件和互聯網ui設計開發_-中博彩票平台可靠吗?。擅長企業信息化管理-_毕业感谢词、監控qvodsetup exe、大數據軟件UIUE谘詢和設計開發服務_|-陈蓉照片。立足UI---刘德华为歌迷打保安,好好學習-|-仙桃影视,天天進步-__门头沟电大在线!


Echarts 動態更新散點圖

2019-6-17 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容_|_众彩软件,每天自動發到您的郵箱中|武汉苏泊尔炊具有限公司, 請點這裏

 最近遇到一個作業--易中彩票代玩,要求使用 Echarts 散點圖|-向炮火中前进,本來這個圖是很容易的|_诗馨语,官網上也有很多的教程|-和绳媲美。但是如果可以動態的更新 Echarts 散點圖就更好了_僵尸片排行榜前十名。我本身對 js 不感興趣|-|银河彩票合法吗,經過不停的查找資料最終實現了這一功能_-玉兰油广告女主角。
我的項目是 Servlet + jsp + Echarts-|_汕尾台风网。先從 Servlet 入手__|qq游戏马,我們的項目需要傳遞的數值是 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();//這是我們項目中的一個類__|007a私募内线,不重要-qq游戏2011官方下载正式版免费下载。
        }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聲明為空就好-||至尊宝v530。

  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"%>
<!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, //異步請求(同步請求將會鎖住瀏覽器164期十四场胜负彩开奖,其他操作須等請求完成才可執行)
            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>
藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-__135彩票app,為期望卓越的國內外企業提供卓越的UI界麵設計_-兰西小屋论坛、BS界麵設計 _-_众发国际是干什么的、 cs界麵設計 _||瘦儿鞋、 ipad界麵設計 _-|娱乐天地点检手机登录、 包裝設計 __沈绛红、 圖標定製 --008彩票论坛II、 用戶體驗 |_亿赢彩票首页、交互設計--永盛国际彩票骗局、 網站建設 -耐美金、平麵設計服務-中国卫生人才网成绩查询2017。

標簽: echarts 動態更新散點圖 « 研究數十個熱門 APP後_|_掌上永辉职工APP,我來教你如何做好「設置頭像」功能 | 美團為何一夜之間變“黃”了---移动手机怎么开通黄钻?»


訂閱Rss