Carte thermique ECharts : comment afficher la distribution de la densité des données

Carte thermique ECharts : Comment afficher la distribution de la densité des données, des exemples de code spécifiques sont requis

La carte thermique est un type de graphique qui affiche la distribution de la densité des données à travers les niveaux de couleur. Dans le domaine de la visualisation de données, les cartes thermiques sont souvent utilisées pour présenter la répartition de grandes quantités de données dans l'espace ou dans le temps. ECharts est une bibliothèque de visualisation de données open source qui fournit une variété de types de graphiques, notamment des cartes thermiques. Dans cet article, nous présenterons comment utiliser ECharts pour afficher la distribution de la densité des données et fournirons des exemples de code spécifiques.

Tout d'abord, nous devons préparer certaines données à afficher. Supposons que nos données correspondent à la densité de population de différentes zones d'une ville. Nous pouvons utiliser un tableau bidimensionnel pour représenter ces données. Chaque élément du tableau représente la densité de population d'une zone. Pour plus de commodité, nous pouvons utiliser des nombres aléatoires pour générer des exemples de données. En JavaScript, vous pouvez utiliser Math.random() pour générer un nombre aléatoire compris entre 0 et 1. Voici un morceau de code qui génère des exemples de données :

// 生成示例数据
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);
}

Dans le code, nous utilisons deux boucles for imbriquées pour générer un tableau bidimensionnel 10x10, où la valeur de chaque élément est une densité de population aléatoire.

Ensuite, nous devons créer une instance ECharts et configurer les paramètres pertinents de la carte thermique. Tout d’abord, nous devons introduire le fichier de bibliothèque ECharts. Dans le fichier html, on peut utiliser le code suivant pour introduire ECharts :

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

Ensuite, en JavaScript, on peut utiliser le code suivant pour créer une instance ECharts et configurer les paramètres de la heat map :

// 创建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);

Dans le code, nous utilisons d'abord echarts. La méthode .init() crée une instance ECharts et transmet l'ID d'un élément DOM. Ensuite, nous avons configuré les paramètres de la carte thermique, notamment la position et le format de l'info-bulle (boîte d'invite), la plage et la position de la carte visuelle (carte visuelle), etc. Enfin, transmettez l'élément de configuration dans la méthode setOption() pour afficher la carte thermique.

Enfin, dans le fichier html, vous pouvez utiliser le code suivant pour créer un conteneur pour afficher la carte thermique :

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

Dans le code, nous créons un élément div avec l'identifiant "chart" et définissons la largeur et la hauteur.

Maintenant, nous avons terminé le processus d'utilisation d'ECharts pour afficher la distribution de la densité des données. Grâce aux exemples de code ci-dessus, nous pouvons voir que l'utilisation d'ECharts pour créer une carte thermique est très simple et que différents paramètres peuvent être configurés pour répondre à différents besoins. J'espère que cet article vous sera utile lorsque vous utiliserez ECharts pour afficher la distribution de la densité des données. Si vous avez d'autres questions ou besoins, vous pouvez vous référer à la documentation officielle d'ECharts (https://echarts.apache.org/), qui contient une introduction plus détaillée et un exemple de code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!