Cara menggunakan carta matriks taburan untuk memaparkan hubungan data dalam ECharts

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

ECharts (Carta Perusahaan) ialah perpustakaan visualisasi data sumber terbuka berdasarkan Kanvas HTML5 yang dilancarkan oleh Baidu, yang menyediakan pelbagai jenis carta dan Ciri interaktif. Antaranya, plot matriks serakan ialah kaedah visualisasi data yang biasa digunakan yang boleh memaparkan secara visual hubungan antara pelbagai pembolehubah. Artikel ini akan memperkenalkan cara menggunakan carta matriks taburan dalam ECharts untuk memaparkan perhubungan data dan memberikan contoh kod yang sepadan.

1. Penyediaan data
Pertama, kita perlu menyediakan data untuk dipaparkan. Katakan kita mempunyai set data ringkas yang mengandungi tiga pembolehubah X, Y dan Z, dan setiap pembolehubah mengambil nilai dalam julat tertentu. Tatasusunan boleh digunakan untuk menyimpan data ini, seperti yang ditunjukkan di bawah:

var data = [
  [1, 2, 3],
  [2, 3, 4],
  [3, 4, 5],
  // 更多数据...
];

Dalam contoh ini, setiap tatasusunan mewakili titik data, dan unsur-unsur dalam tatasusunan sepadan dengan nilai pembolehubah X, Y dan Z pada gilirannya .

2. Buat carta matriks serakan
Seterusnya, kita boleh menggunakan ECharts untuk mencipta carta matriks serakan. Mula-mula, anda perlu mengimport fail sumber ECharts, seperti yang ditunjukkan di bawah:

<script src="https://cdn.staticfile.org/echarts/4.8.0/echarts.min.js"></script>

Kemudian, cipta elemen <div> untuk menampung carta matriks serakan, dan tetapkan gaya dan saiz yang sepadan, seperti berikut Seperti yang ditunjukkan: <div>元素，用于容纳散点矩阵图，并设置相应的样式和尺寸，如下所示：

<div id="scatterMatrix" style="width: 800px; height: 600px;"></div>

接着，使用JavaScript代码来初始化ECharts，并配置散点矩阵图的参数，如下所示：

var scatterMatrix = echarts.init(document.getElementById('scatterMatrix'));
var option = {
  tooltip: {},
  xAxis: {},
  yAxis: {},
  series: [{
    type: 'scatter',
    data: data,
    symbolSize: 10,
  }]
};
scatterMatrix.setOption(option);

在这个示例中，我们使用了ECharts的scatter系列类型来创建散点图，通过设置data属性来指定要展示的数据。同时，通过设置symbolSize属性来调整散点的大小。

三、自定义散点矩阵图
除了基本的散点矩阵图，ECharts还提供了丰富的配置项，可以自定义散点的样式、颜色等。例如，我们可以通过设置color

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';
        }
      }
    }
  }]
};

Seterusnya, gunakan kod JavaScript untuk memulakan ECharts dan konfigurasikan parameter carta matriks serakan seperti berikut:

rrreee

Dalam contoh ini, kami menggunakan siri scatter ECharts Taip untuk buat plot taburan, nyatakan data yang akan dipaparkan dengan menetapkan atribut data. Pada masa yang sama, laraskan saiz titik taburan dengan menetapkan sifat symbolSize.

3. Carta Matriks Scatter Tersuai

Selain carta matriks serakan asas, ECharts juga menyediakan banyak item konfigurasi yang boleh menyesuaikan gaya titik serakan, warna, dsb. Sebagai contoh, kita boleh menentukan warna yang berbeza untuk titik data yang berbeza dengan menetapkan atribut color: 🎜rrreee🎜Dalam contoh ini, kami menetapkan warna titik data berdasarkan nilai pembolehubah Z, yang akan mengambil Data dengan nilai dalam julat [0,3) ditetapkan dalam warna merah, data dengan nilai dalam julat [3,6) ditetapkan dalam warna biru, dan data lain ditetapkan dalam warna hijau. 🎜🎜4. Ringkasan🎜Artikel ini memperkenalkan cara menggunakan carta matriks taburan untuk memaparkan perhubungan data dalam ECharts dan menyediakan contoh kod yang sepadan. Sebagai tambahan kepada carta matriks serakan asas, ECharts juga menyediakan banyak item konfigurasi, dan anda boleh menyesuaikan gaya, warna, dsb. titik serakan untuk memenuhi keperluan yang berbeza. Dengan menggunakan ECharts, kami boleh membuat pelbagai jenis carta visualisasi data dengan cepat dan fleksibel untuk membantu kami memahami dan menganalisis data dengan lebih baik. 🎜

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