Cara melaksanakan kemas kini data masa nyata dalam ECharts-tutorial js-php.cn

Cara melaksanakan kemas kini data masa nyata dalam ECharts

WBOY

Lepaskan： 2023-12-17 14:07:07

asal

1733 orang telah melayarinya

Cara melaksanakan kemas kini data masa nyata dalam ECharts

ECharts ialah perpustakaan carta visual sumber terbuka yang menyokong pelbagai jenis carta dan kesan visualisasi data yang kaya. Dalam senario sebenar, kita selalunya perlu memaparkan data masa nyata, iaitu, apabila sumber data berubah, carta boleh dikemas kini serta-merta dan membentangkan data terkini.

Jadi, bagaimana untuk mencapai kemas kini data masa nyata dalam ECharts? Berikut ialah contoh demonstrasi kod khusus.

Pertama, kita perlu memperkenalkan fail js dan gaya tema ECharts:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts实时数据更新</title>
    <!--引入ECharts的js文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
    <!--引入ECharts主题样式-->
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/theme/macarons.min.js"></script>
</head>
<body>
    <!--ECharts图表容器-->
    <div id="chart" style="width: 800px;height: 600px;"></div>
</body>
</html>

Salin selepas log masuk

Seterusnya, kita perlu menentukan sumber data untuk mensimulasikan perubahan data masa nyata:

// 模拟实时数据
var data = [120, 132, 101, 134, 90, 230, 210];
setInterval(function() {
    // 修改数据
    data.shift();
    data.push(Math.random() * 200);
}, 3000);

Salin selepas log masuk

Antaranya, fungsi setInterval digunakan setiap 3 saat Kemas kini data sekali, Math.random() * 200 menjana nombor rawak untuk mensimulasikan perubahan dalam data. Sudah tentu, dalam aplikasi praktikal, kita perlu mendapatkan dan memproses data mengikut keadaan tertentu.

Seterusnya, kita perlu mentakrifkan contoh carta ECharts dan memaparkan carta ke halaman HTML:

// 定义ECharts图表实例
var chart = echarts.init(document.getElementById('chart'),'macarons');

// 渲染图表
chart.setOption({
    title: {
        text: 'ECharts实时数据更新演示',
        subtext: '数据源从左侧滚动',
        left: 'center'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [{
        name: '温度',
        type: 'line',
        data: data
    }]
});

Salin selepas log masuk

Dalam ECharts, kita perlu menetapkan pelbagai sifat carta melalui fungsi setOption, termasuk tajuk, paksi, siri data, dsb. . Dalam contoh ini, kami menetapkan koordinat paksi-X yang mengandungi 7 hari, koordinat paksi-Y ialah nilai suhu, siri data ialah data suhu dan jenisnya ialah carta garis. Selain itu, kami menggunakan gaya tema macarons untuk mencantikkan kesan paparan carta.

Akhir sekali, kami perlu menggunakan pemasa untuk mengemas kini data carta secara berterusan untuk mencapai paparan data masa nyata:

// 定时更新数据
setInterval(function() {
    // 更新数据
    data.shift();
    data.push(Math.random() * 200);
    
    // 更新图表
    chart.setOption({
        series: [{
            data: data
        }]
    });
}, 3000);

Salin selepas log masuk

Dalam pemasa, kami menggunakan fungsi anjakan untuk mengeluarkan nilai pertama sumber data, dan tolakan fungsi akan menjana rawak Nombor ditambah pada penghujung sumber data untuk merealisasikan transformasi data. Selepas itu, kami mengemas kini siri data carta ECharts melalui fungsi setOption untuk mencapai paparan masa nyata carta.

Ringkasnya, perkara di atas ialah contoh kod khusus tentang cara melaksanakan kemas kini data masa nyata dalam ECharts. Dalam penggunaan sebenar, kita boleh menyesuaikan dan mengoptimumkan mengikut keperluan sebenar kita.

Atas ialah kandungan terperinci Cara melaksanakan kemas kini data masa nyata dalam ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!