Rumah > Artikel > hujung hadapan web > Carta awan perkataan ECharts: cara memaparkan kata kunci data

Carta awan perkataan ECharts: cara memaparkan kata kunci data

WBOYasal: 2023-12-18 09:00:271359semak imbas

Carta awan perkataan ECharts: Cara memaparkan kata kunci data, contoh kod khusus diperlukan

Pengenalan:

Dengan kemunculan era data besar, isu penting yang kami hadapi ialah cara mengekstrak maklumat berguna daripada data besar-besaran dengan berkesan maklumat. Pengekstrakan kata kunci adalah salah satu kaedah yang biasa digunakan. Apabila memaparkan kata kunci, gambar rajah awan perkataan ialah cara yang sangat intuitif dan artistik yang membolehkan orang ramai memahami dengan cepat ciri-ciri data dan kepentingan kata kunci sepintas lalu. Artikel ini akan memperkenalkan cara menggunakan ECharts untuk memaparkan gambar rajah awan perkataan dan memberikan contoh kod khusus.

Teks:

1 Fahami prinsip asas carta awan perkataan ECharts

ECharts ialah perpustakaan visualisasi sumber terbuka berdasarkan JavaScript, yang menyediakan pelbagai jenis carta. Antaranya, gambarajah awan perkataan menunjukkan kepentingan kata kunci melalui saiz dan warna fon Kata kunci yang lebih besar dan lebih gelap menunjukkan kepentingan yang lebih tinggi. Prinsip asas carta awan perkataan ECharts adalah untuk mengira bilangan kejadian kata kunci dalam data, dan memaparkan kata kunci frekuensi tinggi dalam fon yang lebih besar, dan kata kunci frekuensi rendah dalam fon yang lebih kecil. Seterusnya, kami akan memperkenalkan cara menggunakan ECharts untuk memaparkan gambar rajah awan perkataan.

2. Sediakan data

Sebelum melaksanakan carta awan perkataan, kita perlu menyediakan data terlebih dahulu. Katakan kita ingin memaparkan kata kunci dalam artikel, kita boleh menggunakan set data yang mengandungi kata kunci dan masa kejadiannya. Berikut ialah contoh mudah:

var data = [
  { name: 'ECharts', value: 100 },
  { name: '数据可视化', value: 80 },
  { name: '词云图', value: 60 },
  { name: '关键词提取', value: 50 },
  { name: 'JavaScript', value: 40 },
  { name: '图表库', value: 30 },
  // 其他关键词...
];

3. Buat carta awan perkataan

Selepas menyediakan data, kita boleh mula mencipta carta awan perkataan. Pertama, kita perlu memperkenalkan perpustakaan ECharts dan mencipta bekas untuk memaparkan carta awan perkataan. Berikut ialah contoh kod untuk mencipta carta awan perkataan:

// 引入ECharts库
import echarts from 'echarts';

// 创建容器
var container = document.getElementById('wordcloud');

// 初始化词云图
var chart = echarts.init(container);

// 设置词云图的配置项
var option = {
  series: [{
    type: 'wordCloud',
    data: data,
    textStyle: {
      normal: {
        fontFamily: 'Arial',
        fontWeight: 'bold',
      }
    }
  }]
};

// 将配置项设置到词云图中
chart.setOption(option);

Dalam kod di atas, kami mula-mula memperkenalkan perpustakaan ECharts dan mencipta bekas untuk memaparkan carta awan perkataan. Kemudian, kami memulakan graf awan perkataan melalui kaedah echarts.init dan menetapkan item konfigurasi graf awan perkataan. Antaranya, atribut type menentukan jenis carta sebagai carta awan perkataan, atribut data menentukan sumber data dan atribut textStyle boleh digunakan untuk menetapkan gaya fon. Akhir sekali, kami menetapkan item konfigurasi kepada carta awan perkataan melalui kaedah chart.setOption. echarts.init方法初始化了词云图，并设置了词云图的配置项。其中，type属性指定了图表类型为词云图，data属性指定了数据源，textStyle属性可以用来设置字体样式。最后，我们通过chart.setOption方法将配置项设置到词云图中。

四、显示词云图

最后，我们需要将创建好的词云图显示在页面上。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>ECharts词云图示例</title>
  <!-- 引入ECharts库 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
  <!-- 创建一个容器来显示词云图 -->
  <div id="wordcloud" style="width: 600px; height: 400px;"></div>
  <!-- 调用创建词云图的代码 -->
  <script>
    // 创建数据
    var data = [
      // 数据内容...
    ];

    // 创建词云图
    var container = document.getElementById('wordcloud');

    var chart = echarts.init(container);

    var option = {
      // 配置项...
    };

    chart.setOption(option);
  </script>
</body>
</html>

在上述代码中，我们创建了一个HTML页面，并引入了ECharts库。然后，我们使用div标签创建了一个容器来显示词云图。最后，我们将创建词云图的代码放在script标签里，并将词云图的配置项设置到chart

4 Paparkan graf awan perkataan

Akhir sekali, kita perlu memaparkan graf awan perkataan yang dibuat pada halaman. Berikut ialah contoh mudah:

rrreee

Dalam kod di atas, kami telah mencipta halaman HTML dan memperkenalkan perpustakaan ECharts. Kemudian, kami mencipta bekas menggunakan teg div untuk memaparkan perkataan awan. Akhir sekali, kami meletakkan kod untuk mencipta carta awan perkataan dalam teg skrip dan menetapkan item konfigurasi carta awan perkataan kepada contoh carta. 🎜🎜Ringkasan: 🎜🎜Artikel ini memperkenalkan cara menggunakan ECharts untuk memaparkan gambar rajah awan perkataan kata kunci data dan menyediakan contoh kod khusus. Melalui paparan gambar rajah awan perkataan, kami dapat memahami secara intuitif kepentingan kata kunci dan lebih mudah mengekstrak maklumat berguna daripada data besar-besaran. Saya harap artikel ini dapat membantu anda, terima kasih kerana membaca! 🎜

Atas ialah kandungan terperinci Carta awan perkataan ECharts: cara memaparkan kata kunci data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript echarts html

Kenyataan：

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

Artikel sebelumnya：Cara menggunakan carta kalendar untuk memaparkan data masa dalam EChartsArtikel seterusnya：Cara menggunakan carta kalendar untuk memaparkan data masa dalam ECharts

Artikel berkaitan

Lihat lagi