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 :

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

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

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' }
  ]
}

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

3. Kod sampel

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

<script> <br>var carta = echarts.init(document.getElementById('cart'));<br><br>var data = {<br> nama: 'Root nod',<br> kanak-kanak: [<br><pre class='brush:php;toolbar:false;'>{ name: '子节点1', children: [ { name: '子节点1.1' }, { name: '子节点1.2' } ] }, { name: '子节点2', children: [ { name: '子节点2.1' }, { name: '子节点2.2' } ] }</pre><br>]<br>};<p>var pilihan = {<br> siri: {<br><pre class='brush:php;toolbar:false;'>type: 'treemap', data: [data]</pre>}<p>};<br>carta.setOption(option);<p></script>

IV. Ringkasan langkah di atas, Th boleh mencipta dan memaparkan gambar rajah pokok segi empat tepat dengan mudah dalam ECharts. Selain item konfigurasi asas, ECharts juga menyediakan fungsi yang kaya dan kaedah interaksi yang fleksibel yang boleh dilaraskan dan dikembangkan mengikut keperluan khusus. Pada masa yang sama, dokumentasi rasmi juga menyediakan arahan dan contoh yang lebih terperinci untuk rujukan dan pembelajaran kami. Saya harap artikel ini dapat membantu pembaca mula menggunakan gambar rajah pokok segi empat tepat dengan cepat dan mencapai paparan intuitif bagi hierarki data.

Atas ialah kandungan terperinci Cara menggunakan peta pokok segi empat tepat untuk memaparkan hierarki data dalam ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!