Graphique en nuage de mots ECharts : comment afficher les mots-clés de données-js tutoriel-php.cn

Graphique en nuage de mots ECharts : comment afficher les mots-clés de données

WBOY

Libérer： 2023-12-18 09:00:27

original

1286 Les gens l'ont consulté

Graphique en nuage de mots ECharts : comment afficher les mots-clés de données

Graphique de nuages de mots ECharts : comment afficher des mots-clés de données, des exemples de code spécifiques sont nécessaires

Introduction :

Avec l'avènement de l'ère du Big Data, un problème important auquel nous sommes confrontés est de savoir comment extraire efficacement des informations utiles à partir de données massives information. L'extraction de mots clés est l'une des méthodes couramment utilisées. Lors de l'affichage de mots-clés, les diagrammes de nuages de mots constituent un moyen très intuitif et artistique qui permet aux utilisateurs de comprendre rapidement les caractéristiques des données et l'importance des mots-clés en un coup d'œil. Cet article explique comment utiliser ECharts pour afficher des diagrammes de nuages de mots et fournit des exemples de code spécifiques.

Texte :

1. Comprendre les principes de base du graphique en nuage de mots ECharts

ECharts est une bibliothèque de visualisation open source basée sur JavaScript, qui fournit une variété de types de graphiques. Parmi eux, le diagramme du nuage de mots montre l'importance des mots-clés à travers la taille et la couleur de la police. Des mots-clés plus grands et plus sombres indiquent une importance plus élevée. Le principe de base du graphique en nuage de mots ECharts est de calculer le nombre d'occurrences de mots-clés dans les données et d'afficher les mots-clés à haute fréquence dans des polices plus grandes et les mots-clés à basse fréquence dans des polices plus petites. Ensuite, nous présenterons comment utiliser ECharts pour afficher des diagrammes de nuages de mots.

2. Préparer les données

Avant de mettre en œuvre le graphique en nuage de mots, nous devons d'abord préparer les données. Supposons que nous souhaitions afficher des mots-clés dans un article, nous pouvons utiliser un ensemble de données contenant des mots-clés et leurs heures d'occurrence. Voici un exemple simple :

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

Copier après la connexion

3. Créez un graphique en nuage de mots

Après avoir préparé les données, nous pouvons commencer à créer le graphique en nuage de mots. Tout d’abord, nous devons introduire la bibliothèque ECharts et créer un conteneur pour afficher le graphique en nuage de mots. Voici un exemple de code pour créer un graphique en nuage de mots :

// 引入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);

Copier après la connexion

Dans le code ci-dessus, nous avons d'abord présenté la bibliothèque ECharts et créé un conteneur pour afficher le graphique en nuage de mots. Ensuite, nous avons initialisé le graphique du nuage de mots via la méthode echarts.init et défini les éléments de configuration du graphique du nuage de mots. Parmi eux, l'attribut type spécifie le type de graphique en tant que graphique en nuage de mots, l'attribut data spécifie la source de données et l'attribut textStyle peut être utilisé pour définir le style de police. Enfin, nous définissons l'élément de configuration sur le graphique en nuage de mots via la méthode 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>

Copier après la connexion

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

4. Afficher le graphique du nuage de mots

Enfin, nous devons afficher le graphique du nuage de mots créé sur la page. Voici un exemple simple :

rrreee

Dans le code ci-dessus, nous avons créé une page HTML et introduit la bibliothèque ECharts. Ensuite, nous créons un conteneur en utilisant la balise div pour afficher le nuage de mots. Enfin, nous mettons le code pour créer le graphique en nuage de mots dans la balise script et définissons les éléments de configuration du graphique en nuage de mots sur l'instance chart. 🎜🎜Résumé : 🎜🎜Cet article explique comment utiliser ECharts pour afficher des diagrammes de nuages de mots de mots-clés de données et fournit des exemples de code spécifiques. Grâce à l'affichage de diagrammes de nuages de mots, nous pouvons comprendre intuitivement l'importance des mots-clés et extraire plus facilement des informations utiles à partir de données massives. J'espère que cet article pourra vous être utile, merci d'avoir lu ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!