Peta haba ECharts: cara memaparkan taburan ketumpatan data

Peta haba ECharts: Cara memaparkan taburan ketumpatan data, contoh kod khusus diperlukan

Peta haba ialah sejenis carta yang memaparkan taburan ketumpatan data melalui tahap warna. Dalam bidang visualisasi data, peta haba sering digunakan untuk mempersembahkan taburan sejumlah besar data dalam ruang atau masa. ECharts ialah perpustakaan visualisasi data sumber terbuka yang menyediakan pelbagai jenis carta, termasuk peta haba. Dalam artikel ini, kami akan memperkenalkan cara menggunakan ECharts untuk memaparkan pengedaran ketumpatan data dan memberikan contoh kod khusus.

Pertama, kita perlu menyediakan beberapa data untuk dipaparkan. Katakan data kami ialah kepadatan penduduk bagi kawasan yang berbeza di sebuah bandar. Kita boleh menggunakan tatasusunan dua dimensi untuk mewakili data ini Setiap elemen tatasusunan mewakili kepadatan penduduk sesuatu kawasan. Untuk kemudahan, kita boleh menggunakan nombor rawak untuk menjana beberapa contoh data. Dalam JavaScript, anda boleh menggunakan Math.random() untuk menjana nombor rawak antara 0 dan 1. Berikut ialah sekeping kod yang menjana data sampel:

// 生成示例数据
var data = [];
for (var i = 0; i < 10; i++) {
  var row = [];
  for (var j = 0; j < 10; j++) {
    var density = Math.random(); // 生成随机的人口密度
    row.push(density);
  }
  data.push(row);
}

Dalam kod, kami menggunakan dua gelung bersarang untuk menjana tatasusunan dua dimensi 10x10, dengan nilai setiap elemen ialah kepadatan populasi rawak.

Seterusnya, kita perlu mencipta tika ECharts dan mengkonfigurasi parameter berkaitan peta haba. Pertama, kita perlu memperkenalkan fail perpustakaan ECharts. Dalam fail html, kita boleh menggunakan kod berikut untuk memperkenalkan ECharts:

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

Kemudian, dalam JavaScript, kita boleh menggunakan kod berikut untuk mencipta contoh ECharts dan mengkonfigurasi parameter peta haba:

// 创建ECharts实例
var myChart = echarts.init(document.getElementById('chart'));

// 配置热力图的参数
var option = {
  tooltip: {
    position: 'top',
    formatter: '{c}'
  },
  visualMap: {
    min: 0,
    max: 1,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '15%'
  },
  series: [{
    type: 'heatmap',
    data: data,
    label: {
      show: true
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};

// 使用配置项显示热力图
myChart.setOption(option);

Dalam kod, kami mula-mula menggunakan echarts Kaedah .init() mencipta tika ECharts dan menghantar ID elemen DOM. Seterusnya, kami mengkonfigurasi parameter peta haba, termasuk kedudukan dan format petua alat (kotak gesaan), julat dan kedudukan peta visual (peta visual), dsb. Akhir sekali, hantar item konfigurasi ke dalam kaedah setOption() untuk memaparkan peta haba.

Akhir sekali, dalam fail html, anda boleh menggunakan kod berikut untuk mencipta bekas untuk memaparkan peta haba:

<div id="chart" style="width: 600px; height: 400px;"></div>

Dalam kod, kami mencipta elemen div dengan id "carta" dan menetapkan lebar dan tinggi.

Kini, kami telah menyelesaikan proses memaparkan taburan ketumpatan data menggunakan ECharts. Melalui contoh kod di atas, kita dapat melihat bahawa menggunakan ECharts untuk mencipta peta haba adalah sangat mudah, dan parameter yang berbeza boleh dikonfigurasikan untuk memenuhi keperluan yang berbeza. Saya harap artikel ini akan membantu anda apabila menggunakan ECharts untuk memaparkan taburan ketumpatan data. Jika anda mempunyai soalan atau keperluan lain, anda boleh merujuk kepada dokumentasi rasmi ECharts (https://echarts.apache.org/), yang mempunyai pengenalan yang lebih terperinci dan kod sampel.

Atas ialah kandungan terperinci Peta haba ECharts: cara memaparkan taburan ketumpatan data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!