ECharts動態數據加載

番茄西紅柿發布于2019-04-23 13:26 / 2269人閱讀

摘要：最近有用到做可視化報表，小結一下一準備數據官網下載引入請求用的數據和平區河西區河東區河北區南開區二整體代碼為準備一個具備大小寬高的單文件引入顯示標題，圖例和空的坐標軸異步數據加載示例

　　最近有用到ECharts做可視化報表，小結一下

一、準備數據

　　1.官網下載echarts.min.js

　　2.引入jquery.js

　　3.請求用的json數據

{
    "list":[
        {
            "department":"和平區",
            "num":480,
            "ber":200
        },
        {
            "department":"河西區",
            "num":380,
            "ber":460
        },
        {
            "department":"河東區",
            "num":366,
            "ber":223
        },
{
            "department":"河北區",
            "num":320,
            "ber":210
        },
{
            "department":"南開區",
            "num":300,
            "ber":200
        }
    ]
}

二、整體代碼

DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>EChartstitle>
head>

<body>
    
    <div id="traceProvinceOrder" style="width:400px; height:400px;">div>
    
    <script src="echarts.min.js">script>
    <script src="../webapp/js/jquery.js">script>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById(traceProvinceOrder));
        // 顯示標題，圖例和空的坐標軸
        myChart.setOption({
            title: {
                text: 異步數據加載示例
            },
            color: ["pink", red],
            tooltip: {},
            legend: {
                data: [發布排行, 牽手排行],
                x:70%
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                    barWidth: "20px",
                    name: 發布排行,
                    type: bar,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: top,
                                textStyle: {
                                    color: #333
                                }
                            }
                        }
                    },
                    data: []
                },
                {
                    barWidth: "20px",
                    name: 牽手排行,
                    type: bar,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: top,
                                textStyle: {
                                    color: #333
                                }
                            }
                        }
                    },
                    data: []
                }
            ]
        });
        myChart.showLoading(); //數據加載完之前先顯示一段簡單的loading動畫
        var names = []; //類別數組（實際用來盛放X軸坐標值）
        var nums = []; //銷量數組（實際用來盛放Y坐標值）
        var bers = []; //銷量數組（實際用來盛放Y坐標值）
        $.ajax({
            type: get,
            url: city.json, //請求數據的地址
            dataType: "json", //返回數據形式為json
            success: function (result) {
                //請求成功時執行該函數內容，result即為服務器返回的json對象
                $.each(result.list, function (index, item) {
                    names.push(item.department); //挨個取出類別并填入類別數組                    
                    nums.push(item.num); //挨個取出銷量并填入銷量數組
                    bers.push(item.ber); //挨個取出銷量并填入銷量數組
                });
                myChart.hideLoading(); //隱藏加載動畫
                myChart.setOption({ //加載數據圖表
                    xAxis: {
                        data: names
                    },
                    series: [{
                            // 根據名字對應到相應的系列
                            name: 發布排行, //顯示在上部的標題
                            data: nums
                        },
                        {
                            // 根據名字對應到相應的系列
                            name: 牽手排行, //顯示在上部的標題
                            data: bers
                        }
                    ]
                });
            },
            error: function (errorMsg) {
                //請求失敗時執行該函數
                alert("圖表請求數據失敗!");
                myChart.hideLoading();
            }
        });
    script>
body>

　　一個簡單的柱狀圖表展示

行動才是最具有價值，即使做錯。——送給努力的你

GPU云服務器云服務器動態加載數據 js動態加載數據 ajax動態加載數據 js 動態加載數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1874.html

echarts動態獲取數據實例

摘要：動態獲取數據庫的實時數據的簡單實例。實例演示跳轉引入文件。引入的文件方式有多種，比較推薦模塊化的引入方式。小拽的簡單是直接引入文件，提供一個下載地址點擊下載部分代碼一塊用于的展現。 echarts動態獲取數據庫的實時數據的簡單實例。實例演示：跳轉demo 引入echarts 文件。引入echarts的文件方式有多種，比較推薦模塊化的引入方式。小拽的簡單demo是直接引入文件，提...

張憲坤 2019-06-27 11:47 評論0 收藏0
手拉手，用Vue開發動態刷新Echarts組件

摘要：靜態組件開發因為被編程思想這篇文章毒害太深，所以筆者開發組件也習慣從基礎到高級逐步迭代。靜態組件要實現的目的很簡單，就是把圖表，渲染到頁面上。實現動態刷新下一步我想大家都知道了，就是定時從后臺拉取數據，然后更新父組件的就好。從幾年前流行的jQuery插件，到現在React和Vue的組件，在業務需求的開發中抽象通用出通用的模塊，一直都是一個對個人技術提高非常有幫助的事情。本文從一個真實...

justCoding 2019-08-22 15:36 評論0 收藏0
echarts圖表顯示隱藏 Can't get dom width or height

摘要：項目有一個需求，定時顯示隱藏圖標，剛開始是圖表顯示正常。原因可能是讀取不到隱藏的高寬。在可視區域變化時重新調整，這時候如果處于隱藏狀態，那么在時就讀取不到節點的寬高，圖表就無法顯示。項目有一個需求，定時顯示隱藏echarts圖標，剛開始dom是display:block;圖表顯示正常。等到dom隱藏再顯示的時候圖表還是正常，很好沒有bug。可是當我在dom處于display:none...

I_Am 2019-08-26 13:48 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰篇)

摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺系列...

Channe 2019-08-20 17:15 評論0 收藏0
手摸手，帶你用vue擼后臺系列三(實戰篇)

摘要：社區的認可目前已經是相關最多的開源項目了，體現出了社區對其的認可。監聽事件手動維護列表這樣我們就簡單的完成了拖拽排序。完整項目地址：vue-element-admin 系類文章一：手摸手，帶你用vue擼后臺系列一(基礎篇)系類文章二：手摸手，帶你用vue擼后臺系列二(登錄權限篇)系類文章三：手摸手，帶你用vue擼后臺系列三(實戰篇）系類文章四：手摸手，帶你用vue擼后臺系列...

zgbgx 2019-08-29 12:46 評論0 收藏0