Comment créer une page Web de visualisation de données

Préface

Auparavant publié un blog sur la visualisation de données à l'aide d'une plateforme de visualisation - sur la collecte et le traitement des données de visualisation pour le suivi de la nouvelle épidémie de pneumonie à coronavirus.Il est en effet très simple d'utiliser la plateforme de visualisation pour réaliser la visualisation des données, mais il n'est pas possible de faire fonctionner cette visualisation terminée. Réaliser l'accès à distance, c'est très difficile. (La plate-forme de visualisation précédente peut effectivement obtenir un accès à distance, mais elle doit encore faire une demande d'enregistrement. Les non-enregistrés ne prennent en charge que 2 accès IP à la fois)
Comment utiliser la page Web pour créer notre propre travail de visualisation?
Objectif, ne t'inquiète pas, écoute-moi lentement

Artefact visuel: echarts

Permettez-moi de vous le présenter:

Quand j'ai appris que les cartes électroniques avaient été développées par Baidu, j'ai été surpris et j'ai changé certaines de mes opinions sur Baidu ...

ECharts est une bibliothèque de visualisation open source implémentée à l'aide de JavaScript, couvrant des graphiques dans divers secteurs et répondant à divers besoins.
ECharts suit l'accord open source Apache-2.0 et est gratuit pour un usage commercial.
ECharts est compatible avec la plupart des navigateurs actuels (IE8 / 9/10/11, Chrome, Firefox, Safari, etc.) et compatible avec une variété d'appareils, et peut être affiché de manière arbitraire à tout moment et n'importe où.
Ce qui précède est tiré du didacticiel novice

La possibilité de créer un tel graphique visuel

Un peu de HTML
Un peu de css
Relativement plus de JavaScript

Jusqu'au point

Toujours les anciennes règles, je prendrai ici le composant de carte basé sur les cartes électroniques comme exemple.

Mais avant ça, tu dois encore préparer quelque chose

echarts.min.js (bibliothèque d'echarts requise)
china.js (obligatoire pour la carte Chine des echarts)
jquery.js (bibliothèque de fonctions JavaScript)

Environ trois fichiers et données sous les composants requis, j'ai téléchargé sur le
point de disque cloud Baidu I Mot de passe:ujp6

Ci-dessous l'adresse de téléchargement officielle:

Les deux fichiers echarts.min.js et china.js, les amis peuvent également télécharger depuis le github officiel: cliquez sur moi
adresse de téléchargement officielle jquery.js: cliquez sur moi

Commençons

Nous devons d'abord écrire une simple page frontale

Ce n'est pas difficile, et vous pouvez le comprendre avec un peu de compréhension du html, alors je viens de sortir le code et de l'expliquer brièvement.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
    
    
				margin:0;
			}
			body{
    
    
				width: 100%;
				height: 100%;
			}
			#map{
    
    
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
		<script type="text/javascript" src="js/echarts.min.js" ></script>
		<script type="text/javascript" src="js/china.js" ></script>
		
	</head>
	<body>
		<div id="map">地图</div>
		<script type="text/javascript" src="js/map.js" ></script>
	</body>
</html>

Nous expliquons principalement le contenu de la balise body. La première fonction div est de fournir un conteneur porteur pour le composant echarts que nous devons créer. Le but de la définition de son attribut id est de lier le composant echarts à cette balise div. En général, il est utilisé Pour indiquer au composant echarts dans quelle balise html il doit être affiché.
Et map.js est notre prochain travail principal - pour implémenter ce composant de carte
pour faciliter la compréhension, j'ai marqué les attributs pertinents
Insérez la description de l'image ici

Implémentation du composant carte

Créez d'abord un fichier map.js sous le dossier js.
Initialisez un objet composant echarts, liez-le à l'étiquette dont le nom d'id est map et stockez-le dans la variable ec_map:

var ec_map = echarts.init(document.getElementById("map"));

Définir l'option d'un composant map:
La signification de l'attribut a été donnée dans les commentaires du code, et elle est expliquée en détail sur le site officiel d' echarts : document officiel d'echarts

var ec_option={
    
    
	//标题属性
	title:{
    
    
		text:"map",//设置标题文本
	},
	tooltip:{
    
    //提示框
		tirgger:"item",//提示框的触发类型
		formatter:"省份名 : {b} <br /> 体温异常 : {c} 人",//字符串模板
	},
	visualMap:{
    
    //导航图标
		x:"left",//定位visualMap组件显示的位置
		y:"bottom",//定位visualMap组件显示的位置
		splitList:[//划分不同范围数据块的显示
		{
    
    start:0,end:49},
		{
    
    start:50,end:99},
		{
    
    start:100,end:149},
		{
    
    start:150,end:199},
		{
    
    start:200}
		],
	},
	series:[{
    
    
		type:"map",//告诉echarts你设置的组件类型
		mapType:"china",//告诉echarts你设置的地图组件是什么地图，这就需要用到china.js了
		data:null,//需要显示的数据
		label:{
    
    
			normal:{
    
    
				show:true,//显示省份名称
				fontSize:18,//调整省份标签的大小
			},
		},
	}]
};

Pensez-vous que c'est la fin? S'il vous plaît rappelez-vous, quel est le but de faire un tel composant? Oui, pour visualiser les données! Mais, avez-vous remarqué que dans cette série de processus, nous n'avons pas utilisé ces données, donc ensuite, nous devons utiliser la requête ajax pour appeler les données dans le fichier area.json avant

$.ajax({
    
    
	type:"get",
	url:"js/area.json",
	async:false,
	success:function(data){
    
    
		ec_option.series[0].data=data.data;
	}
});

Est-ce fini? pas du tout! Réfléchissez bien à ce que vous avez fait auparavant: lier un composant spécifié, définir une propriété de composant, appeler un fichier de données, qu'est-ce qui ne va pas? Définissez maintenant les propriétés du composant sur le composant spécifié! (Frappez au tableau!)

ec_map.setOption(ec_option);

Joindre le code map.js complet

var ec_map = echarts.init(document.getElementById("map"));
var ec_option={
    
    
	title:{
    
    
		text:"map",
	},
	tooltip:{
    
    
		tirgger:"item",
		formatter:"省份名 : {b} <br /> 体温异常 : {c} 人",
	},
	visualMap:{
    
    
		x:"left",
		y:"bottom",
		splitList:[
		{
    
    start:0,end:49},
		{
    
    start:50,end:99},
		{
    
    start:100,end:149},
		{
    
    start:150,end:199},
		{
    
    start:200}
		],
	},
	series:[{
    
    
		type:"map",
		mapType:"china",
		data:null,
		label:{
    
    
			normal:{
    
    
				show:true,//显示省份名称
				fontSize:18,
			},
		},
	}]
};
$.ajax({
    
    
	type:"get",
	url:"js/area.json",
	async:false,
	success:function(data){
    
    
		ec_option.series[0].data=data.data;
	}
});
ec_map.setOption(ec_option);

Joindre quelques problèmes que vous pourriez rencontrer

Q: le code est correct, ouvrez les fichiers html locaux, les composants d'affichage de la carte, mais la carte est grise
- A: en
raison de restrictions de sécurité Certains mécanismes de navigateur pour interdire le cross-domain, vous pouvez déployer ces codes dans leurs propres Il est accessible à distance sur le serveur ou vous pouvez créer un serveur local. Si vous ne savez pas quoi faire, vous pouvez également télécharger un HBuilder , un logiciel de développement Web. L’utiliser pour exécuter vos fichiers Web sera Créer automatiquement un serveur local

Q: Lorsque vous ouvrez le fichier html local, seul le mot map est affiché, mais le composant map n'apparaît pas
-
R: Il doit s'agir d'une erreur de frappe dans votre code map.js. Veuillez vérifier attentivement certaines erreurs de code ou vérifier si la ponctuation est manquante

Conclusion

Ce qui précède est le contenu du didacticiel sur l'utilisation des e-graphiques pour créer une page Web visuelle. L'espace est limité. Cet article est juste un exemple de création d'un composant de carte. Si vous avez besoin d'autres composants, vous pouvez vous référer directement à la documentation officielle des e-graphiques. Je pense que vous serez plein de récompenses.