2. 程式人生 > >echarts模擬從資料庫非同步載入資料

echarts模擬從資料庫非同步載入資料

阿新 • • 發佈：2019-01-11

前言

前面的幾篇小例子中，echarts資料都是寫死在js中的，但是在實際echarts中，資料都是從資料庫中動態獲取過來。所以這裡來簡單演示一下echarts怎麼通過ajax非同步獲取資料庫中的資料在頁面上進行動態展示。下面只是功能程式碼展示，具體的js包匯入，以及springmvc等等這裡不詳細介紹！

具體程式碼演示

  • 頁面程式碼展示
<body>
<!-- 為 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>

 <script
 
 type="text/javascript">
         // 基於準備好的dom，初始化echarts例項
         var myChart = echarts.init(document.getElementById('main'));

         myChart.setOption({
             title: {
                  text: '合肥市各區人口數統計',
                  left:'left'
              },
              legend:{
                 data:['人口數'
 
]
              },
              xAxis:{
                 data:[]
              },
              yAxis:{},
             series : [{
                name:'人口數',
                type:'bar',
                data:[]
             }
             ]
         });

         myChart.showLoading({text: '資料正在載入中...'
 
  }); 
         //這裡設定定時器模擬資料延時載入
         setTimeout(function(){
            $.ajax({  
                url:"<%=basePath%>echartsAsynController/getDatas",  
                dataType:"json",  
                success:function(jsonData){   
                    myChart.setOption({  
                       xAxis: {  
                           data: jsonData.xAxisCategory  
                       },  
                       series: [{  
                           // 根據名字對應到相應的系列  
                           name: '人口數',  
                           data: jsonData.datas  
                       }]  
                   });  
                   // 設定載入等待隱藏  
                   myChart.hideLoading();  
                }  
            }); 
        },2000);
 </script>
</body>

上面頁面上，我們先初始化echarts圖示配置。然後將需要動態獲取的xAxis上的資料和series上的資料先置空。後面在用ajax非同步獲取資料，然後再新增到echarts配置上去。上面簡單利用js的延遲執行來模擬大量資料載入的空白，如果資料載入很慢留下空的圖示在頁面上，會造成很不好的使用者體驗。所以這裡使用showLoading來顯示一個數據載入中。

  • 下面是echarts圖示的資料包裝類
/**
 - @ClassName: EchartsBean
 - @Description: TODO(圖示資料包裝類)
 - @author 愛琴孩
*/
public class EchartsBean {

    //表中的x軸類別
    private List<String> xAxisCategory;
    //表中的資料
    private List<Integer> datas;

    public EchartsBean(){}

    public EchartsBean(List<String> xAxisCategory,List<Integer> datas){
        this.xAxisCategory=xAxisCategory;
        this.datas=datas;
    }

    public List<String> getxAxisCategory() {
        return xAxisCategory;
    }

    public void setxAxisCategory(List<String> xAxisCategory) {
        this.xAxisCategory = xAxisCategory;
    }

    public List<Integer> getDatas() {
        return datas;
    }

    public void setDatas(List<Integer> datas) {
        this.datas = datas;
    }
}
  • 下面是具體的邏輯控制層程式碼
@Controller
@RequestMapping("/echartsAsynController")
public class EchartsAsynController {
    /** 
    * @Description: TODO(跳轉頁面) 
    * @return
    * @author 愛琴孩  
    * @version V1.0
     */
    @RequestMapping("/showTable")
    public String showTable(){
        System.out.println("跳轉到對應的頁面");
        return "/core/echarts/asynData";
    }

    /**
    * 
    * @Description: TODO(模擬從資料庫獲取資料) 
    * @return
    * @author 愛琴孩  
    * @version V1.0
    */
    @ResponseBody
    @RequestMapping("/getDatas")
    public EchartsBean getDatas(){
        EchartsBean echartsBean =new EchartsBean();
        List<String> xAxisCategory =Arrays.asList("高新區","蜀山區","瑤海區","包河區",
        "經開區","政務區","濱湖新區","新站區");
        List<Integer> datas = Arrays.asList(300,600,230,239,100,800,300,500);
        echartsBean.setDatas(datas);
        echartsBean.setxAxisCategory(xAxisCategory);
        return echartsBean; 
    }
}
  • 具體頁面效果如下
    這裡寫圖片描述
    最終展示效果如下
    這裡寫圖片描述

總結

上面只是簡單模擬echarts從資料庫動態獲取資料。後面會和大家繼續深入echarts的小細節！

相關推薦

echarts模擬從資料庫非同步載入資料

前言 前面的幾篇小例子中，echarts資料都是寫死在js中的，但是在實際echarts中，資料都是從資料庫中動態獲取過來。所以這裡來簡單演示一下echarts怎麼通過ajax非同步獲取資料庫中的資料在頁面上進行動態展示。下面只是功能程式碼展示，具體的js包匯

ASP.NET+Echarts+Ajax從資料庫中獲取資料

html <div class="panel-body"> <div id="signNum" style="height: 400px; width:

Java Web系統初始化時從資料庫中載入資料到文字（ibatis，spring）

有一些特殊情況，需要在系統初始化時載入一些配置屬性到本地文字中 web.xml <listener> <listener-class> org.springfra

Echarts的使用,非同步載入資料及返回資料型別

前臺js建立圖形 var option1={ title : { text: '學歷統計', x:'center', y:'center'

ECharts 非同步載入資料及loading 動畫

非同步載入 echarts 示例中的資料是在初始化後setOption中直接填入的，但是很多時候可能資料需要非同步載入後再填入。ECharts 中實現非同步資料的更新非常簡單，在圖表初始化後不管任何時候只要通過 jQuery 等工具非同步獲取資料後通過 setO

1.簡單例項：ASP.NET下Echarts通過Ajax從資料庫中獲取資料

後臺：Test01.ashx.cs:從資料庫獲取資料，通過HTTP請求（HttpContext）實現和前臺資料傳遞json資料 using System; using System.Collections.Generic; using System.Linq; using

使用ajax從資料庫動態載入下拉框(select)資料，可編輯下拉框。

<div style="position:relative;"> <span style="margin-left:100px;width:18px;overflow:hidden;"> <select id="ch

Echarts擴充套件之ajax非同步載入tooltip資料

最近做大資料視覺化檢視展現，隨著業務的加深，正常的簡單的echars裡面的例項已經滿足不了現有的需求；所以就需要對echarts進行更深一步的瞭解； 因為接觸echars比較早，所以現在使用的是echarts的2.*版本；最新的echarts3添加了非常多的人性化的設計；非

啟動伺服器時將配置引數從資料庫中載入到快取

最近做專案，碰到這樣的需求：在伺服器啟動的時候從資料庫讀取引數，將引數儲存到記憶體快取中 由於使用的是spring的自動注入方式，一開始用@component註解在啟動的時候載入查詢配置引數的bean,由於bean中要用到其他bean來查詢，但此時都為null 查詢相關資料，發現@PostC

簡單知識點例項之二：如何動態生成div框並且同時非同步載入資料

一、動態生成框並且同時ajax非同步請求資料 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <htm

php將從資料庫取出的資料分為6個一組的二維陣列

$presell = M('presell')->field('id,sname,num,weight,shop_price,endtime,supply,givetime')->where($info)->order('id desc')->select(); &nbs

SQL與eclipse的連線，從資料庫讀取表資料，將二維陣列資料匯入表

示例： import java.util.List; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.Statement; impor

專案總結：每隔5分鐘從資料庫拉取資料轉為Json格式通過WebService從客戶端傳送至服務端

   第一次接手需求寫的小專案，過程也有點坎坷，以此記錄總結編碼過程中遇到的問題。    專案背景：本次寫的是一個小模組，主要為客戶端，作用是每隔5分鐘從資料庫拉取資料傳送至服務端。本次專案採用的是spring3+Quartz+JdbcTemplate+J

介面測試: 用Jmeter從資料庫獲取測試資料, 作為下一個介面引數方法

現在有一個需求，從資料庫tieba_info表查出rank小於某個值的username和count(*)，然後把所有查出來的username和count(*)作為引數值，用於下一個介面。 （資料庫連線配置，請參考我的另外一篇博文jmeter測試mysql資料庫之JDBC請求https://blo

Hive從HDFS中載入資料

建表         以手機流量資訊為例插入30w行資料   create table flow(id string,phonenum string,mac string,ip string,num1 int,num2 int,up in

Highcharts 非同步載入資料曲線圖表

一 程式碼 <html> <head> <title>Highcharts 非同步載入資料曲線圖表</title> <script src="http://apps.bdimg.com/libs/jquery/2.1

模擬從圖片伺服器載入圖片

整個流程就是,先把圖片名從資料庫獲取出來,然後傳到前臺頁面,通過img方式或者其他方式往後臺controller傳送請求,然後controller從圖片伺服器獲取圖片寫入到前臺頁面 html <img style="width: 150px;height: 150px;" sr

selenium和pyquery抓取非同步載入資料

from selenium import webdriver from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.common.by import By from seleniu

react 模擬從後臺獲取選單資料，點選頂部選單切換介面的筆記

 本文是基於Ant design Pro 2.0做的筆記，官方提供的demo(官方demo下載地址),路由是程式配置的，不能滿足專案需求，所以在研究過程中，把所遇到的問題，做一個筆記，最終效果圖如下：   一：需求描述 　　1 從介面獲取選單，替換預設demo的選單。 　　&n

如何從資料庫服務讀取資料

1：背景    在從資料庫服務data讀取（以下簡稱data）之前，首先需要確保自己的服務（假設服務名為fegin-demo）是正常能向Eureka註冊中心註冊的，註冊步驟如下： 將 src/main