Gambar rajah pokok ECharts: cara memaparkan struktur hierarki data

Rajah pepohon ECharts: Cara memaparkan struktur hierarki data memerlukan contoh kod khusus

Pengenalan: Dengan perkembangan pesat visualisasi data, pemahaman dan keupayaan analisis data orang ramai juga telah bertambah baik. Sebagai kaedah visualisasi data yang biasa digunakan, rajah pepohon ECharts boleh memaparkan struktur hierarki data secara intuitif. Artikel ini akan memperkenalkan penggunaan asas rajah pokok ECharts dan memberikan contoh kod khusus.

1. Pengenalan kepada carta pokok ECharts
ECharts ialah perpustakaan carta bahagian hadapan berasaskan JavaScript yang dibangunkan oleh Baidu, yang boleh memberikan kesan visualisasi data yang kaya seperti pelbagai carta dan peta. Gambar rajah pokok ECharts ialah salah satu rajah terasnya, digunakan untuk memaparkan hubungan hierarki data, dan sesuai untuk senario seperti struktur organisasi dan hubungan klasifikasi.

2. Penggunaan asas rajah pokok ECharts

1. Memperkenalkan perpustakaan ECharts
   Untuk menggunakan rajah pepohon ECharts, anda perlu memperkenalkan perpustakaan ECharts dalam fail HTML terlebih dahulu. Ini boleh dicapai dengan kod berikut:

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

2. Buat bekas
   Buat bekas untuk memaparkan gambar rajah pokok dalam fail HTML, contohnya:

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

3. Memulakan contoh ECharts
   Dalam fail JavaScript ECharts dengan contoh kod berikut dan ikat pada bekas:

   var treeChart = echarts.init(document.getElementById('tree-chart'));

4. Mengkonfigurasi parameter peta pokok
   Tentukan parameter seperti data dan gaya melalui item konfigurasi ECharts. Berikut ialah contoh mudah:

   var option = {
    series: [
        {
            type: 'tree',
            data: [
                {
                    name: 'A',
                    children: [
                        {
                            name: 'B',
                            children: [
                                { name: 'C' },
                                { name: 'D' }
                            ]
                        },
                        { name: 'E' }
                    ]
                }
            ]
        }
    ]
   };

   Antaranya, parameter data digunakan untuk menentukan data peta pokok. Setiap nod terdiri daripada atribut name dan children name mewakili nama nod dan children mewakili koleksi anak. nod. . . Contoh demonstrasidata参数用于指定树图的数据。每个节点由name和children属性组成，name表示节点名称，children表示子节点的集合。

5. 渲染树图
   最后，通过调用ECharts实例的setOption Pertimbangkan gambar rajah pepohon organisasi yang ringkas dengan kod berikut:

   treeChart.setOption(option);

Dalam kod di atas, kami telah mencipta gambar rajah pepohon organisasi yang ringkas. Nod akar ialah CEO dan mengandungi dua sub-nod, CTO dan CFO Di bawah nod CTO terdapat dua sub-nod Jurutera dan Pereka Di bawah nod CFO terdapat dua sub-nod Akauntan dan Perbendaharaan. Melalui kod di atas, kita boleh mendapatkan gambar rajah pokok yang menunjukkan struktur organisasi.

Kesimpulan:
Artikel ini memperkenalkan penggunaan asas rajah pokok ECharts dan memberikan contoh. Melalui item konfigurasi ECharts, kami boleh menentukan data dan gaya peta pokok secara fleksibel untuk mencapai keperluan paparan tahap data dalam pelbagai senario. Saya harap artikel ini dapat membantu pembaca memahami dan menggunakan rajah pokok ECharts.

Atas ialah kandungan terperinci Gambar rajah pokok ECharts: cara memaparkan struktur hierarki data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!