Cara menggunakan peta pokok segi empat tepat untuk memaparkan hierarki data dalam ECharts-tutorial js-php.cn

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:

Muat turun ECharts: Pergi ke tapak web rasmi ECharts (http://echarts.apache.org/zh/index.html) untuk memuat turun versi terkini pakej mampat ECharts.
Nyahzip pakej termampat: Nyahzip pakej termampat yang dimuat turun dan anda akan mendapat direktori echarts-x.x.x.
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 :

var carta = echarts.init(document.getElementById('cart'));

var data = {

nama: 'root nod',

kanak-kanak: [

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

Salin selepas log masuk

]

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]

Salin selepas log masuk

};

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);

3. Kod sampel

Contoh Peta Pokok Segi Empat

Tutorial Popular

Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini