Comment utiliser un graphique à barres de pictogrammes pour afficher des données dans ECharts

Comment utiliser des pictogrammes pour afficher des données dans ECharts nécessite des exemples de code spécifiques

Dans le domaine de la visualisation de données, ECharts est une bibliothèque de visualisation open source puissante et facile à utiliser. Il fournit une variété de types de graphiques qui peuvent nous aider à afficher les données de manière intuitive. Parmi eux, l’histogramme pictographique est un type de graphique intuitif et intéressant qui peut afficher les données sous forme de graphiques éclatants. Cet article expliquera comment utiliser des pictogrammes pour afficher des données dans ECharts et fournira des exemples de code spécifiques.

Tout d'abord, nous devons présenter le fichier de bibliothèque ECharts. Il peut être importé via un CDN en ligne ou le fichier de bibliothèque peut être importé localement après l'avoir téléchargé. Après avoir introduit le fichier bibliothèque, nous pouvons commencer à utiliser ECharts pour créer des pictogrammes.

Ensuite, nous devons préparer les données à afficher. Supposons que nous souhaitions afficher un certain nombre d’animaux, notamment des chats, des chiens, des oiseaux et des poissons. Les données peuvent être représentées par un tableau d'objets, chacun contenant le nom et le nombre d'animaux. Par exemple :

var data = [
  { name: '猫', value: 10 },
  { name: '狗', value: 15 },
  { name: '鸟', value: 8 },
  { name: '鱼', value: 20 }
];

Ensuite, nous devons créer une instance de graphique et configurer sa configuration de base. Par exemple, nous pouvons créer un élément conteneur et utiliser la méthode echarts.init fournie par ECharts pour initialiser le graphique. echarts.init方法来初始化图表。

var chart = echarts.init(document.getElementById('chart-container'));

然后，我们可以设置图表的基本属性，例如标题、图例、坐标轴等。例如，我们可以设置图表的标题为“动物数量统计”，坐标轴的名称为“动物”和“数量”，并给图表添加一个图例来显示各个动物的名称。代码示例如下：

chart.setOption({
  title: {
    text: '动物数量统计'
  },
  legend: {
    data: ['猫', '狗', '鸟', '鱼']
  },
  xAxis: {
    name: '动物'
  },
  yAxis: {
    name: '数量'
  },
  series: []
});

最后，我们需要添加象形柱图的具体数据。在ECharts中，我们可以使用series属性来设置图表的数据。我们需要使用type: 'pictorialBar'来指定图表类型为象形柱图，并通过symbol

chart.setOption({
  // 之前的配置...
  series: [{
    type: 'pictorialBar',
    symbol: 'circle',
    data: data.map(function(item) {
      return {
        value: item.value,
        symbolSize: [30, 30], // 符号的大小
        symbolOffset: [0, '-50%'], // 符号的偏移量
        name: item.name
      };
    })
  }]
});

Ensuite, nous pouvons définir les propriétés de base du graphique, telles que le titre, la légende, l'axe, etc. Par exemple, nous pouvons définir le titre du graphique sur « Statistiques sur le nombre d'animaux », les noms des axes sur « Animaux » et « Nombre » et ajouter une légende au graphique pour afficher le nom de chaque animal. L'exemple de code est le suivant :

rrreee

Enfin, il faut ajouter les données spécifiques du pictogramme. Dans ECharts, nous pouvons utiliser l'attribut series pour définir les données du graphique. Nous devons utiliser type: 'pictorialBar' pour spécifier le type de graphique sous forme de graphique à barres picturales et spécifier le symbole à utiliser via l'attribut symbol. Ici, nous pouvons utiliser les symboles par défaut fournis par ECharts ou utiliser des symboles personnalisés. L'exemple de code est le suivant :

rrreee

Après avoir terminé les étapes ci-dessus, nous avons réussi à créer un graphique ECharts qui utilise un pictogramme pour afficher les données.

1. Pour résumer, les étapes pour utiliser des pictogrammes pour afficher les données dans ECharts sont les suivantes :
2. Présentez les fichiers de la bibliothèque d'ECharts.
3. Préparez les données à afficher.
4. Créez une instance de graphique et définissez sa configuration de base.

Ajoutez des données spécifiques pour le pictogramme.

🎜🎜J'espère que cet article pourra aider les lecteurs à comprendre comment utiliser des pictogrammes pour afficher des données dans ECharts et à les comprendre de manière plus intuitive grâce à des exemples de code. L'utilisation d'ECharts pour créer des pictogrammes peut rendre les données plus intéressantes et visuelles et améliorer l'effet d'affichage des données. 🎜

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!