Cara menggunakan plot taburan untuk memaparkan hubungan data dalam ECharts-tutorial js-php.cn

Cara menggunakan plot taburan untuk memaparkan hubungan data dalam ECharts

王林

Lepaskan： 2023-12-17 21:53:45

asal

923 orang telah melayarinya

Cara menggunakan plot taburan untuk memaparkan hubungan data dalam ECharts

Cara menggunakan plot taburan untuk memaparkan perhubungan data dalam ECharts memerlukan contoh kod khusus

ECharts ialah perpustakaan visualisasi data sumber terbuka yang menyediakan pelbagai jenis carta untuk pengguna memaparkan data. Antaranya, plot serakan ialah kaedah paparan data yang biasa digunakan Dengan menyatakan kedudukan titik data dalam sistem koordinat, hubungan antara data dapat dipaparkan secara visual. Artikel ini akan memperkenalkan cara menggunakan plot taburan untuk memaparkan perhubungan data dalam ECharts dan memberikan contoh kod khusus.

Pertama sekali, untuk menggunakan ECharts untuk melukis carta serakan, anda perlu memperkenalkan fail perpustakaan ECharts ke dalam halaman HTML. Ia boleh diperkenalkan melalui langkah berikut:

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

Salin selepas log masuk

Buat elemen div dalam HTML dan tetapkan ia id untuk digunakan dalam JavaScript. Kemudian, perkenalkan fail perpustakaan ECharts melalui teg <script>. Seterusnya, gunakan teg <script> untuk memperkenalkan fail JavaScript bernama scatter.js untuk melukis plot serakan. <script>标签引入ECharts库文件。接下来，使用<script>标签引入一个名为scatter.js的JavaScript文件，用于绘制散点图。

在scatter.js

Dalam fail scatter.js, anda boleh menulis kod khusus untuk melukis plot serakan. Pertama, anda perlu mendapatkan rujukan kepada elemen div:

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

Salin selepas log masuk

Kemudian, tentukan data yang perlu dipaparkan. Mengambil carta serakan dua dimensi yang mudah sebagai contoh, anda boleh menentukan tatasusunan yang mengandungi berbilang titik data:

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

Salin selepas log masuk

Seterusnya, anda boleh menetapkan gaya dan data carta serakan melalui item konfigurasi pilihan yang disediakan oleh ECharts. Mula-mula, anda perlu mentakrifkan objek kosong sebagai nilai awal pilihan:

var option = {};

Salin selepas log masuk

Kemudian, anda boleh menetapkan konfigurasi yang berkaitan bagi plot serakan dalam objek pilihan, termasuk paksi koordinat, gaya titik data, legenda, dll. Di sini anda boleh menetapkan paksi-x dan paksi-y Julat skala dan nama adalah sebagai contoh:

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

Salin selepas log masuk

Dengan kod di atas, plot serakan telah dilukis. Akhir sekali, hanya gunakan kaedah setOption untuk menggunakan konfigurasi pada carta untuk melengkapkan paparan carta serakan:

scatterChart.setOption(option);

Salin selepas log masuk

Ringkasnya, kod di atas melaksanakan fungsi melukis carta serakan dan memaparkan hubungan data dalam ECharts. Dengan memperkenalkan fail perpustakaan ECharts, mencipta halaman HTML yang sepadan, dan mengkonfigurasi gaya carta taburan dan data dalam fail JavaScript, carta serakan boleh dilukis. Kami berharap contoh kod yang disediakan dalam artikel ini dapat membantu pembaca lebih memahami cara menggunakan plot serakan untuk memaparkan perhubungan data dalam ECharts. 🎜

Atas ialah kandungan terperinci Cara menggunakan plot taburan untuk memaparkan hubungan data dalam ECharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!