ECharts histogram (multidimensi): cara memaparkan pengumpulan dan perbandingan data

ECharts histogram (multidimensi): Bagaimana untuk memaparkan pengumpulan dan perbandingan data, contoh kod khusus diperlukan

ECharts ialah perpustakaan visualisasi sumber terbuka berdasarkan JavaScript, digunakan untuk memaparkan pelbagai jenis carta data. Histogram ialah kaedah visualisasi data biasa yang boleh digunakan untuk memaparkan pengelompokan dan perbandingan data dalam kumpulan atau kategori yang berbeza. Artikel ini akan memperkenalkan secara terperinci cara menggunakan fungsi histogram berbilang dimensi bagi ECharts untuk memaparkan pengumpulan dan perbandingan data, dan menyediakan contoh kod khusus untuk rujukan pembaca.

1. Gambaran keseluruhan histogram berbilang dimensi ECharts

Histogram berbilang dimensi ialah carta yang boleh memaparkan berbilang penunjuk data pada masa yang sama Ia juga boleh dipanggil carta bar, carta bar atau histogram. Ia boleh digunakan untuk memaparkan pengumpulan dan perbandingan data dalam kumpulan atau kategori yang berbeza, dan sesuai untuk memaparkan set data yang mengandungi berbilang dimensi. Sebagai contoh, apabila memaparkan jualan syarikat, jualan barisan produk yang berbeza, jualan kawasan jualan yang berbeza dan dimensi lain boleh dipaparkan serentak dalam carta lajur berbilang dimensi untuk membandingkan dengan cepat hubungan antara data yang berbeza.

Histogram berbilang dimensi ECharts menyokong pelbagai kombinasi dimensi berbeza, seperti nilai berbeza dimensi yang sama dengan kumpulan histogram berbeza, atau gabungan dimensi berbeza sebagai kumpulan histogram berbeza, dsb. Selepas gabungan dimensi ditentukan, setiap kumpulan histogram boleh disesuaikan mengikut warna yang berbeza, kecerunan warna, jurang antara histogram, lebar histogram, dll. untuk menyesuaikan diri dengan keperluan yang berbeza.

2. Cara menggunakan ECharts multi-dimensi histogram

1. Sediakan data

Sebelum menggunakan ECharts multi-dimensi histogram untuk memaparkan data, anda perlu menyediakan data terlebih dahulu. Format data perlu mematuhi format yang ditentukan oleh ECharts Anda boleh menyemak keperluan format khusus dalam dokumentasi rasmi. Berikut ialah contoh:

let data = [
   {product: 'A', area: 'Shanghai', sales: 800},
   {product: 'B', area: 'Shanghai', sales: 1200},
   {product: 'A', area: 'Beijing', sales: 1000},
   {product: 'B', area: 'Beijing', sales: 1400},
];

Data di atas mengandungi data dalam tiga dimensi: barisan produk, wilayah jualan dan jualan.

2. Konfigurasikan parameter ECharts

Selepas menyediakan data, anda perlu mengkonfigurasi parameter ECharts. ECharts menyediakan kaedah konfigurasi parameter khas untuk histogram berbilang dimensi Anda boleh melihat perihalan parameter tertentu dalam dokumentasi rasmi. Berikut ialah contoh:

let option = {
   xAxis: {
       type: 'category',
       data: ['Shanghai', 'Beijing']
   },
   yAxis: {
       type: 'value'
   },
   series: [
       {
           type: 'bar',
           name: 'Product A',
           data: [800, 1000]
       },
       {
           type: 'bar',
           name: 'Product B',
           data: [1200, 1400]
       }
   ]
};

Dalam kod di atas, paksi-x mewakili dimensi rantau jualan dan paksi-y mewakili dimensi jualan. Dua kumpulan histogram ditakrifkan dalam tatasusunan siri, iaitu data jualan produk A dan produk B.

3. Merender carta ECharts

Selepas melengkapkan konfigurasi parameter ECharts, anda boleh mengikat parameter pada elemen DOM dalam halaman HTML melalui API yang disediakan oleh ECharts untuk menjana histogram tertentu. Berikut ialah contoh:

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

Dalam kod di atas, 'chart_container' ialah nilai ID elemen DIV dalam halaman HTML, yang digunakan untuk menyimpan histogram yang dijana. Kaedah echarts.init() digunakan untuk memulakan tika ECharts, dan kaedah setOption() digunakan untuk menetapkan parameter tika.

3. Contoh Kod

Berikut ialah contoh kod ringkas yang menunjukkan cara menggunakan histogram berbilang dimensi ECharts untuk memaparkan pengumpulan dan perbandingan data. Kod tersebut menunjukkan dua set data jualan, iaitu data jualan untuk rangkaian produk dan wilayah jualan yang berbeza.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>ECharts多维柱状图示例</title>
</head>
<body>
   <div id="chart_container" style="width: 600px; height: 400px;"></div>
   <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
   <script>
       // 准备数据
       let data = [
           {product: 'A', area: 'Shanghai', sales: 800},
           {product: 'B', area: 'Shanghai', sales: 1200},
           {product: 'A', area: 'Beijing', sales: 1000},
           {product: 'B', area: 'Beijing', sales: 1400},
       ];
       
       // 配置ECharts参数
       let option = {
           legend: {},
           tooltip: {},
           dataset: {
               dimensions: ['area', 'product', 'sales'],
               source: data
           },
           xAxis: {
               type: 'category',
               axisLabel: {
                   interval: 0,
                   rotate: 45
               }
           },
           yAxis: {},
           series: [
               {type: 'bar', seriesLayoutBy: 'row'},
               {type: 'bar', seriesLayoutBy: 'row'}
           ]
       };
       
       // 渲染ECharts图表
       let chart = echarts.init(document.getElementById('chart_container'));
       chart.setOption(option);
   </script>
</body>
</html>

Dalam kod contoh di atas, parameter legenda digunakan untuk mengkonfigurasi kedudukan dan gaya legenda, petua alat digunakan untuk mengkonfigurasi gaya kotak gesaan apabila tetikus dilegar, parameter dataset digunakan untuk mengkonfigurasi format set data , dan dimensi digunakan untuk menentukan susunan dimensi set data, sumber digunakan untuk menentukan sumber data.

Parameter xAxis digunakan untuk mengkonfigurasi gaya paksi-x, selang dan atribut putaran dalam axisLabel digunakan untuk mengawal mod paparan teks label paksi-x, dan yAxis digunakan untuk mengkonfigurasi gaya y -paksi.

siri digunakan untuk menentukan gaya kumpulan histogram, dengan jenis mewakili jenis carta, dan seriesLayoutBy mewakili kaedah lukisan menggunakan baris atau lajur sebagai dimensi data.

Melalui contoh kod di atas, pembaca boleh mempunyai pemahaman yang lebih mendalam tentang penggunaan histogram berbilang dimensi ECharts, dan kemudian memaparkan pengumpulan dan perbandingan data dengan lebih fleksibel dalam aplikasi praktikal.

Atas ialah kandungan terperinci ECharts histogram (multidimensi): cara memaparkan pengumpulan dan perbandingan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!