Guide pratique ECharts et Golang : réaliser différents types de graphiques statistiques

Guide pratique ECharts et Golang : Création de différents types de graphiques statistiques

Avec l'avènement de l'ère numérique, la valeur des données est devenue de plus en plus importante. Cependant, la valeur des données n’existe que dans leur analyse et leur utilisation. Pour mieux analyser les données, les graphiques sont l’un des outils essentiels. Dans cet article, nous présenterons comment utiliser ECharts et Golang, deux outils célèbres, pour créer différents types de graphiques statistiques.

Préparation

Tout d'abord, nous devons préparer les environnements ECharts et Golang.

ECharts est une bibliothèque de visualisation de données open source basée sur JavaScript avec une bonne interactivité et des effets dynamiques, prenant en charge plusieurs types de graphiques. Nous pouvons installer ECharts des deux manières suivantes :

1. Téléchargez directement le fichier echarts.js et introduisez-le en HTML
2. Utilisez npm pour installer

Ici, nous choisissons la première façon, après le téléchargement, dans le fichier HTML Il suffit de présenter :

<script src="/path/echarts.min.js"></script>

golang est un langage compilé à typage statique qui met l'accent sur la concurrence et l'efficacité et est largement utilisé dans le développement back-end. Nous devons installer l'environnement golang, qui peut être installé en téléchargeant le package d'installation correspondant sur le site officiel.

Créer un graphique à barres

Un graphique à barres est un type de graphique courant qui montre les différences de données. Ce qui suit décrit comment utiliser ECharts et Golang pour implémenter des histogrammes.

Tout d'abord, nous devons préparer les données requises. Par exemple, en golang :

data := []int{120, 200, 150, 80, 70, 110, 130}

Ensuite, nous devons définir une instance d'ECharts et définir les propriétés de base du graphique. Par exemple :

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

var option = {
  title: {
    text: '柱状图'
  },
  tooltip: {},
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E', 'F', 'G']
  },
  yAxis: {},
  series: [{
    name: '数据',
    type: 'bar',
    data: data
  }]
};

chart.setOption(option);

Dans le code, nous définissons une instance ECharts et spécifions l'identifiant du graphique, puis définissons les propriétés de base du graphique, y compris le titre, l'axe X/Y et la série de données. Enfin, nous définissons ces propriétés sur le graphique via la méthode setOption.

Créer un graphique linéaire

Un graphique linéaire est un type de graphique qui montre les tendances des données. Ce qui suit décrit comment utiliser ECharts et Golang pour implémenter un graphique linéaire.

Tout d'abord, nous devons préparer les données requises. Par exemple, en golang :

xData := []string{"2010", "2011", "2012", "2013", "2014", "2015", "2016"}
yData := []int{120, 200, 150, 80, 70, 110, 130}

Ensuite, nous devons définir une instance d'ECharts et définir les propriétés de base du graphique. Par exemple :

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

var option = {
  title: {
    text: '折线图'
  },
  tooltip: {},
  xAxis: {
    data: xData
  },
  yAxis: {},
  series: [{
    name: '数据',
    type: 'line',
    data: yData
  }]
};

chart.setOption(option);

Dans le code, nous définissons une instance ECharts et spécifions l'identifiant du graphique, puis définissons les propriétés de base du graphique, y compris le titre, l'axe X/Y et la série de données. La différence est que nous définissons ici le type de série de données sur ligne, qui est le type polyligne.

Créer un diagramme circulaire

Un diagramme circulaire est un type de graphique qui affiche la proportion de données. Ce qui suit décrit comment utiliser ECharts et Golang pour implémenter un diagramme circulaire.

Tout d'abord, nous devons préparer les données requises. Par exemple, en golang :

data := []struct {
  Value float64 `json:"value"`
  Name  string  `json:"name"`
}{
  {Value: 335, Name: "A"},
  {Value: 310, Name: "B"},
  {Value: 234, Name: "C"},
  {Value: 135, Name: "D"},
  {Value: 1548, Name: "E"}
}

Ensuite, nous devons définir une instance d'ECharts et définir les propriétés de base du graphique. Par exemple :

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

var option = {
  title: {
    text: '饼图'
  },
  tooltip: {},
  series: [{
    name: '数据',
    type: 'pie',
    radius: '50%',
    data: data,
    roseType: 'angle'
  }]
};

chart.setOption(option);

Dans le code, nous définissons une instance ECharts et spécifions l'identifiant du graphique, puis définissons les propriétés de base du graphique, y compris le titre et la série de données. La différence est qu'ici nous définissons le type de série de données sur pie, qui est le type de graphique à secteurs, et définissons d'autres propriétés du graphique à secteurs, telles que radius et roseType.

Pour résumer, nous avons présenté comment utiliser ECharts et Golang pour créer des graphiques à barres, des graphiques linéaires et des diagrammes circulaires, et avons fourni des exemples de code spécifiques. Bien sûr, ce n'est que la pointe de l'iceberg d'ECharts et de Golang. Les deux outils ont des scénarios d'utilisation et des fonctions très riches. Les lecteurs peuvent continuer à apprendre et à explorer en profondeur.

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!