Carta berbilang paksi ECharts: cara memaparkan data berbilang dimensi

WBOY
Lepaskan: 2023-12-18 18:39:54
asal
1817 orang telah melayarinya

Carta berbilang paksi ECharts: cara memaparkan data berbilang dimensi

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 petua alat: digunakan untuk memaparkan maklumat terperinci siri data. Sebagai contoh, apabila tetikus dilegar di atas carta, nilai khusus data akan dipaparkan.
  1. atribut legenda: digunakan untuk mengkonfigurasi legenda, iaitu, pengenalan warna dalam carta, digunakan untuk membezakan siri data yang berbeza.
  2. 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
  3. 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.

    Perkenalkan perpustakaan ECharts dan fail gaya berkaitan:
  1.     Multi-axis Chart Example  
      
    Salin selepas log masuk
    Buat carta berbilang paksi dan konfigurasikan sifat berkaitan:
  1. 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);
    Salin selepas log masuk
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!

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!