Comment combiner ECharts et l'interface PHP pour réaliser un affichage graphique statistique de données multidimensionnelles-tutoriel php-php.cn

Comment combiner ECharts et l'interface PHP pour réaliser un affichage graphique statistique de données multidimensionnelles

WBOY

Libérer： 2023-12-18 11:06:02

original

957 Les gens l'ont consulté

Comment combiner ECharts et linterface PHP pour réaliser un affichage graphique statistique de données multidimensionnelles

Comment combiner ECharts et l'interface PHP pour réaliser un affichage de graphiques statistiques de données multidimensionnelles

Résumé : ECharts est une bibliothèque de graphiques de visualisation de données open source par Baidu, qui peut prendre en charge plusieurs types de graphiques et opérations interactives. En combinant les interfaces ECharts et PHP, vous pouvez facilement réaliser un affichage graphique statistique de données multidimensionnelles. Cet article expliquera comment utiliser ECharts pour dessiner différents types de graphiques et utiliser l'interface php pour transmettre des données au front-end.

Mots clés : ECharts, interface php, données multidimensionnelles, affichage de graphiques statistiques

1 Introduction de fond

Dans la visualisation de données, l'affichage de graphiques statistiques est un moyen courant et important. ECharts fournit une multitude de types de graphiques et d'opérations interactives pour répondre à une variété de besoins d'affichage de données. Grâce à l'interface php, nous pouvons facilement transférer les données back-end vers le front-end pour obtenir un affichage dynamique des graphiques.

2. Utilisation de base d'ECharts

Présentez la bibliothèque ECharts

Introduisez le fichier de bibliothèque ECharts dans la page html et créez un conteneur div pour héberger le graphique.

<!DOCTYPE html>
<html>
<head>
  <script src="echarts.min.js"></script>
</head>
<body>
  <div id="chart"></div>
</body>
</html>

Copier après la connexion

Créer une instance de graphique

En JavaScript, créez une instance de graphique et spécifiez le conteneur et le type de graphique.

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

Copier après la connexion

Configurer les paramètres du graphique

Définissez le style et les données du graphique en configurant les paramètres du graphique.

var option = {
  title: {
    text: '图表标题'
  },
  xAxis: {
    data: ['类别1', '类别2', '类别3']
  },
  yAxis: {},
  series: [
    {
      name: '系列1',
      type: 'bar',
      data: [10, 20, 30]
    },
    {
      name: '系列2',
      type: 'bar',
      data: [15, 25, 35]
    }
  ]
};

Copier après la connexion

Render chart

Appliquez les paramètres de configuration au graphique en appelant la méthode chart.setOption.

chart.setOption(option);

Copier après la connexion

3. Combiné avec l'interface php pour transférer des données

Traitement des données back-end

Dans l'interface php, obtenez des données de la base de données ou d'autres sources de données en fonction des besoins de l'entreprise et traitez les données.

$data = array(
  'categories' => ['类别1', '类别2', '类别3'],
  'series' => array(
    array(
      'name' => '系列1',
      'data' => [10, 20, 30]
    ),
    array(
      'name' => '系列2',
      'data' => [15, 25, 35]
    )
  )
);

echo json_encode($data);  // 将数据转为 json 格式输出

Copier après la connexion

Demande de données frontales

Utilisez l'objet XMLHttpRequest en JavaScript pour envoyer une demande de données à l'interface php et analyser les données renvoyées.

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var data = JSON.parse(xhr.responseText);
    var option = {
      title: {
        text: '图表标题'
      },
      xAxis: {
        data: data.categories
      },
      yAxis: {},
      series: data.series
    };

    chart.setOption(option);
  }
};

xhr.open('GET', 'data.php', true);
xhr.send();

Copier après la connexion

Quatre. Implémentation de différents types de graphiques

Graphique à barres

var option = {
  title: {
    text: '条形图'
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['类别1', '类别2', '类别3']
  },
  series: [
    {
      name: '系列1',
      type: 'bar',
      data: [10, 20, 30]
    }
  ]
};

Copier après la connexion

Camembert

var option = {
  title: {
    text: '饼图'
  },
  series: [
    {
      name: '系列1',
      type: 'pie',
      radius: '55%',
      data: [
        {value: 10, name: '类别1'},
        {value: 20, name: '类别2'},
        {value: 30, name: '类别3'}
      ]
    }
  ]
};

Copier après la connexion

Graphique linéaire

var option = {
  title: {
    text: '折线图'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['类别1', '类别2', '类别3']
  },
  yAxis: {},
  series: [
    {
      name: '系列1',
      type: 'line',
      data: [10, 20, 30]
    }
  ]
};

Copier après la connexion

V Résumé

En combinant ECharts et les interfaces php, nous pouvons facilement réaliser affichage de graphiques statistiques de données multidimensionnelles. Grâce aux riches types de graphiques et aux opérations interactives d'ECharts, ainsi qu'au traitement et à la transmission des données de l'interface PHP, nous pouvons répondre à l'affichage des données des différents besoins commerciaux. J'espère que cet article sera utile pour implémenter l'affichage de graphiques statistiques à l'aide d'ECharts et de php.

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!