ECharts動態(tài)數(shù)據(jù)加載

番茄西紅柿發(fā)布于2019-04-23 13:26 / 2278人閱讀

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

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

一、準備數(shù)據(jù)

　　1.官網下載echarts.min.js

　　2.引入jquery.js

　　3.請求用的json數(shù)據(jù)

{
    "list":[
        {
            "department":"和平區(qū)",
            "num":480,
            "ber":200
        },
        {
            "department":"河西區(qū)",
            "num":380,
            "ber":460
        },
        {
            "department":"河東區(qū)",
            "num":366,
            "ber":223
        },
{
            "department":"河北區(qū)",
            "num":320,
            "ber":210
        },
{
            "department":"南開區(qū)",
            "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: 異步數(shù)據(jù)加載示例
            },
            color: ["pink", red],
            tooltip: {},
            legend: {
                data: [發(fā)布排行, 牽手排行],
                x:70%
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                    barWidth: "20px",
                    name: 發(fā)布排行,
                    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(); //數(shù)據(jù)加載完之前先顯示一段簡單的loading動畫
        var names = []; //類別數(shù)組（實際用來盛放X軸坐標值）
        var nums = []; //銷量數(shù)組（實際用來盛放Y坐標值）
        var bers = []; //銷量數(shù)組（實際用來盛放Y坐標值）
        $.ajax({
            type: get,
            url: city.json, //請求數(shù)據(jù)的地址
            dataType: "json", //返回數(shù)據(jù)形式為json
            success: function (result) {
                //請求成功時執(zhí)行該函數(shù)內容，result即為服務器返回的json對象
                $.each(result.list, function (index, item) {
                    names.push(item.department); //挨個取出類別并填入類別數(shù)組                    
                    nums.push(item.num); //挨個取出銷量并填入銷量數(shù)組
                    bers.push(item.ber); //挨個取出銷量并填入銷量數(shù)組
                });
                myChart.hideLoading(); //隱藏加載動畫
                myChart.setOption({ //加載數(shù)據(jù)圖表
                    xAxis: {
                        data: names
                    },
                    series: [{
                            // 根據(jù)名字對應到相應的系列
                            name: 發(fā)布排行, //顯示在上部的標題
                            data: nums
                        },
                        {
                            // 根據(jù)名字對應到相應的系列
                            name: 牽手排行, //顯示在上部的標題
                            data: bers
                        }
                    ]
                });
            },
            error: function (errorMsg) {
                //請求失敗時執(zhí)行該函數(shù)
                alert("圖表請求數(shù)據(jù)失敗!");
                myChart.hideLoading();
            }
        });
    script>
body>

　　一個簡單的柱狀圖表展示

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

GPU云服務器云服務器動態(tài)加載數(shù)據(jù) js動態(tài)加載數(shù)據(jù) ajax動態(tài)加載數(shù)據(jù) js 動態(tài)加載數(shù)據(jù)

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

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

echarts動態(tài)獲取數(shù)據(jù)實例

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

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

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

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

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

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

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

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

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

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