Cara menggunakan carta kalendar untuk memaparkan data masa dalam ECharts-tutorial js-php.cn

Cara menggunakan carta kalendar untuk memaparkan data masa dalam ECharts

王林

Lepaskan： 2023-12-18 08:52:06

asal

1669 orang telah melayarinya

Cara menggunakan carta kalendar untuk memaparkan data masa dalam ECharts

ECharts (pustaka carta JavaScript sumber terbuka Baidu) ialah alat visualisasi data yang berkuasa dan mudah digunakan. Ia menawarkan pelbagai jenis carta, termasuk carta garisan, carta bar, carta pai dan banyak lagi. Carta kalendar ialah jenis carta yang sangat tersendiri dan praktikal dalam ECharts, yang boleh digunakan untuk memaparkan data berkaitan masa. Artikel ini akan memperkenalkan cara menggunakan carta kalendar dalam ECharts dan memberikan contoh kod khusus.

Pertama, anda perlu mengimport perpustakaan ECharts dan mencipta bekas untuk memaparkan carta. Berikut ialah contoh fail HTML yang mudah:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 日历图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 100%; height: 600px;"></div>
    <script>
        // 在这里编写JavaScript代码
    </script>
</body>
</html>

Salin selepas log masuk

Seterusnya, anda perlu menyediakan data untuk paparan dalam carta kalendar. Data harus mengandungi cap masa dan nilai yang sepadan. Berikut ialah sampel set data:

var data = [
    {time: "2022-01-01", value: 10},
    {time: "2022-01-02", value: 20},
    {time: "2022-01-03", value: 15},
    // 其他数据...
];

Salin selepas log masuk

Kemudian, dalam bahagian kod JavaScript, anda perlu melakukan langkah berikut untuk melukis carta kalendar:

Buat contoh ECharts dan nyatakan bekas carta:

var chart = echarts.init(document.getElementById('chart'));

Salin selepas log masuk

Konfigurasikan parameter asas carta kalendar (Seperti tajuk, paksi, dll.):

var option = {
    title: {
        text: '时间数据的日历图示例',
        left: 'center'
    },
    tooltip: {},
    calendar: {
        left: 'center',
        top: 'middle',
        orient: 'horizontal',
        cellSize: [30, 30],
        range: ['2022-01-01', '2022-12-31']
    },
    series: [{
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: data
    }]
};

Salin selepas log masuk

Dalam contoh di atas, kami menetapkan tajuk carta kalendar kepada "Contoh Carta Kalendar Data Masa" dan meletakkan carta kalendar di kedudukan tengah. Tetapkan cellSize kepada [30, 30] untuk mengawal saiz setiap grid tarikh. Gunakan range untuk menetapkan julat masa carta.

Gunakan item konfigurasi pada carta:

chart.setOption(option);

Salin selepas log masuk

Akhir sekali, anda hanya perlu membuka fail HTML dan anda boleh melihat carta kalendar yang dilukis!

Ringkasnya, adalah sangat mudah untuk menggunakan carta kalendar ECharts untuk memaparkan data masa. Anda hanya perlu menyediakan data anda dan ikuti langkah di atas untuk mengkonfigurasi dan memaparkan carta. Sudah tentu, anda juga boleh melaraskan kesan paparan dan gaya carta mengikut keperluan anda sendiri.

Nota: Contoh di atas adalah untuk demonstrasi sahaja dan tidak memberikan set data lengkap dan kod lengkap. Dalam permohonan sebenar, sila buat pengubahsuaian yang sepadan mengikut keperluan anda sendiri.

Saya harap artikel ini akan membantu anda memahami cara menggunakan carta kalendar untuk memaparkan data masa dalam ECharts!

Atas ialah kandungan terperinci Cara menggunakan carta kalendar untuk memaparkan data masa dalam ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!