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

Rumah

hujung hadapan web

tutorial js

Cara menggunakan plot taburan untuk memaparkan hubungan data dalam ECharts

王林

Dec 17, 2023 pm 09:53 PM

echarts Petak berselerak hubungan data

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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

1 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Di mana untuk mencari kad kunci kawalan kren di atomfall

1 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7442

Tutorial CakePHP

1371

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Antara muka ECharts dan Java: Cara melaksanakan carta statistik dengan cepat seperti carta garis, carta bar, carta pai, dsb. Dec 17, 2023 pm 10:37 PM

Antara muka ECharts dan Java: Bagaimana untuk melaksanakan carta statistik dengan cepat seperti carta garis, carta bar dan carta pai, yang memerlukan contoh kod khusus Dengan kemunculan era Internet, analisis data menjadi semakin penting. Carta statistik ialah kaedah paparan yang sangat intuitif dan berkuasa Carta boleh memaparkan data dengan lebih jelas, membolehkan orang ramai memahami konotasi dan corak data. Dalam pembangunan Java, kita boleh menggunakan antara muka ECharts dan Java untuk memaparkan pelbagai carta statistik dengan cepat. ECharts ialah perisian yang dibangunkan oleh Baidu

Langkah-langkah untuk melukis papan pemuka menggunakan antara muka ECharts dan Python Dec 18, 2023 am 08:40 AM

Langkah-langkah untuk melukis papan pemuka menggunakan antara muka ECharts dan Python memerlukan contoh kod khusus: ECharts ialah alat visualisasi data yang sangat baik yang boleh melakukan pemprosesan data dan lukisan grafik melalui antara muka Python. Artikel ini akan memperkenalkan langkah khusus untuk melukis papan pemuka menggunakan antara muka ECharts dan Python serta menyediakan kod sampel. Kata kunci: ECharts, antara muka Python, papan pemuka, visualisasi data Pengenalan Papan pemuka ialah bentuk visualisasi data yang biasa digunakan, yang menggunakan

Cara menggunakan antara muka php dan ECharts untuk menjana carta statistik visual Dec 18, 2023 am 11:39 AM

Dalam konteks hari ini di mana visualisasi data menjadi semakin penting, ramai pembangun berharap untuk menggunakan pelbagai alatan untuk menjana pelbagai carta dan laporan dengan cepat supaya mereka boleh memaparkan data dengan lebih baik dan membantu pembuat keputusan membuat pertimbangan yang pantas. Dalam konteks ini, menggunakan antara muka Php dan perpustakaan ECharts boleh membantu ramai pembangun menjana carta statistik visual dengan cepat. Artikel ini akan memperkenalkan secara terperinci cara menggunakan antara muka Php dan perpustakaan ECharts untuk menjana carta statistik visual. Dalam pelaksanaan khusus, kami akan menggunakan MySQL

Cara menggunakan peta haba peta untuk memaparkan haba bandar dalam ECharts Dec 18, 2023 pm 04:00 PM

Cara menggunakan peta haba peta untuk memaparkan haba bandar dalam ECharts ECharts ialah perpustakaan carta visual berkuasa yang menyediakan pelbagai jenis carta untuk digunakan oleh pembangun, termasuk peta haba peta. Peta haba peta boleh digunakan untuk menunjukkan populariti bandar atau wilayah, membantu kami memahami dengan cepat populariti atau kepadatan tempat yang berbeza. Artikel ini akan memperkenalkan cara menggunakan peta haba peta dalam ECharts untuk memaparkan haba bandar dan menyediakan contoh kod untuk rujukan. Pertama, kami memerlukan fail peta yang mengandungi maklumat geografi, EC

Cara menggunakan carta kalendar untuk memaparkan data masa dalam ECharts Dec 18, 2023 am 08:52 AM

Cara menggunakan carta kalendar untuk memaparkan data masa dalam ECharts ECharts (pustaka carta JavaScript sumber terbuka Baidu) ialah alat visualisasi data yang berkuasa dan mudah digunakan. Ia menawarkan pelbagai jenis carta, termasuk carta garisan, carta bar, carta pai dan banyak lagi. Carta kalendar ialah jenis carta yang sangat tersendiri dan praktikal dalam ECharts, yang boleh digunakan untuk memaparkan data berkaitan masa. Artikel ini akan memperkenalkan cara menggunakan carta kalendar dalam ECharts dan memberikan contoh kod khusus. Pertama, anda perlu menggunakan

Panduan teknikal ECharts dan golang: petua praktikal untuk mencipta pelbagai carta statistik Dec 17, 2023 pm 09:56 PM

Panduan teknikal ECharts dan golang: Petua praktikal untuk mencipta pelbagai carta statistik, contoh kod khusus diperlukan Pengenalan: Dalam bidang visualisasi data moden, carta statistik adalah alat penting untuk analisis dan visualisasi data. ECharts ialah perpustakaan visualisasi data yang berkuasa, manakala golang ialah bahasa pengaturcaraan yang pantas, boleh dipercayai dan cekap. Artikel ini akan memperkenalkan anda kepada cara menggunakan ECharts dan golang untuk mencipta pelbagai jenis carta statistik dan memberikan contoh kod untuk membantu anda menguasai kemahiran ini. Persediaan

Cara menggunakan antara muka ECharts dan php untuk menjana carta statistik Dec 18, 2023 pm 01:47 PM

Cara menggunakan antara muka ECharts dan PHP untuk menjana carta statistik Pengenalan: Dalam pembangunan aplikasi web moden, visualisasi data ialah pautan yang sangat penting, yang boleh membantu kami memaparkan dan menganalisis data secara intuitif. ECharts ialah perpustakaan carta JavaScript sumber terbuka yang berkuasa Ia menyediakan pelbagai jenis carta dan fungsi interaktif yang kaya, dan boleh menjana pelbagai carta statistik dengan mudah. Artikel ini akan memperkenalkan cara menggunakan antara muka ECharts dan PHP untuk menjana carta statistik, dan memberikan contoh kod khusus. 1. Gambaran keseluruhan ECha

Adakah ECharts bergantung pada jQuery? Analisis mendalam Feb 27, 2024 am 08:39 AM

Adakah ECharts perlu bergantung pada jQuery? Tafsiran terperinci memerlukan contoh kod khusus ECharts ialah perpustakaan visualisasi data yang sangat baik yang menyediakan pelbagai jenis carta dan fungsi interaktif dan digunakan secara meluas dalam pembangunan web. Apabila menggunakan ECharts, ramai orang akan mempunyai soalan: Adakah ECharts perlu bergantung pada jQuery? Artikel ini akan menerangkan perkara ini secara terperinci dan memberikan contoh kod khusus. Pertama sekali, untuk menjadi jelas, ECharts sendiri tidak bergantung pada jQuery;

See all articles