ECharts動態資料+時間軸+dataZoom

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

<!DOCTYPE html>
<html lang="en"  style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Map</title>
    <style>
        body{
            position: relative;
            font-family: "Microsoft YaHei UI";
            /*background-color: #000000;*/
        }
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        ul,li{
            list-style: none;
        }
        .clear:after{
            display: block;
            content: "";
            clear:both;
        }
        #chart{
            width: 99%;
            height: 80%;
        }
        #timeSpan{
            margin-top: 2%;
        }
        #timeSpan>li{
            float: left;
            width: 100px;
            height: 20px;
            border-radius: 5px;
            background-color: #95BB2F;
            text-align: center;
            cursor: pointer;
            margin-left: 50px;
        }
    </style>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body style="height: 100%; margin: 0;min-width: 1200px;min-height: 770px">
<ul id="timeSpan" class="clear">
    <li>5min</li>
    <li>10min</li>
    <li>15min</li>
    <li>30min</li>
</ul>
<div id="chart"></div>


<script>
    $(function () {
        // var data123 = [
        //     { value: [ '2016/2/18 03:00:00', 363 ] },
        //     { value: [ '2016/2/18 04:00:00', 384 ] },
        //     { value: [ '2016/2/18 05:00:00', 371 ] },
        // ];
        var data_in = [
            918.32,
            902.51,
            900.41,
            873.43,
            885.39,
            897.63,
            892.44,
            879.04,
            850.83,
            848.52,
            844.87,
            834.54,
            832.48,
            815.48,
            811.23,
            821.20,
            805.10,
            794.49,
            801.23,
            788.80,
            769.70,
            789.80,
            763.46,
            758.57,
            773.49,
            764.45,
            739.66,
            757.55,
            731.12,
            724.06,
            732.70,
            723.80,
            714.91,
            723.46,
            705.10,
            708.90,
            723.75,
            703.06,
            684.51,
            692.63,
            683.14,
            671.95,
            691.97,
            684.04,
            667.59,
            688.56,
            659.01,
            652.39,
            670.98,
            638.10,
            655.85,
            627.21,
            648.82,
            631.68,
            614.94,
            642.69,
            626.22,
            613.44,
            641.15,
            613.90,
            601.39,
            623.22,
            602.94,
            589.90,
            612.01,
            590.85,
            591.51,
            585.67,
            559.47,
            557.43,
            518.20,
            504.63,
            506.67,
            512.66,
            440.93,
            614.94,
            642.69,
            626.22,
            613.44,
            641.15,
            613.90,
            601.39,
            623.22,
            602.94,
            598.28,
            593.18,
            625.85,
            625.43,
            611.52,
            660.33,
            669.41,
            707.86,
            729.56,
            728.72,
            770.35,
            800.78,
            791.52,
            797.62,
            808.94,
            625.43,
            611.52,
            660.33,
            669.41,
            707.86,
            729.56,
            728.72,
            770.35,
            800.78,
            676.64,
            598.28,
            593.18,
            625.85,
            625.43,
            611.52,
            660.33,
            669.41,
            707.86,
            729.56,
            728.72,
            770.35,
            800.78,
            791.52,
            797.62,
            808.94,
            817.76,
            797.77,
            806.65,
            763.81,
            771.01,
            796.27,
            777.58,
            776.37,
            821.18,
            814.54,
            832.37,
            853.91,
            870.55,
            861.75,
            888.66,
            888.60,
            910.95,
            934.58,
            920.79,
            923.61,
            921.88,
            1096.03,
            1041.94,
            951.67,
            932.29,
            935.73,
            941.29,
            944.34,
            965.24,
            928.95,
            943.34,
            968.91,
            977.17,
            941.77,
            964.47,
            964.86,
            926.30,
            929.23,
            934.07,
            974.39,
            977.48,
            953.90,
            929.79,
            948.32,
            943.09,
            933.89,
            948.30,
            934.66,
            936.59,
            958.61,
            930.23,
            927.04,
            966.15,
            923.08,
            887.60,
            924.59,
            909.70,
            889.48,
            892.51,
            906.88,
            907.99,
            927.54,
            902.11,
            902.41,
            940.20,
            937.34,
            952.79,
            952.53,
            944.37,
            952.09,
            924.20,
            924.65,
            939.26,
            967.97,
            988.18,
            1017.07,
            1007.07,
            1014.48,
            1016.72,
            1007.58,
            974.98,
            1053.01,
            1044.22,
            1038.93,
            1029.50,
            1093.14,
            1124.30,
            1120.13,
            1123.74,
            1105.22,
            1132.26,
            1124.54,
            1137.46,
            1177.16,
            1114.36,
            1087.06,
            1096.11,
            1083.61,
            1096.21,
            1069.42,
            1090.59,
            1081.66,
            1095.27,
            1105.93,
            1098.18,
            1102.24,
            1115.35,
            1127.81,
            1139.65,
            1159.92,
            1180.29,
            1157.27,
            1201.08,
            1186.57,
            1200.80,
            1244.75,
            1216.21,
            1199.90,
            1224.75,
            1188.85,
            1180.26,
            1151.10,
            1173.41,
            1156.91,
            1160.99,
            1160.67,
            1158.08,
            1129.06,
            1100.04,
            1068.78,
            1102.13,
            1079.86,
            1029.01,
            1032.81,
            995.74,
            979.22,
            924.57,
            901.16,
            868.52,
            964.42,
            902.96,
            899.91,
            902.52,
            926.63,
            899.92,
            911.75,
            879.48,
            857.78,
            862.70,
            868.01,
            868.61,
            867.72,
            831.92,
            841.49,
            828.46,
            918.32,
            902.51,
            900.41,
            873.43,
            885.39,
            897.63,
            892.44,
            879.04,
            850.83,
            848.52,
            918.32,
            902.51,
            900.41,
            873.43,
            885.39,
            897.63,
            892.44,
            879.04,
            850.83,
            848.52,
            844.87,
            834.54,
            832.48,
            815.48,
            811.23,
            821.20,
            805.10,
            794.49,
            801.23,
            788.80,
            769.70,
            789.80,
            763.46,
            758.57,
            773.49,
            764.45,
            739.66,
            757.55,
            731.12,
            724.06,
            732.70,
            723.80,
            714.91,
            723.46,
            705.10,
            708.90,
            723.75,
            703.06,
            684.51,
            692.63,
            683.14,
        ];
        var oneDay = 24 * 3600 *1000;
        var fiveMinutes = 300 * 1000;
        var timestr = '2016/2/18 00:00:00';
        var startTime = +new Date(timestr)-fiveMinutes;

        //把new Date出來的時間格式轉換為data123中的日期格式
        function riqigeshi(now){
            return now.toLocaleDateString() + ' ' + now.getHours() + now.toLocaleTimeString().substr(-6,6)
        }

        //用來返回data123一樣的資料格式
        function chartData(i,data,now) {
            return {
                value: [
                    riqigeshi(now),
                    data[i]/1024,
                ]
            }
        }

        //把原資料改成data123一樣的格式
        function changeData(datain) {
            var liuru = [];
            for (var i = 0; i < 289; i++) {
                startTime = new Date(+startTime + fiveMinutes);
                liuru.push(chartData(i,datain,startTime));
            }
            return liuru;
        }
        var liuru = changeData(data_in);

        var chart = echarts.init(document.getElementById("chart"));
        var option = {
            grid:{
                x:'3.6%',
                y:'5%',
                x2:'2.4%',
                y2:'12%',
            },
            xAxis:{
                type:'time',
                splitNumber:24
            },
            yAxis:{
                type:'value',
                axisLabel:{
                    formatter:'{value} G'       //給Y軸上的刻度加上單位
                },
            },
            dataZoom: [
                {
                    type: 'slider',//資料滑塊
                    start:0,
                    minSpan:8,    //5min
                    // minSpan:16,   //10min
                    // minSpan:24,   //15min
                    // minSpan:50,   //30min
                    dataBackground:{
                        lineStyle:{
                            color:'#95BC2F'
                        },
                        areaStyle:{
                            color:'#95BC2F',
                            opacity:1,
                        }
                    },
                    // fillerColor:'rgba(255,255,255,.6)'
                },
                {
                    type:'inside'//使滑鼠在圖表中時滾輪可用
                }
            ],
            tooltip:{
                trigger: 'axis',
                formatter : function(params) {
                    var result = params[0].value[0];
                    params.forEach(function(item) {
                        result += '<br/>';
                        result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
                        result += item.seriesName + "：";
                        result += isNaN(item.value[1]) ? 0 : (item.value[1]*1024).toFixed(2) + "M";
                    });
                    return result;
                },
            },
            series:{
                name: '流入',
                type: 'line',
                showSymbol: false,
                symbolSize:12,
                data: liuru,
            }
        };

        chart.setOption(option);

        $("#timeSpan").on('click','li',function () {
            var timeSpan = $(this).html();
            switch(timeSpan){
                case '5min':
                    chart.setOption({
                        dataZoom:[
                            {
                                start:92,
                                end:100
                            }
                        ],
                    });
                    break;
                case '10min':
                    chart.setOption({
                        dataZoom:[
                            {
                                start:84,
                                end:100
                            }
                        ],
                    });
                    break;
                case '15min':
                    chart.setOption({
                        dataZoom:[
                            {
                                start:76,
                                end:100
                            }
                        ],
                    });
                    break;
                case '30min':
                    chart.setOption({
                        dataZoom:[
                            {
                                start:50,
                                end:100
                            }
                        ],
                    });
                    break;
            }
        });

        function refresh() {
            // liuru先shift(),再push()
            var liuruShift = liuru.shift();
            var liuruShiftVal = liuruShift.value[1];
            var newlrtime = riqigeshi(new Date(+new Date(liuruShift.value[0])+oneDay+fiveMinutes));
            liuru.push({value:[newlrtime,liuruShiftVal]});
            chart.setOption({
                series:{
                    data:liuru,
                }
            });
        }

        setInterval(function () {
            refresh();
        },3000);

        window.onresize = function () {
            chart.resize();
        };
    }());

</script>
</body>
</html>

ECharts動態資料+時間軸+dataZoom

<!DOCTYPE html> <html lang="en" style="height: 100%"> <head> <meta charset="UTF-8"> <title>Map</

echarts通過timeline時間軸改變圖表的資料，解決X軸，series問題

問題敘述：通過echarts的時間軸進行資料、X軸座標以及每個option的屬性都不一樣的進行圖表切換。這裡面使用的是echarts2.0版本，可惜的是我鼓搗半天也沒弄出來echarts3.0的timelinechanged方法，希望知道的人可以告知一下。例如：我想xAx

關於Echarts動態資料之圖形變換

我使用的是.net作為後臺語言，而與前臺aspx中的js進行資料流通是很多人不知道的地方，那麼我就先從這裡說起。 1. 學過java的都知道java是jsp的指令碼語言，同理.net也是aspx的指令碼語言，例如呼叫後臺陣列使用<%=a

echarts 動態資料互動例項

最近在學習echarts，找到了很多的資料，找起來比較麻煩，為了方便自己以後的使用，特此做個筆記。首先是echarts如何使用，要先下載echarts相關的包，我這邊提供的是echarts3.0的下載地址：http://echarts.baidu.com/download

echarts折線圖時間軸展示

[javascript] view plain copy echarts折線圖，我們平時在使用的時候，x軸上面的資料通常會有很多很多，使得x軸上面的資料通常顯示不完整

【echarts應用】--橫軸每五分鐘取一個點，動態時間軸實現

需求：折線圖需要定點時間（例如五分鐘）取一個點，在一段範圍內（昨天的某個時間點到目前時間或者今天凌晨12點到目前的時間點），這種動態生成的時間軸。以下以從當天的十二點開始，到當前時間點為止（五分鐘以及其他時間一個道理）的demo 推薦一個很好用的獲取時間以及改變想要的時間格式的外掛mo

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

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

Echarts 通過時間軸timeline改變xAxis.data資料進行不合並處理

寫在前面：使用時間軸 timeline 繪製圖形的時候會有一種動態的效果，讓圖形看起來更加生動，也達到了互動式資料的展現。但是在使用 timeline 的時候我遇到了幾個問題，

echarts中視覺映射器（visualMap）與時間軸（timeline）混用的實現方法

images mon label axis poi max 時間軸 asc clas 1、簡述　　echarts中的 timeline 組件，提供了在多個 ECharts option 間進行切換、播放等操作的功能。　　與其他組件些不同，它需要操作『多個option』。所

ECharts xAxis.type='time'時間軸時卡頓問題

rip 坐標軸 urn UNC htm var EDA () dom 原文首發於我的個人網站： https://lonhon.top/ 卡頓問題出現背景： ECharts^4.0.4 + Vue^2.5.9 option中主要耗能設置為：折線圖 + Y軸2 + serie

開發時間軸動態顯示圖譜展示功能技術收穫

下面我來總結一下本次開發過程中的收穫，（1）在前端向後端請求資料一般用的都是ajax進行請求，其中有關ajax的知識點我在這裡簡單的談談我現階段比較粗淺的認識，首先ajax預設的是非同步請求，如果想進行同步請求的話要把async設定成false,同步和非同步請求的區別的地方是：用ajax進行同步請求

開發時間軸動態掃描圖譜展示功能總結

開發時間軸動態掃描圖譜展示功能已經有大約有35天了，這期間遇到過不少的困難和挑戰，同時也收穫頗豐。最初的狀態是看到後端程式碼的不知所措，看到前端程式碼的一臉茫然，這期間的過程是痛苦的，想盡快完成任務，無奈水平和能力有限，無論怎麼掙扎和努力都進度緩慢。有的時候人必須認清現實，有些事是急不

解決使用echarts做動態資料餅圖展示中data如何傳值的問題

** 解決使用echarts做動態資料餅圖展示中data如何傳值的問題 ** 如圖，將所查出的資料以餅圖形式展示下面是頁面data的傳值方法這是data，請忽略data裡的那些值。那是用來測試用的，首先將從資料庫查出的資料裝到兩個list裡面，再通過json傳到前臺。

百度ECharts圖表展示動態資料

百度ECharts是個非常強大的圖表工具，引入百度提供的echarts.min.js檔案後，只需從後臺獲取資料便可以圖表的形式展示資料，能夠更直觀的檢視、比較、統計資料。這裡以一個柱狀圖展示動態資料的小例子講解如何使用百度ECharts。 1.首先引入需要的js檔案： <

vue專案中使用Echarts 動態更改圖表資料， Vue 折線圖、柱狀圖等圖表動態重新整理，

問題：在vue元件中，用echarts外掛動態獲取、修改圖表資料解決：已解決！第一步：開啟cmd命令視窗安裝echarts依賴安裝：npm install echarts -S 第二步：在main.js中全域性引入 //引入echarts的圖表外掛

echarts重新整理資料時x軸資料不變的問題

寫了一個echarts，再重新整理圖形的時候，發現x軸不變，經過多方查詢發現問題，如下：開始的時候我的寫法如下， var myChart2 = echarts.init(document.getElementById("charts2"), 'shine'); opti

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

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

Echarts的用法及動態資料的載入

開啟官網--》點選下載 echarts.js http://www.echartsjs.com/download.html <!DOCTYPE html> <html> <head> <meta charset="UTF-

Echarts 動態從後臺獲取資料進行圖表的展示

前端部分： <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 為EChart

[Echarts視覺化] 二.php和ajax連線資料庫實現動態資料視覺化

前一篇文章 "[Echarts視覺化] 一.入門篇之簡單繪製中國地圖和貴州地區" 主要是通過Echarts視覺化介紹入門知識、中國地圖和貴州地區各省份的資料分析，其中貴州地圖才是它的核心內容。這篇文章主要結合PHP、MySQL、JQuery和Ajax從資料庫中獲取資料，動態的

ECharts動態資料+時間軸+dataZoom

相關推薦