Für die Verwendung von Streumatrixdiagrammen zum Anzeigen von Datenbeziehungen in ECharts sind bestimmte Codebeispiele erforderlich.
ECharts (Enterprise Charts) ist eine von Baidu eingeführte Open-Source-Datenvisualisierungsbibliothek auf Basis von HTML5 Canvas, die eine Fülle von Diagrammtypen und -diagrammen bietet Interaktive Funktionen. Unter diesen ist das Streumatrixdiagramm eine häufig verwendete Datenvisualisierungsmethode, mit der die Beziehung zwischen mehreren Variablen visuell dargestellt werden kann. In diesem Artikel wird erläutert, wie Sie Streumatrixdiagramme in ECharts verwenden, um Datenbeziehungen anzuzeigen, und entsprechende Codebeispiele bereitstellen.
1. Datenvorbereitung
Zuerst müssen wir die anzuzeigenden Daten vorbereiten. Angenommen, wir haben einen einfachen Datensatz mit drei Variablen X, Y und Z, und jede Variable nimmt einen Wert innerhalb eines bestimmten Bereichs an. Arrays können zum Speichern dieser Daten verwendet werden, wie unten gezeigt:
var data = [ [1, 2, 3], [2, 3, 4], [3, 4, 5], // 更多数据... ];
In diesem Beispiel stellt jedes Array einen Datenpunkt dar und die Elemente im Array entsprechen der Reihe nach den Werten der Variablen X, Y und Z .
2. Erstellen Sie ein Streumatrixdiagramm. Als nächstes können wir ECharts verwenden, um ein Streumatrixdiagramm zu erstellen. Zuerst müssen Sie die Ressourcendatei von ECharts importieren, wie unten gezeigt:
<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>
<div>-Element, um das Streumatrixdiagramm aufzunehmen, und legen Sie den entsprechenden Stil und die entsprechende Größe fest. wie folgt Wie gezeigt: <div id="scatterMatrix" style="width: 800px; height: 600px;"></div>
<div>元素，用于容纳散点矩阵图，并设置相应的样式和尺寸，如下所示：var scatterMatrix = echarts.init(document.getElementById('scatterMatrix'));
var option = {
tooltip: {},
xAxis: {},
yAxis: {},
series: [{
type: 'scatter',
data: data,
symbolSize: 10,
}]
};
scatterMatrix.setOption(option);接着，使用JavaScript代码来初始化ECharts，并配置散点矩阵图的参数，如下所示：
var option = {
// ...
series: [{
type: 'scatter',
data: data,
symbolSize: 10,
itemStyle: {
color: function(params) {
var value = params.data[2];
if (value >= 0 && value < 3) {
return 'red';
} else if (value >= 3 && value < 6) {
return 'blue';
} else {
return 'green';
}
}
}
}]
};在这个示例中，我们使用了ECharts的scatter系列类型来创建散点图，通过设置data属性来指定要展示的数据。同时，通过设置symbolSize属性来调整散点的大小。
三、自定义散点矩阵图
除了基本的散点矩阵图，ECharts还提供了丰富的配置项，可以自定义散点的样式、颜色等。例如，我们可以通过设置color Als nächstes verwenden Sie JavaScript-Code, um ECharts zu initialisieren und die Parameter des Streumatrixdiagramms wie folgt zu konfigurieren:
In diesem Beispiel verwenden wir den Typ scatter von ECharts Erstellen Sie ein Streudiagramm und geben Sie die anzuzeigenden Daten an, indem Sie das Attribut data festlegen. Passen Sie gleichzeitig die Größe der Streupunkte an, indem Sie die Eigenschaft symbolSize festlegen.
3. Benutzerdefiniertes Streumatrixdiagramm
Zusätzlich zum grundlegenden Streumatrixdiagramm bietet ECharts auch eine Fülle von Konfigurationselementen, mit denen Sie den Streupunktstil, die Farbe usw. anpassen können. Beispielsweise können wir unterschiedliche Farben für verschiedene Datenpunkte angeben, indem wir das Attribut color festlegen:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie ein Streumatrixdiagramm, um Datenbeziehungen in ECharts anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
