Rumah >hujung hadapan web >tutorial js >Carta berbilang paksi ECharts: cara memaparkan data berbilang dimensi

Carta berbilang paksi ECharts: cara memaparkan data berbilang dimensi

WBOYasal: 2023-12-18 18:39:542007semak imbas

Carta berbilang paksi ECharts: Bagaimana untuk memaparkan data berbilang dimensi, contoh kod khusus diperlukan

Pengenalan:
Dengan kemunculan era data besar, kami perlu memaparkan data berbilang dimensi yang kompleks dengan lebih baik. Sebagai perpustakaan visualisasi yang berkuasa, ECharts menyediakan pelbagai jenis carta, antaranya carta berbilang paksi merupakan salah satu alat penting untuk memaparkan data berbilang dimensi. Artikel ini akan memperkenalkan carta berbilang paksi dan cara menggunakan ECharts untuk memaparkan data berbilang dimensi dan memberikan contoh kod yang sepadan.

1. Apakah carta berbilang paksi Carta berbilang paksi ialah carta yang boleh memaparkan berbilang siri data dengan unit dan magnitud data yang berbeza pada carta yang sama. Dengan menggunakan berbilang paksi, satu untuk setiap siri data, kami boleh membandingkan data dengan lebih intuitif merentas dimensi yang berbeza.

2. Item konfigurasi carta berbilang paksi ECharts

Untuk mencipta carta berbilang paksi, kita perlu menetapkan berbilang sifat dalam objek pilihan ECharts. Berikut ialah item konfigurasi utama yang perlu ditetapkan:

atribut legenda: digunakan untuk mengkonfigurasi legenda, iaitu, pengenalan warna dalam carta, digunakan untuk membezakan siri data yang berbeza.
sifat xAxis dan yAxis: digunakan untuk mengkonfigurasi berbilang paksi. xAxis mengkonfigurasi paksi-x, dan yAxis mengkonfigurasi paksi-y. Berbilang paksi boleh dikonfigurasikan dalam bentuk tatasusunan. Atribut
siri: digunakan untuk mengkonfigurasi siri data. Setiap siri data sepadan dengan paksi dan boleh mempunyai jenis data dan kaedah pembentangan carta yang berbeza.

3. Contoh Kod

Di bawah kami menggunakan contoh kod khusus untuk menunjukkan cara menggunakan ECharts untuk mencipta carta berbilang paksi untuk memaparkan data berbilang dimensi. Mari kita mulakan dengan contoh merchandising.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multi-axis Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px; height: 400px;"></div>
</body>
</html>

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

var option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['电视销量', '冰箱销量', '洗衣机销量']
    },
    xAxis: [
        {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月']
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '销量'
        },
        {
            type: 'value',
            name: '销售额'
        }
    ],
    series: [
        {
            name: '电视销量',
            type: 'bar',
            data: [120, 200, 150, 80, 70]
        },
        {
            name: '冰箱销量',
            type: 'bar',
            data: [80, 100, 120, 150, 110]
        },
        {
            name: '洗衣机销量',
            type: 'line',
            yAxisIndex: 1,
            data: [1000, 1500, 2000, 1800, 1600]
        }
    ]
};

chart.setOption(option);

Dalam kod di atas, kami menyediakan tiga siri data: jualan TV, jualan peti sejuk dan jualan mesin basuh. Antaranya, jualan TV dan jualan peti sejuk dipaparkan menggunakan carta bar, dan jualan mesin basuh dipaparkan menggunakan carta garis. Jumlah jualan dan jualan dipaparkan menggunakan paksi-y yang berbeza.

4. Ringkasan

ECharts menyediakan fungsi carta berbilang paksi, yang boleh memaparkan data berbilang dimensi dengan mudah. Dengan menetapkan item konfigurasi yang sesuai, kami boleh mencipta graf berbilang paksi yang cantik dan intuitif. Melalui kod sampel dalam artikel ini, anda boleh mula menggunakan ECharts dengan cepat untuk melukis carta berbilang paksi dan menggunakannya pada projek anda sendiri.

Pautan rujukan:

[dokumen rasmi ECharts](https://echarts.apache.org/zh/index.html)

Atas ialah kandungan terperinci Carta berbilang paksi ECharts: cara memaparkan data berbilang dimensi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

echarts html 数据类型对象 apache https

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk memasukkan carta yang cantik ke dalam laman web anda menggunakan HighchartsArtikel seterusnya：Bagaimana untuk memasukkan carta yang cantik ke dalam laman web anda menggunakan Highcharts

Artikel berkaitan

Lihat lagi