Maison > Article > interface Web > Histogramme ECharts (horizontal) : comment afficher le classement des données

Histogramme ECharts (horizontal) : comment afficher le classement des données

WBOYoriginal: 2023-12-17 13:54:371414parcourir

Histogramme ECharts (horizontal) : Comment afficher le classement des données, des exemples de code spécifiques sont requis

Dans la visualisation de données, l'histogramme est un type de graphique couramment utilisé, qui peut afficher visuellement la taille et la relation relative des données. ECharts est un excellent outil de visualisation de données qui fournit aux développeurs des types de graphiques riches et de puissantes options de configuration. Cet article expliquera comment utiliser l'histogramme (horizontal) dans ECharts pour afficher le classement des données et donnera des exemples de code spécifiques.

Tout d'abord, nous devons préparer un ensemble de données contenant des données de classement. Supposons que nous ayons un ensemble de données sur les étudiants contenant les noms et les scores des étudiants. Nous souhaitons utiliser un graphique à barres pour afficher le classement des scores de l'élève. Voici un exemple d'ensemble de données simplifié :

var data = [
  { name: '小明', score: 92 },
  { name: '小红', score: 85 },
  { name: '小刚', score: 76 },
  { name: '小强', score: 80 },
  { name: '小花', score: 88 }
];

Ensuite, nous devons introduire la bibliothèque ECharts et créer un conteneur pour afficher l'histogramme. Voici un modèle HTML de base :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts柱状图示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>
</body>
</html>

Ensuite, nous pouvons utiliser l'API fournie par ECharts pour configurer et dessiner l'histogramme. Ce qui suit est un simple exemple de code de configuration de graphique à barres :

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

// 配置图表选项
var option = {
  title: {
    text: '学生成绩排名'
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: data.map(item => item.name)
  },
  series: [{
    type: 'bar',
    data: data.map(item => item.score),
    label: {
      show: true,
      position: 'right',
      formatter: '{c}'
    }
  }]
};

// 绘制图表
chart.setOption(option);

Dans le code ci-dessus, nous créons d'abord une instance de graphique et la lions au conteneur spécifié dans le HTML via la méthode echarts.init supérieure. Nous avons ensuite configuré le titre du graphique, l'axe des x et l'axe des y, avec les données de l'axe des y provenant du champ de nom de notre ensemble de données cible. Enfin, nous avons configuré la série d'histogrammes, spécifié les données de l'histogramme via l'attribut data, affiché l'étiquette numérique via l'attribut label et défini la position de l'étiquette sur le côté droit. echarts.init方法将其绑定到HTML中指定的容器上。然后，我们配置了图表的标题、x轴和y轴，其中y轴的数据来自于我们目标数据集中的姓名字段。最后，我们配置了柱状图系列，并通过data属性指定了柱状图的数据，通过label属性来显示数值标签，并将标签的位置设置为右侧。

最后，我们通过调用chart.setOption

Enfin, nous rendons et affichons l'histogramme en appelant la méthode chart.setOption. Après avoir actualisé la page du navigateur, nous verrons le classement des performances de l'élève affiché sous la forme d'un graphique à barres. La longueur de la barre indique la taille du score et l'étiquette numérique est affichée sur le côté droit de la barre.

Pour résumer, cet article explique comment utiliser l'histogramme (horizontal) dans ECharts pour afficher le classement des données et fournit des exemples de code spécifiques. Grâce à ces exemples de codes, les développeurs peuvent utiliser ECharts de manière flexible pour afficher et analyser des données dans des projets réels afin de répondre aux besoins de visualisation des données. 🎜

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!

echarts html

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：Comment créer des graphiques relationnels à l'aide de HighchartsArticle suivant：Comment créer des graphiques relationnels à l'aide de Highcharts

Articles Liés

Voir plus