Cara menggunakan peta pokok segi empat tepat untuk memaparkan hierarki data dalam ECharts

Cara menggunakan peta pokok segi empat tepat untuk memaparkan struktur hierarki data dalam ECharts

Pengenalan:
Dalam visualisasi data, peta pokok segi empat tepat ialah jenis carta yang sangat biasa, yang memaparkan struktur hierarki data dalam bentuk segi empat tepat untuk memahami dan menganalisis data secara intuitif. ECharts ialah perpustakaan visualisasi data yang berkuasa yang menyediakan pelbagai jenis carta dan item konfigurasi fleksibel, menjadikannya mudah untuk memaparkan gambar rajah pokok segi empat tepat. Artikel ini akan memperkenalkan secara terperinci cara menggunakan rajah pepohon segi empat tepat untuk memaparkan struktur hierarki data dalam ECharts dan memberikan contoh kod khusus.

1. Persediaan
Sebelum bermula, anda perlu memastikan bahawa ECharts telah dipasang dan fail sumber yang diperlukan telah diperkenalkan. Langkah-langkah khusus adalah seperti berikut:

1. Muat turun ECharts: Pergi ke tapak web rasmi ECharts (http://echarts.apache.org/zh/index.html) untuk memuat turun versi terkini pakej mampat ECharts.
2. Nyahzip pakej termampat: Nyahzip pakej termampat yang dimuat turun dan anda akan mendapat direktori echarts-x.x.x.
3. Perkenalkan fail sumber: Salin fail echarts.min.js dalam direktori echarts-x.x.x ke direktori projek, dan perkenalkan fail sumber dalam fail HTML. . peta . Contohnya, anda boleh menambah kod berikut di dalam teg :

Initialization contoh: dalam Cipta contoh ECharts dalam fail JavaScript dan ikatkannya pada bekas yang ditentukan. Sebagai contoh, anda boleh menambah kod berikut dalam teg :

Konfigurasikan data: Sediakan data untuk dipaparkan dan konfigurasikannya seperti yang diperlukan Dapatkan teratur. Sebagai contoh, objek data boleh ditakrifkan seperti berikut:

nama: 'root nod',

{
  name: '子节点1',
  children: [
    { name: '子节点1.1' },
    { name: '子节点1.2' }
  ]
},
{
  name: '子节点2',
  children: [
    { name: '子节点2.1' },
    { name: '子节点2.2' }
  ]
}

Salin selepas log masuk

Salin selepas log masuk
3. ]
};

Pilihan konfigurasi: Tetapkan pelbagai rajah pokok segi empat tepat Pilihan , termasuk reka letak, gaya, interaksi, dsb. Untuk item konfigurasi tertentu, sila rujuk dokumentasi rasmi ECharts (http://echarts.apache.org/zh/option.html). Sebagai contoh, reka letak boleh ditetapkan seperti berikut:

var option = {
siri: {

type: 'treemap',
data: [data]

}
4. };

Memberikan carta: Gunakan item konfigurasi pada carta dengan memanggil kaedah setOption bagi Contoh ECharts, dan Render peta pokok segi empat tepat. Sebagai contoh, anda boleh menambah kod berikut:

carta.setOption(option);

Berikut ialah kod contoh lengkap untuk memaparkan carta pokok segi empat tepat dalam ECharts: