suchen

Heim >Web-Frontend >js-Tutorial >So verwenden Sie Streudiagramme, um Datenbeziehungen in ECharts anzuzeigen

So verwenden Sie Streudiagramme, um Datenbeziehungen in ECharts anzuzeigen

王林
王林Original
2023-12-17 21:53:45867Durchsuche

So verwenden Sie Streudiagramme, um Datenbeziehungen in ECharts anzuzeigen

Für die Verwendung von Streudiagrammen zum Anzeigen von Datenbeziehungen in ECharts sind bestimmte Codebeispiele erforderlich.

ECharts ist eine Open-Source-Datenvisualisierungsbibliothek, die Benutzern eine Fülle von Diagrammtypen zum Anzeigen von Daten bietet. Unter diesen ist das Streudiagramm eine häufig verwendete Methode zur Datenanzeige. Durch die Darstellung der Position von Datenpunkten im Koordinatensystem kann die Beziehung zwischen Daten visuell dargestellt werden. In diesem Artikel wird erläutert, wie Sie Streudiagramme verwenden, um Datenbeziehungen in ECharts anzuzeigen, und es werden spezifische Codebeispiele bereitgestellt.

Um ECharts zum Zeichnen eines Streudiagramms zu verwenden, müssen Sie zunächst die ECharts-Bibliotheksdatei in die HTML-Seite einfügen. Es kann durch die folgenden Schritte eingeführt werden: 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>使用散点图展示数据关系</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
</head>
<body>
  <div id="scatterChart" style="width: 600px; height: 400px"></div>
  <script src="scatter.js"></script>
</body>
</html>

Erstellen Sie ein div-Element in HTML und weisen Sie ihm eine ID für die Verwendung in JavaScript zu. Führen Sie dann die ECharts-Bibliotheksdatei über das Tag <script></script> ein. Als Nächstes verwenden Sie das Tag <script></script>, um eine JavaScript-Datei mit dem Namen scatter.js zum Zeichnen von Streudiagrammen einzuführen. <script></script>标签引入ECharts库文件。接下来，使用<script></script>标签引入一个名为scatter.js的JavaScript文件，用于绘制散点图。

在scatter.js

In der Datei scatter.js können Sie spezifischen Code schreiben, um ein Streudiagramm zu zeichnen. Zuerst müssen Sie den Verweis auf das div-Element erhalten: 

var scatterChart = echarts.init(document.getElementById('scatterChart'));

Dann definieren Sie die Daten, die angezeigt werden müssen. Am Beispiel eines einfachen zweidimensionalen Streudiagramms können Sie ein Array mit mehreren Datenpunkten definieren: 

var data = [
  [10, 4],
  [15, 10],
  [7, 8],
  [20, 14],
  // 更多数据点...
];

Als Nächstes können Sie den Stil und die Daten des Streudiagramms über die von ECharts bereitgestellten Optionskonfigurationselemente festlegen. Zuerst müssen Sie ein leeres Objekt als Anfangswert der Option definieren: 

var option = {};

Dann können Sie die relevante Konfiguration des Streudiagramms im Optionsobjekt festlegen, einschließlich Koordinatenachsen, Datenpunktstil, Legende usw. Hier sind Sie kann die x-Achse und die y-Achse festlegen. Der Skalenbereich und der Name dienen als Beispiel: 

option = {
  xAxis: {
    type: 'value',
    min: 0,
    max: 25,
    name: 'X轴'
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 15,
    name: 'Y轴'
  },
  series: [{
    type: 'scatter',
    data: data
  }]
};

Mit dem obigen Code wurde das Streudiagramm gezeichnet. Verwenden Sie abschließend einfach die setOption-Methode, um die Konfiguration auf das Diagramm anzuwenden und die Anzeige des Streudiagramms abzuschließen: 

scatterChart.setOption(option);

Zusammenfassend implementiert der obige Code die Funktion zum Zeichnen von Streudiagrammen und zum Anzeigen von Datenbeziehungen in ECharts. Durch Einführen der ECharts-Bibliotheksdatei, Erstellen der entsprechenden HTML-Seite und Konfigurieren des Streudiagrammstils und der Daten in der JavaScript-Datei kann das Streudiagramm gezeichnet werden. Wir hoffen, dass die in diesem Artikel bereitgestellten Codebeispiele den Lesern helfen können, besser zu verstehen, wie Streudiagramme zur Anzeige von Datenbeziehungen in ECharts verwendet werden. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Streudiagramme, um Datenbeziehungen in ECharts anzuzeigen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript echarts html JS 对象
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：ECharts-Kreisdiagramm: So zeigen Sie Datenproportionen anNächster Artikel：ECharts-Kreisdiagramm: So zeigen Sie Datenproportionen an

In Verbindung stehende Artikel

Mehr sehen