Table des matières
- Chapitre 1 : Introduction aux ECarts
- Chapitre 2 : Construire un environnement de développement
- Chapitre 3 : Détails des composants
Chapitre 1 : Introduction aux ECarts
1.1. Aperçu des diagrammes électroniques
- ECharts est une bibliothèque de graphiques de visualisation de données basée sur JavaScript qui fournit des graphiques de visualisation de données intuitifs, vifs, interactifs et personnalisables.
- ECharts était à l'origine open source par l'équipe Baidu et a été donné à la Fondation Apache au début de 2018, devenant un projet de niveau incubation ASF.
- ECharts, le nom complet d'Enterprise Charts, des graphiques de données de qualité commerciale, une bibliothèque de graphiques Javascript pur , peut fonctionner sans problème sur les PC et les appareils mobiles , et est compatible avec la plupart des navigateurs actuels.
- Fournissez à beaucoup d'entre nous des graphiques de visualisation de données intuitifs, vivants, interactifs et hautement personnalisables .
- Il peut prendre en charge 12 types de graphiques tels que des graphiques linéaires, des histogrammes, des graphiques en nuage de points, des graphiques en chandeliers, des graphiques circulaires, des graphiques en radar, des graphiques en accords, des graphiques de mise en page dirigés par la force, des cartes, des tableaux de bord, des graphiques en entonnoir et des graphiques en rivière d'événements .
- En même temps , il fournit 7 composants interactifs tels que le titre, la bulle de détail, la légende, le champ de valeur, la zone de données, l'axe du temps, la boîte à outils, etc.
- Prise en charge de la liaison et de l'affichage composite de plusieurs diagrammes et composants.
1.2. Fonctionnalités des ECarts
(1) Types de visualisation riches
ECharts offre de nombreuses façons d'implémenter des graphiques, y compris des graphiques linéaires, des histogrammes, des graphiques en nuage de points, des graphiques en secteurs, des graphiques en ligne K, des graphiques en boîte et à moustaches, des cartes, des graphiques de relations, des graphiques en arbre rectangulaire, des graphiques en rayon de soleil , et entonnoirs Graphiques, tableaux de bord, etc.
En outre, ECharts fournit également des séries personnalisées, qui peuvent étendre différents graphiques
(2) Prise en charge de plusieurs formats de données
Dans ECharts 4.0 et versions ultérieures, l'attribut de jeu de données d'ECharts prend en charge le format de données entrantes à l'exception de Deux dimensions tables, ainsi que des paires clé-valeur.
(3) Des dizaines de millions de données sont affichées en douceur sur le front-end.La
technologie de rendu améliorée d'ECharts version 4.0 et supérieure permet une interaction fluide lors de l'affichage de dizaines de millions de données, telles que le zoom et le panoramique. La prise en charge du chargement en continu permet de charger et de restituer les données en morceaux pour une meilleure expérience utilisateur.
(4) Affichage d'animation de données dynamiques
Lorsque les données changent, ECharts affiche la visualisation de nouvelles données par le biais de changements d'animation internes appropriés, souvent en conjonction avec l'affichage de données de séries chronologiques
(5) Une visualisation tridimensionnelle de plus en plus puissante
ECharts fournit ECharts GL, Il peut réaliser des effets de visualisation tels que la terre et les bâtiments en trois dimensions, et peut être appliqué dans des scènes VR et grand écran, et l'effet est encore plus cool.
(6) L'application multiplateforme
ECharts a différents schémas de rendu, qui peuvent être bien adaptés à différentes plates-formes. Par exemple, le rendu SVG d'ECharts 4.0 et supérieur évite au terminal mobile de se soucier de la mémoire, et le rendu Canvas permet au terminal PC d'afficher des effets spéciaux avec une grande quantité de données, et ECharts 4.0 commence à s'adapter au WeChat applet (7) Exploration de la profondeur des données ECharts prend en charge l'interaction de l'utilisateur pour
extraire
des informations sur les données et fournit des composants interactifs pratiques tels que des légendes, des cartes visuelles et un zoom de zone de données, afin que les utilisateurs puissent approfondir les détails de l'affichage des données à partir de la vue d'ensemble
(8) Accès sans obstacle
ECharts 4.0 est conforme à l'ensemble de spécifications d'application Internet riche sans barrière spécifié par le W3C et prend en charge la génération de descriptions pour la visualisation, afin que les personnes aveugles puissent comprendre le contenu du graphique par la voix.
En plus des fonctionnalités ECharts mentionnées ci-dessus, il y a plus de surprises dans ECharts, que vous pourrez découvrir lentement dans vos futures études.
1.3. ECharts contre Highcharts
Highcharts est une bibliothèque de graphiques écrite en JavaScript qui prend en charge une variété de visualisations couramment utilisées. En tant que produits de visualisation similaires, la comparaison entre ECharts et Highcharts est la suivante
1. Angle du type de graphique
À l'heure actuelle, les diagrammes visuels partagés affichés sur les sites Web officiels d'ECharts et de Highcharts sont à peu près les mêmes, à la différence que le site Web officiel d'ECharts affiche également des diagrammes en arbre, des diagrammes de chemin, des diagrammes en rayon de soleil, des pictogrammes, des systèmes de coordonnées calendaires, etc. affiche également des diagrammes à puces et des diagrammes en nid d'abeille.
2. Est-ce gratuit ?
ECharts est gratuit. Highcharts est gratuit et payant pour un usage commercial
3. Perspective de la technologie de visualisation
Les derniers ECharts prennent en charge les méthodes de rendu Canvas et SVG, et Highcharts prend en charge les méthodes de rendu SVG
Canvas (toile) accueille tous les éléments de l'interface utilisateur. Canvas est un objet de jeu monté avec le composant Canvas, tous les éléments de l'interface utilisateur doivent être ses nœuds enfants et le traitement des événements n'est pas pris en charge.
SVG est un format de fichier graphique dont le nom anglais complet est Scalable Vector Graphics, ce qui signifie graphiques vectoriels évolutifs. Il est basé sur XML (Extensible Markup Language), développé par l'alliance World Wide Web Consortium (W3C). À proprement parler, il devrait s'agir d'un langage graphique vectoriel standard ouvert qui vous permet de concevoir des pages graphiques Web passionnantes et à haute résolution. Les utilisateurs peuvent utiliser directement des codes pour dessiner des images, ouvrir des images SVG avec n'importe quel outil de traitement de texte, rendre les images interactives en modifiant certains codes et les insérer en HTML à tout moment pour les afficher via un navigateur. Ne convient pas aux applications de jeu.
Chapitre 2 : Construire un environnement de développement
2.1. Installer ECharts
Le site officiel semble ne pas pouvoir entrer même après avoir cliqué sur ce lien. Il existe
quatre façons de télécharger : téléchargement direct, npm, github et importation CDN.
Téléchargement direct :
On peut directement télécharger echarts.min.js et l'importer avec la balise <script>.
https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js
De plus, la version du code source echarts.js peut être utilisée dans l'environnement de développement et importée avec la balise <script>. version contient des messages d'erreur courants et un avertissement.
https://cdn.staticfile.org/echarts/4.7.0/echarts.js
On peut aussi directement télécharger des versions plus riches depuis le site officiel d'ECharts, incluant différents thèmes et langues,
adresse de téléchargement : https://echarts.apache.org/zh/download.html . (Temporairement inaccessible)
Ces echarts construits fournissent les personnalisations suivantes :
- Version complète : echarts/dist/echarts.js , le plus gros volume, y compris tous les graphiques et composants, voir : echarts/echarts.all.js pour le contenu inclus .
- Version couramment utilisée : echarts/dist/echarts.common.js , de taille modérée, contient des graphiques et des composants communs, voir : echarts/echarts.common.js pour le contenu inclus .
- Version allégée : echarts/dist/echarts.simple.js , plus petit en taille, ne contient que les graphiques et composants les plus couramment utilisés, voir : echarts/echarts.simple.js pour le contenu inclus .
CDN：
-
Staticfile CDN (Domestique) : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
-
jsDelivr：https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js
-
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js
Méthode NPM
En raison de la lenteur de l'installation de npm, ce tutoriel utilise l'image de Taobao et sa commande cnpm. Pour la présentation de l'installation et de l'utilisation, reportez-vous à : Utiliser l'image Taobao NPM.
La version npm doit être supérieure à 3.0, si elle est inférieure à cette version, elle doit être mise à jour :
Vérifiez la version
npm -v
2.3.0
upgrade npm
cnpm install npm -g
upgrade ou install cnpm
npm install cnpm -g
最新稳定版
$ cnpm install echarts --save
Exemple:
var echarts = require('echarts');
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
2.2. Utilisation simple d'ECharts
Ici, utilisez CDN pour introduire le test, veuillez télécharger pour le développement réel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '第一个 ECharts 实例'
},
tooltip: {
},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
résultat courant :
Chapitre 3 : Détails des composants
3.1. Syntaxe de configuration
Étape 1 : Créer une page HTML
Créez une page HTML et importez echarts.min.js :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
Étape 2 : Préparez un conteneur DOM avec une hauteur et une largeur pour ECharts.
La div dont l'id est main dans l'instance est utilisée pour contenir le graphique dessiné par ECharts :
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
Étape 3 : Définir les informations de configuration
La bibliothèque ECharts utilise le format json pour configurer
echarts.init(document.getElementById('main')).setOption(option);
Ici, l'option signifie utiliser la configuration du format de données json pour dessiner le graphique. Procédez comme suit:
titre
Configurez un titre pour le graphique :
title: {
text: '第一个 ECharts 实例'
}
informations rapides
Informations sur l'invite de configuration :
tooltip: {},
composant de légende
Le composant légende présente les différentes séries de symboles, de couleurs et de noms. Les séries qui ne sont pas affichées peuvent être contrôlées en cliquant sur la légende.
legend: {
data: [{
name: '系列1',
// 强制设置图形为圆。
icon: 'circle',
// 设置文本为红色
textStyle: {
color: 'red'
}
}]
}
Axe X
Configurez les éléments à afficher sur l'axe des abscisses :
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
Axe Y
Configurez les éléments à afficher sur l'axe Y.
yAxis: {}
liste des séries
Chaque série détermine son propre type de graphique par type :
series: [{
name: '销量', // 系列名称
type: 'bar', // 系列图表类型
data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容
}]
Chaque série détermine son propre type de graphique par type :
- type : 'bar' : histogramme/histogramme
- type : 'ligne' : graphique linéaire/aire
- type : 'tarte' : tarte
- type : 'scatter' : graphique en nuage de points (à bulles)
- type : 'effectScatter' : Scatter (bulles) avec animation d'effet d'entraînement
- type : 'radar' : carte radar
- type: 'tree' : diagramme en arbre
- type : 'treemap' : carte de l'arbre
- type : 'sunburst' : graphique sunburst
- tapez : 'boîte à moustaches' : boîte à moustaches
- type : 'chandelier' : graphique en chandeliers
- type : 'carte de chaleur' : carte de chaleur
- tapez : 'carte' : carte
- type : 'parallèle' : série de systèmes de coordonnées parallèles
- type : 'lignes' : graphique linéaire
- type : 'graph' : graphe de relations
- type : 'sankey' : diagramme de Sankey
- type : 'entonnoir' : graphique en entonnoir
- type : 'jauge' : tableau de bord
- type : 'pictorialBar' : graphique à barres illustré
- type: 'themeRiver' : thème rivière
- type : 'personnalisé' : série personnalisée
Exemple
Voici un exemple complet :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '第一个 ECharts 实例'
},
tooltip: {
},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
Vous pouvez essayer de changer le type, certains types ne supportent pas ce format, et c'est normal
3.2, grammaire d'analyse détaillée
3.2.1 Titre
Dans ECharts, le titre comprend généralement le titre principal et le sous-titre, et la configuration des paramètres pertinents du titre peut être configurée dans le titre dans l'option. Voici quelques paramètres communs
- texte : texte du titre principal, prise en charge des sauts de ligne avec \n
- sous-texte : texte du sous-titre, prise en charge des sauts de ligne avec \n
- left : la distance depuis le côté gauche du conteneur, sa valeur peut être une valeur de pixel spécifique, par exemple : 10 ; il peut également s'agir d'un pourcentage relatif au conteneur, par exemple : 10 % ; il peut également être le plus couramment utilisé à gauche, au centre, à droite, vous pouvez Il est compris comme alignement à gauche, alignement au centre et alignement à droite.
- show : s'il faut afficher le composant de titre, la valeur est des données de type de données booléennes, la valeur par défaut est true
title{
text:"这是主标题",
subtext:"这是副标题",
left:"center" //居中显示
}
Code complet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts图表</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '这是主标题',
subtext: '这是副标题',
left: 'center'
},
tooltip: {
},
// legend: {
// data: ['销量']
// },
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
résultat de l'opération :
3.2.2 Boîte d'invite
Dans ECharts, le composant de boîte de dialogue devient une info-bulle et sa fonction est de fournir aux utilisateurs des informations pertinentes au bon moment.
-
déclencheur : type de déclencheur, les paramètres facultatifs sont élément (déclencheur graphique), axe (déclencheur d'axe de coordonnées), aucun (pas de déclencheur).
-
formateur : le formateur de contenu de la couche flottante de la boîte d'invite, utilise généralement un modèle de chaîne, et les variables de modèle incluent {a}, {b}, {c}, {d}, {e}, représentant respectivement le nom de la série , nom des données, valeur des données, etc. . Les significations des données représentées par les variables {a},{b},{c},{d} sous différents types de graphiques sont les suivantes
- Graphique en courbes (aires), graphique en colonnes (barres), graphique en chandelier : {a} (nom de la série), {b} (valeur de type), {c} (valeur), {d} (aucun)
- Nuages de points (à bulles) : {a} (nom de la série), {b} (nom des données), {c} (tableau numérique), {d} (aucun)
- Cartes : {a} (nom de la série), {b} (nom de la zone), {c} (valeurs fusionnées), {d} (aucune).
- Graphiques circulaires, tableaux de bord, graphiques de vulnérabilité : {a} (nom de la série), {b} (nom de l'élément de données), {c} (valeur), {d} (pourcentage)
-
axisPointer : élément de configuration de l'indicateur d'axe de coordonnées, type est un sous-paramètre de ce paramètre, utilisé pour définir le type d'indicateur, la valeur peut être line (indicateur de ligne droite), shadow (indicateur d'ombre), cross (indicateur de réticule), none ( pas d'indicateur)
-
show : s'il faut afficher le composant de boîte d'invite, la valeur est une donnée booléenne et la valeur par défaut est true.
tooltip:{
trigger:'axis',
axisPointer:{
type:'shadow'
}
}
Code complet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts图表</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '这是主标题',
subtext: '这是副标题',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
// legend: {
// data: ['销量']
// },
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
3.2.3 Barre d'outils
Dans ECharts, le composant de la barre d'outils est appelé boîte à outils. En définissant la barre d'outils, nous pouvons télécharger la visualisation sur le local ou afficher les données sous-jacentes de la visualisation.
- show : s'il faut afficher le composant de la barre d'outils, la valeur est une donnée booléenne, la valeur par défaut est : true.
- featrue : chaque élément de configuration de l'outil, qui contient de nombreux sous-paramètres couramment utilisés, tels que saveAsImage, restore, dataView, magicType, etc. Parmi eux, saveAsImage consiste à enregistrer le résultat de la visualisation localement, restore consiste à restaurer la visualisation au paramètre initial, dataView peut voir la vue de données sous-jacente de la visualisation et magicType peut convertir une visualisation en une autre.
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
Code complet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts图表</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '这是主标题',
subtext: '这是副标题',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
// legend: {
// data: ['销量']
// },
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
Résultats en cours :
Démo 1 : Convertir en vue de données
Démo 2 : Convertir en graphique linéaire
Le téléchargement se présente sous la forme d'une image, vous pouvez l'essayer
3.2.4 Légende
Dans ECharts, le composant de légende est appelé légende et sa fonction est de distinguer différents affichages de données. Voici quelques paramètres communs
- show : s'il faut afficher le composant de légende, la valeur est une donnée booléenne, la valeur par défaut est true.
- left : la distance depuis le côté gauche du conteneur, sa valeur peut être une valeur de pixel spécifique, par exemple : 10 ; il peut également s'agir d'un pourcentage relatif au conteneur, par exemple : 10 % ; il peut également être le plus couramment utilisé à gauche, au centre, à droite, vous pouvez Il est compris comme alignement à gauche, alignement au centre et alignement à droite.
- top : la distance depuis le haut du conteneur, sa valeur peut être une valeur de pixel spécifique, telle que 10 ; il peut également s'agir d'un pourcentage relatif au conteneur, tel que 10 % ; il peut également s'agir du top le plus couramment utilisé , milieu, bas, qui peut être compris comme en haut, au milieu, en bas
- orient : L'orientation de la mise en page de la liste des légendes, la valeur par défaut est horizontale (horizontal), et elle peut également être verticale (vertical).
- data : le tableau de données dans la légende, généralement une correspondance biunivoque avec la série d'affichage de données, l'utilisation spécifique peut être trouvée dans l'exemple suivant
Ici, des colonnes de couleurs différentes sont utilisées pour représenter respectivement le volume des ventes et le volume des achats. Afin de distinguer et de correspondre au nom, une légende est nécessaire
Code complet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts图表</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '这是主标题',
subtext: '这是副标题',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['销量', '进货量'],
left: 'right',
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}, {
name: '进货量',
type: 'bar',
data: [10, 50, 22, 15, 6, 15]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
Combiné avec les connaissances d'apprentissage précédentes, le graphique linéaire peut également (ou d'autres graphiques)
compléter le code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts图表</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '这是主标题',
subtext: '这是副标题',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
toolbox: {
show: true,
feature: {
magicType: {
show: true,
type: ['line', 'bar']
},
},
top: '20'
},
legend: {
data: ['销量', '进货量'],
left: 'right',
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}, {
name: '进货量',
type: 'bar',
data: [10, 50, 22, 15, 6, 15]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
3.2.5 Axe du temps
En termes d'utilisation, la chronologie est légèrement différente des composants introduits précédemment. Il y aura plusieurs options lors de son utilisation. Les options traditionnelles d'ECharts peuvent être appelées options atomiques, et les options utilisées lors de l'utilisation de la chronologie peuvent être appelées options contenant plusieurs atomes atomiques. Options composites. Le format lors de l'utilisation de la chronologie peut être représenté par le code suivant :
dans le code suivant (derrière la légende), baseOption est une "option atomique", et chaque élément du tableau d'options est également une "option atomique". Chaque "option atomique" contient divers éléments de configuration décrits dans ce document
Code complet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts图表</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var allOptions = {
baseOption: {
timeline: {
data: ['2020', '2021', '2022']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
toolbox: {
show: true,
feature: {
magicType: {
show: true,
type: ['line', 'bar']
},
},
top: '20'
},
legend: {
data: ['销量', '进货量'],
left: 'right',
},
xAxis: [{
type: 'category',
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
}],
yAxis: [{
type: 'value'
}],
series: [{
type: 'bar',
}]
},
options: [{
//这是'2020'对应的option
title: {
text: '2020年销售情况'
},
series: [{
data: [300, 500, 450, 500, 320, 623]
}]
}, {
//这是'2020'对应的option
title: {
text: '2021年销售情况'
},
series: [{
data: [380, 300, 150, 700, 220, 266]
}]
}, {
//这是'2020'对应的option
title: {
text: '2022年销售情况'
},
series: [{
data: [450, 400, 350, 500, 320, 423]
}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(allOptions);
</script>
</body>
</html>
La plupart des paramètres couramment utilisés sont liés aux paramètres de lecture, tels que le paramètre de boucle pour lire en boucle, le paramètre de rembobinage pour lire en sens inverse, le paramètre de vitesse de lecture playInterval, le paramètre de position controlPosition du bouton de lecture, etc.
3.2.6 Mise à l'échelle de la zone de données
Dans ECharts, le composant de zoom de zone de données est appelé dataZoom. Sa fonction est de fournir aux utilisateurs la fonction de zoom de zone, afin que les utilisateurs puissent avoir un aperçu de la situation globale des données grâce au zoom de zone, et puissent également prêter attention aux détails du Actuellement, les composants de zoom de zone pris en charge par ECharts sont
: Les types suivants :
- Composant de zoom de la zone de données de type curseur (dataZoomSlider)
- Composant de zoom de zone de données intégré (dataZoomInside)
- Composant de zoom de zone de données de sélection de boîte (dataZoomSelect)
1. Composant de zoom de zone de données de type barre coulissante
Les paramètres couramment utilisés dans le composant de zoom de zone de données de type barre coulissante sont les suivants.
1) xAxisIndex : spécifie l'axe des x du contrôle. S'il existe plusieurs graphiques dans une visualisation, quel axe notre composant de zoom de région contrôle-t-il ? À ce stade, vous devez spécifier la valeur de ce paramètre : si la valeur est un nombre, un axe est contrôlé ; si la valeur est un tableau, plusieurs axes sont contrôlés. Jetons un coup d'œil à l'exemple de code ci-dessous ;
option:{
xAxis:[{
{
...},//第一个xAxis
{
...},//第二个xAxis
{
...},//第三个xAxis
{
...} //第四个xAxis
}],
dataZoom:[
{
//第一个dataZoom组件
xAxisIndex:[0,3] //表示这个dataZoom组件控制第一个和第四个xAxis
},
{
xAxisIndex: 2 //表示这个dataZoom组件控制第三个xAxis
}
]
}
À ce stade, le premier composant dataZoom contrôle le premier et le quatrième xAxis, tandis que le deuxième composant dataZoom contrôle le troisième xAxis.
En plus de xAxisIndex, il existe également yAxisIndex. L'utilisation est similaire, donc je n'entrerai pas dans les détails ici.
2) filterMode: mode filtre, l'essence du zoom de la fenêtre de données dataZoom est le filtrage des données, c'est-à-dire filtrer le contenu en dehors de la fenêtre.Il
existe de nombreux modes de filtrage et les valeurs facultatives couramment utilisées sont les suivantes
- filter : filtre les données en dehors de la fenêtre. Lorsque la visualisation a plusieurs axes, cela affectera la plage de données des autres axes. Pour les données, tant qu'une dimension est en dehors de la fenêtre, elle sera filtrée
- lowFilter : filtre les données en dehors de la fenêtre. Lorsque la visualisation a plusieurs axes, cela affectera la plage de données des autres axes. Pour les données, ce n'est que lorsque toutes ses dimensions sont à l'extérieur du même côté de la fenêtre qu'elles seront filtrées
- vide : n'affecte pas la plage de données des autres axes
- aucun : ne filtre pas les données, modifie uniquement la plage de l'axe des nombres
Regardons un exemple spécifique, où seule l'option est définie
Code complet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据区域缩放</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
dataZoom: [{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
}, {
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty'
}],
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
series: {
type: 'bar',
data: [
//第一列对应x轴，第二列对应y轴
[10, 30],
[20, 50],
[5, 20],
[2, 10]
]
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
Comme on peut le voir dans le code, le mode de mise à l'échelle du contrôle de l'axe des x est filtre et le mode de mise à l'échelle du contrôle de l'axe des y est vide, puis l'axe des x est utilisé comme axe principal et la mise à l'échelle de x affectera les données de l'axe des y et l'axe des y est utilisé comme axe auxiliaire. Le zoom n'affecte pas les données de l'axe des x. Vous pouvez faire glisser les deux extrémités du curseur de l'axe des x ou de l'axe des y à volonté, ou faire glisser le curseur pour obtenir la mise à l'échelle des données de la fenêtre
2. Le composant de zoom de zone de données intégré
est dit intégré, ce qui signifie que le composant de zoom de zone est intégré au système de coordonnées et que ses paramètres sont fondamentalement les mêmes que ceux du composant de zoom de zone de données de type curseur mentionné. Le type de curseur est remplacé par le type intérieur et le code est le suivant :
Code complet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据区域缩放</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
dataZoom: [{
id: 'dataZoomX',
type: 'inside',
xAxisIndex: [0],
filterMode: 'inside'
}, {
id: 'dataZoomY',
type: 'inside',
yAxisIndex: [0],
filterMode: 'empty'
}],
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
series: {
type: 'bar',
data: [
//第一列对应x轴，第二列对应y轴
[10, 30],
[20, 50],
[5, 20],
[2, 10]
]
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
Passez la souris sur la zone de visualisation et faites défiler la molette de la souris pour constater que la fenêtre de données de visualisation change. Le soi-disant intégré signifie en fait que le zoom est intégré au graphique et apparaît dans notre champ de vision sans affichage.
3. Composant de zoom de la zone de données de sélection de boîte
Le type de sélection de cadre, comme son nom l'indique, consiste à mettre à l'échelle la zone de données via la zone de sélection, et ce composant se trouve dans la boîte à outils mentionnée précédemment. Regardons un exemple.
Ajoutez dataZoom : {show : true} sous toolbox.feature dans le code lors de l'explication de la boîte à outils. Afin de voir clairement la boîte à outils, définissez left : 'left' sous la boîte à outils pour obtenir le code d'option suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据区域缩放</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '这是主标题',
subtext: '这是副标题',
left: 'center', //居中显示
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
toolbox: {
show: true,
left: 'left',
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
},
dataZoom: {
show: true
}
}
},
legend: {
data: ['各产品销售情况']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [200, 600, 205, 530, 352, 215]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
Dans la boîte à outils de la boîte à outils dans le coin supérieur gauche, il y a deux autres boutons, à savoir "Zoom Area" et "Zoom Area Restore". Cliquez sur le "Zoom Area Button" pour dessiner une zone dans la visualisation afin d'agrandir les données, cliquez sur "Zoom Area Zoom Restore" pour effacer le zoom et restaurer l'état visuel d'origine
3.2.7 Grille
La taille de la grille de l'affichage visuel peut être contrôlée dans le système de coordonnées visuelles via la grille. En plus des paramètres de position mentionnés précédemment, tels que gauche, haut, droite, bas, etc., les paramètres couramment utilisés incluent également la largeur (la largeur du composant de grille), hauteur ( La hauteur du composant), les paramètres par défaut des deux sont automatiques, c'est-à-dire adaptatifs, bien sûr, des valeurs spécifiques peuvent également être spécifiées.
Exemple d'image :
code complet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
//网格布局
grid: [{
x: '20%',
y: '20%',
width: '30%',
height: '30%'
}],
title: {
text: '这是主标题',
subtext: '这是副标题',
left: 'center', //居中显示
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
toolbox: {
show: true,
left: 'left',
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
},
dataZoom: {
show: true
}
}
},
legend: {
data: ['各产品销售情况']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [200, 600, 205, 530, 352, 215]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
Utiliser les propriétés de la grille pour contrôler la taille de l'ensemble de la vue visuelle
3.2.8 Axes de coordonnées
D'une manière générale, notre axe de coordonnées le plus couramment utilisé est le système de coordonnées rectangulaires, en particulier le système de coordonnées rectangulaires bidimensionnel, de sorte que l'axe horizontal (xAxis) et l'axe vertical (yAxis) sont les plus couramment utilisés. Les paramètres communs concernant xAxis et yAxis sont les suivants :
- position: Spécifiez la position de l'axe des x, les paramètres optionnels sont top (top) et bottom (bottom)
- type : spécifie le type de l'axe de coordonnées. Il existe quatre paramètres facultatifs : "valeur", indiquant l'axe de type numérique, adapté aux données continues ; "catégorie", indiquant l'axe de type catégorie, adapté aux données de catégorie discrète ; "temps", indiquant l'axe de type temps, pour les données de séries temporelles continues ; "log", pour les données logarithmiques ; type d'axe, pour les données logarithmiques
- name : le nom de l'axe
- nameLocation : l'emplacement d'affichage du nom de l'axe de coordonnées. Il y a trois paramètres facultatifs : "start", la position de départ ; "middle" ou "center", la position du milieu ; "end", la position finale ;
Modifiez le code précédent, ajoutez des paramètres à xAxis et yAxis dans l'option, ajoutez les noms des axes de coordonnées comme "nom du produit" sur l'axe horizontal et "ventes de produits" sur l'axe vertical, et définissez les noms des axes de coordonnées sur affiché au centre ( centre). La raison de l'ajout d'une certaine distance à l'affichage du texte est d'éviter le chevauchement du texte sur le nom de l'axe et l'échelle sur l'axe des x et l'axe des y. La génération spécifique est la suivante :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '这是主标题',
subtext: '这是副标题',
left: 'center', //居中显示
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
toolbox: {
show: true,
left: 'left',
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
},
dataZoom: {
show: true
}
}
},
legend: {
data: ['各产品销售情况']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
name: '产品名称',
nameLocation: 'center',
nameGap: 35
},
yAxis: {
name: '产品销量',
nameLocation: 'center',
nameGap: 40
},
series: [{
name: '销量',
type: 'bar',
data: [200, 600, 205, 530, 352, 215]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
3.2.9 Séries de données
Un graphique peut contenir plusieurs séries, et chaque série peut contenir plusieurs données, de sorte que les séries de données (séries) sont principalement utilisées comme conteneurs de données.
Pour chaque icône visuelle, la forme de la série n'est pas exactement la même. Examinons la structure en série d'un graphique à secteurs.
series est une structure de tableau, utilisant des crochets, chaque partie entre crochets est entourée d'accolades, chaque accolade est similaire à une structure de dictionnaire, y compris clé (clé) et valeur (valeur) Par exemple, le nom dans le code est la clé,
" "Source d'accès" est la valeur ; type spécifie que le graphique est un graphique à secteurs ; radius spécifie le rayon du graphique à secteurs et la taille est représentée par la proportion du graphique dans le cadre ; data contient les données de chaque camembert dans le contenu du camembert. De plus, il existe quelques paramètres liés au style, le code est le suivant :
Code complet :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格</title>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '饼图展示',
left: 'center'
},
series: [{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [{
value: 355,
name: '直接访问'
}, {
value: 310,
name: '邮件营销'
}, {
value: 274,
name: '联盟广告'
}, {
value: 235,
name: '视频广告'
}, {
value: 400,
name: '搜索引擎'
}, ].sort(function(a, b) {
return a.value - b.value;
}),
roseType: 'radius',
label: {
color: 'rgba(0,0,0,0.5)' //显示字体颜色
},
labelLine: {
lineStyle: {
color: 'rgba(0,0,0,0.6)' //连接字体线颜色
},
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
//饼图颜色
// color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0,0,0,0.5)'
},
anumationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function(idx) {
return Math.random() * 200;
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
3.2.10 Style de police global
Lors de la création de visualisations, l'affichage de texte est souvent utilisé. À ce stade, il est particulièrement important de choisir un style de police adapté à la visualisation.
Dans le style de police global (textStyle), nous pouvons définir l'affichage du style de police global. Les paramètres couramment utilisés et leurs descriptions sont les suivants.
- color : la couleur du texte, par exemple textStyle="#fff".
- fontStyle : Le style de la police du texte, les valeurs facultatives sont normal, italic, oblique.
- fontWeigh : La famille de polices du texte, les valeurs facultatives sont sans-serif, serif, monospace, Arial, Courier New, Microsoft Yahei, etc.
- fontSize : la taille de la police du texte, la valeur est une valeur
Par exemple, le code suivant, ajoutez styleStyle, définissez la couleur de la police sur bleu (bleu), l'affichage en gras de la police (plus gras), le style de police sur Microsoft Yahei (Microsoft Yahei), le résultat visuel est affiché dans la figure : code complet
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts图表</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '这是主标题',
subtext: '这是副标题',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['各产品销量情况']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}],
textStyle: {
color: 'blue',
fontWeight: 'bolder',
fontFamily: 'Microsoft Yahei'
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
résumé
J'ai appris les bases d'ECharts et quelques utilisations simples. Ensuite, j'expliquerai des méthodes d'utilisation plus avancées et un affichage de données plus cool, comme l'utilisation cool ci-dessous. Veuillez attendre avec impatience le deuxième numéro de l'
article