Rumah > Artikel > hujung hadapan web > Cara menggunakan carta mawar corong untuk memaparkan perkadaran data dan kadar penukaran dalam ECharts
Cara menggunakan carta mawar corong untuk memaparkan perkadaran data dan kadar penukaran dalam ECharts
- 王林asal
- 2023-12-18 08:10:101348semak imbas
Cara mawar corong untuk memaparkan perkadaran data dan kadar penukaran dalam ECharts
Ikhtisar:
Carta mawar corong ialah carta visualisasi data yang biasa digunakan, yang boleh memaparkan perkadaran data dan kadar penukaran dengan jelas. Dalam ECharts, kita boleh mencapai kesan paparan carta mawar corong dengan mudah melalui pemprosesan dan konfigurasi data yang mudah. Artikel ini akan memperkenalkan cara menggunakan carta mawar corong dalam ECharts untuk memaparkan perkadaran data dan kadar penukaran serta memberikan contoh kod yang sepadan.
Langkah 1: Sediakan data
Pertama, kita perlu menyediakan data untuk dipaparkan. Katakan kita mempunyai data berikut:
var data = [
{ value: 100, name: '阶段1' },
{ value: 80, name: '阶段2' },
{ value: 60, name: '阶段3' },
{ value: 40, name: '阶段4' },
{ value: 20, name: '阶段5' }
];Antaranya, nilai mewakili jumlah data dalam setiap peringkat, dan nama mewakili nama setiap peringkat.
Langkah 2: Konfigurasikan carta
Seterusnya, kita perlu mengkonfigurasi gaya dan sifat carta mawar corong. Berikut ialah contoh konfigurasi mudah:
var option = {
series: [
{
name: '漏斗玫瑰图',
type: 'pie',
radius: ['40%', '55%'],
center: ['50%', '50%'],
roseType: 'radius',
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
data: data
}
]
};Isi utama dalam konfigurasi termasuk:
- taip menentukan jenis carta sebagai 'pai', iaitu carta pai.
- jejari menetapkan jejari dalam dan luar carta pai, diwakili di sini dengan tatasusunan. ['40%', '55%'] bermakna jejari dalam ialah 40% dan jejari luar ialah 55%.
- pusat menetapkan kedudukan titik tengah carta pai, yang diwakili di sini dengan tatasusunan. ['50%', '50%'] bermaksud di tengah-tengah kanvas.
- roseType menetapkan jenis carta pai kepada 'radius', yang mewakili carta mawar corong.
- data menetapkan sumber data carta pai Data yang disediakan di atas digunakan di sini.
Langkah 3: Lukis carta
Akhir sekali, kita perlu melukis carta melalui contoh ECharts. Dalam halaman HTML, kami mencipta teg skrip yang mengandungi kod berikut:
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option);Dalam kod di atas, kami menggunakan kaedah document.getElementById('carta') untuk mendapatkan div bekas yang digunakan untuk memaparkan carta dalam halaman HTML dan paskannya Berikan kaedah echarts.init() untuk mencipta contoh ECharts. Kemudian, kami memanggil kaedah setOption() untuk menetapkan item konfigurasi untuk contoh.
Ringkasnya, melalui tiga langkah di atas, kita boleh menggunakan carta mawar corong untuk memaparkan bahagian data dan kadar penukaran dalam ECharts. Kod lengkap adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>漏斗玫瑰图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<script>
var data = [
{ value: 100, name: '阶段1' },
{ value: 80, name: '阶段2' },
{ value: 60, name: '阶段3' },
{ value: 40, name: '阶段4' },
{ value: 20, name: '阶段5' }
];
var option = {
series: [
{
name: '漏斗玫瑰图',
type: 'pie',
radius: ['40%', '55%'],
center: ['50%', '50%'],
roseType: 'radius',
label: {
show: false
},
emphasis: {
label: {
show: true
}
},
data: data
}
]
};
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option);
</script>
</body>
</html>Melalui kod di atas, jalankan halaman HTML dalam penyemak imbas, dan anda akan dapat melihat carta yang dipanggil "Carta Mawar Corong", menunjukkan perkadaran data dan kadar penukaran.
Kesimpulan:
Artikel ini memperkenalkan cara menggunakan carta mawar corong untuk memaparkan perkadaran data dan kadar penukaran dalam ECharts. Melalui pemprosesan dan konfigurasi data yang mudah, kami boleh mencapai kesan paparan carta mawar corong dengan mudah. Saya berharap pembaca dapat memahami kemahiran penggunaan ECharts asas melalui artikel ini, dan mengaplikasi serta mengembangkannya dalam projek visualisasi data sebenar.
Atas ialah kandungan terperinci Cara menggunakan carta mawar corong untuk memaparkan perkadaran data dan kadar penukaran dalam ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!