Heim > Web-Frontend > js-Tutorial > ECharts3 implementiert den Betrieb dynamischer Daten + Zeitachse

ECharts3 implementiert den Betrieb dynamischer Daten + Zeitachse

一个新手
Freigeben: 2017-09-22 09:38:26
Original
10863 Leute haben es durchsucht

ECharts3 implementiert den Betrieb dynamischer Daten + Zeitachse
Die Instanz der dynamischen Daten- und Zeitkoordinatenachse auf der offiziellen Website von ECharts3 wurde geändert. Die X-Achse ist die aktuelle Zeit und die Daten werden akkumuliert.

Sie können es in das Codefeld in der ECharts3-Instanz einfügen, um den Effekt direkt zu sehen.

function randomData() {
    now = new Date(+now + 1000);
    value = value + Math.random() * 21 - 10;    
    return {
        name: now.toString(),
        value: [
            now,            
            Math.round(value)
        ]
    }
}var data = [];var now = new Date();var value = Math.random() * 1000;

option = {
    title: {
        text: '动态数据 + 时间坐标轴'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];            
            var date = new Date(params.name);            
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }]
};
setInterval(function () {
        //data.shift();
        data.push(randomData());
    myChart.setOption({
        series: [{
            data: data
        }]
    });
}, 1000);
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonECharts3 implementiert den Betrieb dynamischer Daten + Zeitachse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage