Cara melaksanakan kemas kini data masa nyata dalam ECharts

WBOY
Lepaskan: 2023-12-17 14:07:07
asal
1587 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:

    ECharts实时数据更新     
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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!