Maison >interface Web >js tutoriel >Comment utiliser la carte thermique pour afficher la chaleur de la ville dans ECharts

Comment utiliser la carte thermique pour afficher la chaleur de la ville dans ECharts

WBOYoriginal: 2023-12-18 16:00:381306parcourir

ECharts est une puissante bibliothèque de graphiques visuels qui fournit différents types de graphiques que les développeurs peuvent utiliser, y compris une carte thermique de carte. Les cartes thermiques peuvent être utilisées pour montrer la popularité des villes ou des régions, nous aidant ainsi à comprendre rapidement la popularité ou la densité de différents lieux. Cet article explique comment utiliser la carte thermique dans ECharts pour afficher la chaleur de la ville et fournit des exemples de code à titre de référence.

Tout d'abord, nous avons besoin d'un fichier cartographique contenant des informations géographiques. ECharts fournit officiellement divers fichiers cartographiques. Nous pouvons choisir le fichier cartographique approprié en fonction de nos besoins. En prenant la carte de la Chine comme exemple, le fichier JSON de la carte de la Chine peut être trouvé sur le site officiel d'ECharts (https://echarts.apache.org/zh/download-map.html). Téléchargez le fichier et placez-le à l'emplacement approprié dans votre projet.

Ensuite, nous devons préparer les données d'affichage. Supposons que nous souhaitions afficher la popularité de différentes villes de Chine, nous pouvons utiliser une collection de données contenant les noms de villes et les valeurs de popularité. Par exemple, nous pouvons utiliser un tableau JSON pour stocker ces données, chaque élément du tableau contient le nom de la ville et la valeur thermique correspondante, comme indiqué ci-dessous :

var data = [
    {name: '北京', value: 100},
    {name: '上海', value: 90},
    {name: '广州', value: 80},
    // 其他城市数据...
];

Ensuite, nous devons créer une instance ECharts contenant la carte thermique de la carte et ajouter les données associées au fichier de carte. Voici un exemple de code pour créer une carte thermique de carte :

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

// 配置地图热力图
var option = {
    // 使用中国地图
    map: 'china',
    // 设置地图的放大与缩小的按钮不可见
    roam: false,
    // 配置地图热力图的数据
    series: [{
        type: 'heatmap',
        coordinateSystem: 'geo',
        data: data
    }]
};

// 关联数据与地图文件
myChart.setOption(option);

Dans l'exemple de code ci-dessus, nous créons d'abord une instance ECharts et spécifions le conteneur dans lequel elle réside. Ensuite, nous avons configuré les paramètres pertinents de la carte thermique de la carte. Parmi elles, la méthode map指定了使用的地图文件，roam设置了地图缩放按钮的可见性，series指定了热力图的数据和所使用的坐标系。最后，我们通过setOption associe les données à des fichiers cartographiques.

Le code HTML pour afficher cette carte thermique de carte est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>地图热力图示例</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="mapContainer" style="width: 800px; height: 600px;"></div>
    <script>
        // 上述代码
    </script>
</body>
</html>

Dans le code HTML ci-dessus, nous avons introduit le fichier JavaScript d'ECharts et créé un conteneur contenant la carte thermique de carte. En définissant la largeur et la hauteur du conteneur, nous pouvons redimensionner la carte thermique de la carte.

Grâce aux étapes ci-dessus, nous pouvons utiliser des cartes thermiques pour afficher la chaleur de la ville dans ECharts. En fonction des besoins réels, nous pouvons ajuster la profondeur de couleur de la carte thermique en fonction de la valeur thermique de la ville pour montrer la différence de chaleur de la ville. De plus, ECharts fournit également une multitude d'options de configuration, qui permettent d'obtenir des effets de carte thermique de carte plus personnalisés en ajustant les paramètres de configuration.

En résumé, utiliser la carte thermique dans ECharts pour afficher la chaleur d'une ville est une méthode simple et efficace. En préparant correctement les fichiers et les données cartographiques, combinés aux options de configuration d'ECharts, nous pouvons facilement créer une variété de cartes thermiques et afficher clairement la chaleur de la ville. J'espère que l'exemple de code fourni dans cet article vous sera utile et accélérera votre processus de développement de cartes thermiques dans ECharts.

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!

JavaScript json echarts html map apache https

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Nuage de points polaire ECharts : comment afficher la distribution des donnéesArticle suivant：Nuage de points polaire ECharts : comment afficher la distribution des données

Articles Liés

Voir plus