So verwenden Sie ein Piktogramm-Balkendiagramm zur Anzeige von Daten in ECharts

Für die Verwendung von Piktogrammen zur Anzeige von Daten in ECharts sind spezifische Codebeispiele erforderlich.

Im Bereich der Datenvisualisierung ist ECharts eine leistungsstarke und benutzerfreundliche Open-Source-Visualisierungsbibliothek. Es bietet eine Fülle von Diagrammtypen, die uns dabei helfen können, Daten auf intuitive Weise anzuzeigen. Unter diesen ist das piktografische Säulendiagramm ein intuitiver und interessanter Diagrammtyp, der Daten in lebendigen Grafiken anzeigen kann. In diesem Artikel wird erläutert, wie Sie Piktogramme zum Anzeigen von Daten in ECharts verwenden, und es werden spezifische Codebeispiele bereitgestellt.

Zuerst müssen wir die ECharts-Bibliotheksdatei vorstellen. Es kann über das Online-CDN importiert werden, oder die Bibliotheksdatei kann nach dem Herunterladen lokal importiert werden. Nachdem wir die Bibliotheksdatei eingeführt haben, können wir mit ECharts beginnen, Piktogrammdiagramme zu erstellen.

Als nächstes müssen wir die anzuzeigenden Daten vorbereiten. Angenommen, wir möchten eine Reihe von Tieren anzeigen, darunter Katzen, Hunde, Vögel und Fische. Die Daten können durch eine Reihe von Objekten dargestellt werden, die jeweils den Namen und die Anzahl der Tiere enthalten. Zum Beispiel:

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

Als nächstes müssen wir eine Diagramminstanz erstellen und ihre Grundkonfiguration einrichten. Beispielsweise können wir ein Containerelement erstellen und die von ECharts bereitgestellte Methode echarts.init verwenden, um das Diagramm zu initialisieren. 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
      };
    })
  }]
});

Dann können wir die grundlegenden Eigenschaften des Diagramms festlegen, wie Titel, Legende, Achse usw. Beispielsweise können wir den Titel des Diagramms auf „Statistik der Tierzahlen“ und die Achsennamen auf „Tiere“ und „Anzahl“ festlegen und dem Diagramm eine Legende hinzufügen, um den Namen jedes Tieres anzuzeigen. Das Codebeispiel lautet wie folgt:

rrreee

Zuletzt müssen wir die spezifischen Daten des Piktogramms hinzufügen. In ECharts können wir das Attribut series verwenden, um die Diagrammdaten festzulegen. Wir müssen type: 'pictorialBar' verwenden, um den Diagrammtyp als bildliches Balkendiagramm anzugeben, und das zu verwendende Symbol über das Attribut symbol angeben. Hier können wir die von ECharts bereitgestellten Standardsymbole oder benutzerdefinierte Symbole verwenden. Das Codebeispiel lautet wie folgt:

rrreee

Nach Abschluss der obigen Schritte haben wir erfolgreich ein ECharts-Diagramm erstellt, das ein Piktogramm zur Anzeige von Daten verwendet.

1. Zusammenfassend lauten die Schritte zur Verwendung von Piktogrammen zur Anzeige von Daten in ECharts wie folgt:
2. Stellen Sie die Bibliotheksdateien von ECharts vor.
3. Bereiten Sie die anzuzeigenden Daten vor.
4. Erstellen Sie eine Diagramminstanz und legen Sie deren Grundkonfiguration fest.

Fügen Sie spezifische Daten für das Piktogramm hinzu.

🎜🎜Ich hoffe, dass dieser Artikel den Lesern helfen kann, zu verstehen, wie Piktogramme zur Anzeige von Daten in ECharts verwendet werden, und sie anhand von Codebeispielen intuitiver zu verstehen. Durch die Verwendung von ECharts zum Erstellen von Piktogrammen können die Daten interessanter und visueller gestaltet und der Datenanzeigeeffekt verbessert werden. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ein Piktogramm-Balkendiagramm zur Anzeige von Daten in ECharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!