ECharts-Histogramm (horizontal): So zeigen Sie das Datenranking an-js-Tutorial-php.cn

ECharts-Histogramm (horizontal): So zeigen Sie das Datenranking an

WBOY

Freigeben： 2023-12-17 13:54:37

Original

1543 Leute haben es durchsucht

ECharts-Histogramm (horizontal): So zeigen Sie das Datenranking an

ECarts-Histogramm (horizontal): Für die Anzeige von Datenrankings sind spezifische Codebeispiele erforderlich.

Bei der Datenvisualisierung ist das Histogramm ein häufig verwendeter Diagrammtyp, der die Größe und relative Beziehung von Daten visuell anzeigen kann. ECharts ist ein hervorragendes Datenvisualisierungstool, das Entwicklern umfangreiche Diagrammtypen und leistungsstarke Konfigurationsoptionen bietet. In diesem Artikel wird die Verwendung des Histogramms (horizontal) in ECharts zur Anzeige von Datenrankings vorgestellt und spezifische Codebeispiele gegeben.

Zuerst müssen wir einen Datensatz mit Ranking-Daten vorbereiten. Angenommen, wir haben einen Schülerdatensatz, der die Namen und Ergebnisse der Schüler enthält. Wir möchten ein Balkendiagramm verwenden, um die Punktzahl des Schülers anzuzeigen. Das Folgende ist ein vereinfachtes Datensatzbeispiel:

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

Nach dem Login kopieren

Als nächstes müssen wir die ECharts-Bibliothek vorstellen und einen Container erstellen, um das Histogramm anzuzeigen. Hier ist eine einfache HTML-Vorlage:

<!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>

Nach dem Login kopieren

Anschließend können wir die von ECharts bereitgestellte API verwenden, um das Histogramm zu konfigurieren und zu zeichnen. Das Folgende ist ein einfaches Codebeispiel für die Konfiguration eines Balkendiagramms:

// 创建图表实例
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);

Nach dem Login kopieren

Im obigen Code erstellen wir zunächst eine Diagramminstanz und binden sie über die übergeordnete Methode echarts.init an den im HTML angegebenen Container. Anschließend haben wir den Diagrammtitel, die X-Achse und die Y-Achse konfiguriert, wobei die Y-Achsen-Daten aus dem Namensfeld in unserem Zieldatensatz stammen. Schließlich haben wir die Histogrammreihe konfiguriert, die Histogrammdaten über das Attribut data angegeben, die numerische Beschriftung über das Attribut label angezeigt und die Beschriftungsposition auf die rechte Seite festgelegt. echarts.init方法将其绑定到HTML中指定的容器上。然后，我们配置了图表的标题、x轴和y轴，其中y轴的数据来自于我们目标数据集中的姓名字段。最后，我们配置了柱状图系列，并通过data属性指定了柱状图的数据，通过label属性来显示数值标签，并将标签的位置设置为右侧。

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

Abschließend rendern und zeigen wir das Histogramm an, indem wir die Methode chart.setOption aufrufen. Nach dem Aktualisieren der Browserseite wird die Leistungsbewertung des Schülers in Form eines Balkendiagramms angezeigt. Die Länge des Balkens gibt die Größe der Punktzahl an, und die numerische Beschriftung wird auf der rechten Seite des Balkens angezeigt.

Zusammenfassend stellt dieser Artikel die Verwendung des Histogramms (horizontal) in ECharts zur Anzeige von Datenrankings vor und stellt spezifische Codebeispiele bereit. Mithilfe dieser Beispielcodes können Entwickler ECharts flexibel verwenden, um Daten in tatsächlichen Projekten anzuzeigen und zu analysieren und so die Anforderungen an die Datenvisualisierung zu erfüllen. 🎜

Das obige ist der detaillierte Inhalt vonECharts-Histogramm (horizontal): So zeigen Sie das Datenranking an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!