ECharts-Histogramm (mehrdimensional): So zeigen Sie Datengruppierung und -vergleich an

ECharts-Histogramm (mehrdimensional): Für die Anzeige von Datengruppierungen und -vergleichen sind spezifische Codebeispiele erforderlich.

ECharts ist eine auf JavaScript basierende Open-Source-Visualisierungsbibliothek, die zur Anzeige verschiedener Arten von Datendiagrammen verwendet wird. Das Histogramm ist eine gängige Datenvisualisierungsmethode, mit der die Gruppierung und der Vergleich von Daten in verschiedenen Gruppen oder Kategorien dargestellt werden können. In diesem Artikel wird detailliert beschrieben, wie die mehrdimensionale Histogrammfunktion von ECharts zum Anzeigen von Datengruppierungen und -vergleichen verwendet wird, und es werden spezifische Codebeispiele als Referenz für die Leser bereitgestellt.

1. Übersicht über das mehrdimensionale Histogramm von ECharts

Ein mehrdimensionales Histogramm ist ein Diagramm, das mehrere Datenindikatoren gleichzeitig anzeigen kann. Es kann auch als Balkendiagramm, Balkendiagramm oder Histogramm bezeichnet werden. Es kann zum Anzeigen der Gruppierung und des Vergleichs von Daten in verschiedenen Gruppen oder Kategorien verwendet werden und eignet sich zum Anzeigen von Datensätzen mit mehreren Dimensionen. Beispielsweise können bei der Darstellung der Umsätze des Unternehmens die Umsätze verschiedener Produktlinien, Umsätze verschiedener Vertriebsregionen und andere Dimensionen gleichzeitig in einem mehrdimensionalen Säulendiagramm angezeigt werden, um die Beziehung zwischen verschiedenen Daten schnell zu vergleichen. Das mehrdimensionale Histogramm von

Das mehrdimensionale Histogramm von ECharts unterstützt eine Vielzahl unterschiedlicher Dimensionskombinationen, z. B. unterschiedliche Werte derselben Dimension als unterschiedliche Histogrammgruppen oder Kombinationen unterschiedlicher Dimensionen als unterschiedliche Histogrammgruppen usw. Nachdem die Dimensionskombination festgelegt wurde, kann jede Histogrammgruppe entsprechend unterschiedlicher Farben, Farbverläufen, Lücken zwischen Histogrammen, Histogrammbreiten usw. angepasst werden, um sie an unterschiedliche Anforderungen anzupassen.

2. So verwenden Sie das mehrdimensionale Histogramm von ECharts

1. Daten vorbereiten

Bevor Sie das mehrdimensionale Histogramm von ECharts zum Anzeigen von Daten verwenden, müssen Sie die Daten zunächst vorbereiten. Das Format der Daten muss dem von ECharts angegebenen Format entsprechen. Die spezifischen Formatanforderungen können Sie der offiziellen Dokumentation entnehmen. Hier ist ein Beispiel:

let data = [
   {product: 'A', area: 'Shanghai', sales: 800},
   {product: 'B', area: 'Shanghai', sales: 1200},
   {product: 'A', area: 'Beijing', sales: 1000},
   {product: 'B', area: 'Beijing', sales: 1400},
];

Die oben genannten Daten enthalten Daten in drei Dimensionen: Produktlinie, Verkaufsregion und Umsatz.

2. ECharts-Parameter konfigurieren

Nach der Vorbereitung der Daten müssen Sie ECharts-Parameter konfigurieren. ECharts bietet eine spezielle Parameterkonfigurationsmethode für mehrdimensionale Histogramme. Die spezifischen Parameterbeschreibungen können Sie in der offiziellen Dokumentation einsehen. Hier ist ein Beispiel:

let option = {
   xAxis: {
       type: 'category',
       data: ['Shanghai', 'Beijing']
   },
   yAxis: {
       type: 'value'
   },
   series: [
       {
           type: 'bar',
           name: 'Product A',
           data: [800, 1000]
       },
       {
           type: 'bar',
           name: 'Product B',
           data: [1200, 1400]
       }
   ]
};

Im obigen Code stellt die x-Achse die Dimension „Verkaufsregion“ und die y-Achse die Dimension „Verkauf“ dar. Im Serienarray sind zwei Histogrammgruppen definiert, bei denen es sich um die Verkaufsdaten von Produkt A und Produkt B handelt.

3. Rendering von ECharts-Diagrammen

Nach Abschluss der ECharts-Parameterkonfiguration können Sie die Parameter über die von ECharts bereitgestellte API an die DOM-Elemente in der HTML-Seite binden, um ein bestimmtes Histogramm zu generieren. Hier ist ein Beispiel:

let chart = echarts.init(document.getElementById('chart_container'));
chart.setOption(option);

Im obigen Code ist „chart_container“ der ID-Wert eines DIV-Elements in der HTML-Seite, das zum Speichern des generierten Histogramms verwendet wird. Die Methode echarts.init() wird zum Initialisieren der ECharts-Instanz verwendet, und die Methode setOption() wird zum Festlegen der Parameter der Instanz verwendet.

3. Codebeispiel

Das Folgende ist ein einfaches Codebeispiel, das zeigt, wie das mehrdimensionale Histogramm von ECharts zum Anzeigen von Datengruppierungen und -vergleichen verwendet wird. Der Code zeigt zwei Sätze von Verkaufsdaten, nämlich Verkaufsdaten für verschiedene Produktlinien und Verkaufsregionen.

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>ECharts多维柱状图示例</title>
</head>
<body>
   <div id="chart_container" style="width: 600px; height: 400px;"></div>
   <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
   <script>
       // 准备数据
       let data = [
           {product: 'A', area: 'Shanghai', sales: 800},
           {product: 'B', area: 'Shanghai', sales: 1200},
           {product: 'A', area: 'Beijing', sales: 1000},
           {product: 'B', area: 'Beijing', sales: 1400},
       ];
       
       // 配置ECharts参数
       let option = {
           legend: {},
           tooltip: {},
           dataset: {
               dimensions: ['area', 'product', 'sales'],
               source: data
           },
           xAxis: {
               type: 'category',
               axisLabel: {
                   interval: 0,
                   rotate: 45
               }
           },
           yAxis: {},
           series: [
               {type: 'bar', seriesLayoutBy: 'row'},
               {type: 'bar', seriesLayoutBy: 'row'}
           ]
       };
       
       // 渲染ECharts图表
       let chart = echarts.init(document.getElementById('chart_container'));
       chart.setOption(option);
   </script>
</body>
</html>

Im obigen Beispielcode wird der Legendenparameter verwendet, um die Position und den Stil der Legende zu konfigurieren, der Tooltip wird verwendet, um den Stil des Eingabeaufforderungsfelds zu konfigurieren, wenn die Maus darüber bewegt wird, und der Datensatzparameter wird verwendet, um das Datensatzformat zu konfigurieren und „Dimensionen“ werden verwendet, um die Dimensionsreihenfolge des Datensatzes zu definieren. „Quelle“ wird verwendet, um die Datenquelle anzugeben.

Der xAxis-Parameter wird verwendet, um den Stil der x-Achse zu konfigurieren, die Intervall- und Rotationsattribute in axisLabel werden verwendet, um den Textanzeigemodus der x-Achsenbeschriftung zu steuern, und yAxis wird verwendet, um den Stil der y-Achse zu konfigurieren -Achse.

series wird verwendet, um den Stil der Histogrammgruppe zu definieren, wobei „type“ den Diagrammtyp darstellt und „seriesLayoutBy“ die Zeichenmethode darstellt, die Zeilen oder Spalten als Datendimensionen verwendet.

Durch die obigen Codebeispiele können Leser ein tieferes Verständnis für die Verwendung der mehrdimensionalen Histogramme von ECharts erlangen und dann die Datengruppierung und den Vergleich in praktischen Anwendungen flexibler anzeigen.

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