Echarts動態載入資料

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <!-- 引入jquery.js -->
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.loading.js"></script>
</head>
<body>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 column">
    <div class="panel info-list" id="solrsumPanel">
        <div class="panel-heading">
            <span class="panel-title">響應時間</span>
        </div>
        <div class="panel-body graph" style="height: 400px;"
             id="solrsumChart"></div>
    </div>
</div>

<script type="text/javascript">
    var drawsolr = function() {

        // 基於準備好的dom，初始化echarts例項
        $('#solrsumPanel').showLoading()// 顯示loading效果，同時關閉提示訊息
        var myChart = echarts.init(document.getElementById('solrsumChart'));
        $.ajax({
            type : 'get',
            url : "data.json",
            data : {

            },
            success : function(data) {
                $.each(data.dateTime, function(i, d) {
                    data.dateTime[i] = data.dateTime[i].substring(0, 10) + ' -'
                            + data.dateTime[i].substring(11, 19);// 擷取日期
                });
                var date3 = [];
                var nums = [];
                var datalist = [];
                var times = [];
                for (var i = 0; i < data.dateTime.length; i++) {
                    date3.push(data.dateTime[i]);
                    datalist.push(data.nums[i]);
                    times.push(data.cost[i]);
                }
                $('#solrsumPanel').hideLoading()
                // 指定圖表的配置項和資料
                var option = {
                    tooltip : {
                        trigger : 'axis',
                        axisPointer : {
                            type : 'cross',
                            label : {
                                backgroundColor : '#283b56'
                            }
                        }
                    },
                    toolbox : {
                        show : true,
                        feature : {
                            dataView : {
                                readOnly : false
                            },
                            restore : {},
                            saveAsImage : {}
                        }
                    },
                    xAxis : [ {
                        type : 'category',
                        boundaryGap : true,
                        data : data.dateTime,
                        nameLocation : 'middle'
                    } ],
                    yAxis : [ {
                        type : 'value',
                        scale : true,
                        name : '數量',
                        boundaryGap : [ 0.2, 0.2 ],
                        axisLabel : {
                            formatter : '{value} 條'
                        }
                    }, {
                        type : 'value',
                        scale : true,
                        name : '時間',
                        boundaryGap : [ 0.2, 0.2 ],
                        splitLine : {
                            show : false
                        },
                        axisLabel : {
                            formatter : '{value} ms'
                        }
                    } ],
                    dataZoom : [ {
                        show : true,
                        realtime : true,
                        start : 65,
                        end : 85
                    }, {
                        type : 'inside',
                        realtime : true,
                        start : 65,
                        end : 85
                    } ],
                    series : [ {
                        name : '數量',
                        type : 'bar',
                        data : data.nums
                    }, {
                        name : '時間',
                        type : 'line',
                        yAxisIndex : 1,
                        data : data.cost
                    } ]
                };
                myChart.setOption(option);
            },
            error : function(XMLHttpRequest) {
                $('#solrsumPanel').hideLoading();
                $('#solrsumPanel').msg({
                    type : 'danger',
                    text : "查詢資料出錯，請聯絡管理人員！"
                });
            }
        });
    }


    $(function() {
        drawsolr();
    });

    //一分鐘重新整理一次
    setInterval(function() {
        drawsolr();
    }, 60000);
</script>
</body>
</html>

json資料格式如下：

ECharts動態載入資料（簡單）

常規 html //html中的內容很簡單 <div id="main" style="width: 600px;height:400px;"></div> js庫匯入 //匯入相關指令碼 <script type="t

Echarts動態載入資料

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title>

echarts動態載入資料，顯示柱狀圖，餅圖圖表

第一次寫部落格，有點小激動。公司正在開發的web版固定資產管理軟體，需要做報表，需要直觀的顯示一些領導感興趣的資料。就想到百度的echarts啦，關於echarts的更多資訊請移步echarts首頁。言歸正傳。第一步，在jsp頁面，需要引入esl.js,它是一個瀏覽器端

ECharts動態載入JavaWeb後臺資料，圖表展現

jsp程式碼：（根據官方demo及自己需求，適當修改原始引數，需動態新增的原始測試資料可以不刪，可以覆蓋） <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn

【mpvue】實現echarts圖表動態載入資料

功能描述使用mpvue框架開發微信小程式。目的效果為小程式中顯示一個折線圖，當點選切換按鈕時，切換圖表。實現步驟 1.查詢mpvue官方文件關於echarts的實現方式------靜態載入圖表，只加載一次 2.實現動態載入圖表（能夠根據需求多次繪製圖表）思

Echarts動態載入折線圖X Y軸資料圖表資料

前幾天，收到商家的反饋，希望可以有一個直觀的圖表，展示一個時間段裡的銷售額，客數，排班人數，並把銷售高峰期以及時間段反應出來。經同事的介紹，選擇了百度的 echarts，縮寫來自Enterprise Charts，一個純JavaScript的圖表庫。上官網查，官方的

echarts動態載入折線圖資料demo

前面幾節echarts的使用都是靜態常量值得設定，這肯定不能滿足我們在日常開發中的需要，平時專案的資料都是動態的，可變的，所以本章節介紹echarts結合Java 如何動態的載入資料。 =================方式一============

ECharts通過Ajax動態載入資料到圖表

參考官網：http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts2 要展示的圖表像這樣：現在開始前後端程式碼展示。by the way，使用的開發框架為nutz，重點還是echarts資料。不要本末倒置。

Echarts的使用以及動態載入資料

一、Echarts的介紹 ECharts開源來自百度商業前端資料視覺化團隊，基於html5 Canvas，是一個純Javascript圖表庫，提供直觀，生動，可互動，可個性化定製的資料視覺化圖表。創新的拖拽重計算、資料檢視、值域漫遊等特性大大增強了使用者

highcharts click事件獲取資料傳給datagrid ，動態載入資料

點選highcharts的柱子會觸發click事件，並將資料傳給後臺獲取到相應部門下的所有員工資訊顯示在datagrid 如下：新增在charts的初始化裡 [java] view plain copy

Ext選項卡tabpanel切換動態載入資料

鳴人不說暗話，來張圖：程式碼開始：（使用Ext，ajax載入資料，如果你們有好的方法也可以多多交流）var tabxsk = new Object(); //初始化 tabxsk.init = function () { test.pageSize = Math.floor((d_right_h

thinkphp+ajax 移動端實現滾動到底部載入資料(無重新整理動態載入資料技術的應用)

監聽滾動條的js檔案地址：http://ons.me/526.html 1、dropload.css檔案 .dropload-up,.dropload-down{ position: relative; height: 0; &n

javascript操作向表格中動態載入資料

首先在HTML中編寫表格資訊 <table width="500px" border="1"> //表格頭部資訊 <thead> <tr> <th>編號</th

datagrid動態載入資料分頁下載EasyUI外掛

這是完整的前臺程式碼 <!DOCTYPE html> <html> <head id="Head1"> <title>StencilControl</title> <script src="/

android折線圖ichartjs的動態載入資料

之間給大家分享過一個html寫的折線圖，再將折線圖利用webview放在手機中，原來的那個折線圖中的x軸座標在html中已經被寫死，這樣就帶來了操作的不變，程式碼的靈活性也隨之降低。比如，我需要檢視今天的溫度，可是現在是晚上7點，今天還沒有過完，那麼問題來了，怎

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

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

ECharts動態獲取資料

最近做專案的需要，我不得不接觸一下Echarts這個外掛。以前看著網上的一些餅圖柱形圖之類的，我就想這應該只有牛人才做的出來吧！其實好多時候，一葉障目不見泰山，殊不知有好多看似覺得高大上的東西，在你接觸過了解後就知道，其實很簡單。下面這篇記錄一下我用Echarts簡單的AJ

hive 動態載入資料到指定分割槽，以及其他hive使用的技巧

Loading data to table obd_message.device_status_log partition (date=null) Time taken for load dynamic partitions : 4073 Loading partition

bootstrap table動態載入資料

點選選擇按鈕，彈出模態框，加載出關鍵詞列表 TABLE樣式： <div class="modal fade " id="ClickModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" a

Jquery chosen動態設定值 select Ajax動態載入資料設定chosen和獲取他們選中的值

在做一個編輯對話方塊時，要對裡面帶有select option的操作。主要是想動態載入option和對option的選中。但是由於專案中使用了jquery裡的chosen()方法，怎麼也無法實現效果。原碼如下： Java程式碼 <select id="viewOLanguage"

Echarts動態載入資料

相關推薦