Cara menggunakan carta mawar untuk memaparkan perkadaran data dalam ECharts

Cara menggunakan carta mawar untuk memaparkan perkadaran data dalam ECharts

Abstrak: Carta mawar ialah alat analisis data visual yang boleh digunakan untuk memaparkan perkadaran data. Artikel ini akan memperkenalkan cara menggunakan perpustakaan ECharts untuk melukis carta mawar dalam halaman web dan memberikan contoh kod khusus.

Pengenalan: Dalam analisis dan visualisasi data, carta mawar ialah jenis carta yang biasa digunakan. Cirinya ialah pusat bulatan ialah asal dan perkadaran data dipaparkan sebagai sudut sektor yang berbeza. Melalui carta mawar, kita boleh membandingkan secara visual perkadaran kategori data yang berbeza. ECharts ialah perpustakaan visualisasi data yang berkuasa yang menyokong pelbagai jenis carta, termasuk carta mawar.

Artikel ini akan dibahagikan kepada bahagian berikut:

1. Memperkenalkan perpustakaan ECharts
2. Menyediakan data
3. Membuat bekas
4. Tetapkan pilihan carta
5. Melukis pustaka
6. Melukis mawar t daripada semua, kita perlu menambahkannya ke halaman web Memperkenalkan perpustakaan ECharts. Ia boleh diimport terus melalui CDN, atau diimport selepas memuat turun fail sumber ECharts.
   

<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>

Sediakan data
2. Sebelum melukis carta mawar, kita perlu menyediakan data untuk dipaparkan. Sebagai contoh, berikut ialah contoh data ringkas yang menunjukkan jualan produk di wilayah yang berbeza.
   

var data = [
  {name: '地区1', value: 50},
  {name: '地区2', value: 30},
  {name: '地区3', value: 80},
  {name: '地区4', value: 60},
  {name: '地区5', value: 40}
];

Antaranya, nama mewakili nama wilayah, dan nilai mewakili volum jualan di wilayah tersebut.

Buat bekas
3. Dalam halaman web, kita perlu mencipta bekas untuk memegang carta. Anda boleh menggunakan elemen div sebagai bekas dan tetapkan lebar dan ketinggian.
   

<div id="chart" style="width: 800px; height: 600px;"></div>

Tetapkan pilihan carta
4. Sebelum melukis carta, anda perlu menetapkan beberapa pilihan carta, seperti tajuk, legenda, warna, dll. Berikut ialah pilihan carta contoh:
   

var option = {
  title: {
    text: '产品销售占比',
    left: 'center'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['地区1', '地区2', '地区3', '地区4', '地区5']
  },
  color: ['#2378e1', '#60a1bc', '#87d9ef', '#de742f', '#7dbb94']
};

Antaranya, tajuk mewakili tajuk carta, legenda mewakili legenda, data mewakili nama legenda, dan warna mewakili warna sektor.

Melukis Carta Mawar
5. Akhir sekali, kami menggunakan kaedah echarts.init pustaka ECharts, masukkan ID bekas, buat contoh carta dan gunakan kaedah setOption untuk menetapkan pilihan dan data carta.
   

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

Melalui langkah di atas, kita boleh melukis gambar rajah mawar di halaman web.

Ringkasan: Artikel ini memperkenalkan cara menggunakan perpustakaan ECharts untuk melukis carta mawar dalam halaman web dan menyediakan contoh kod khusus. Melalui carta mawar, kami boleh memaparkan perkadaran data secara visual dan membantu kami menjalankan analisis data dan membuat keputusan. Saya harap artikel ini dapat membantu pembaca memahami dan menggunakan gambar rajah mawar.

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