Graphique multi-axes ECharts : comment afficher des données multidimensionnelles-js tutoriel-php.cn

Graphique multi-axes ECharts : comment afficher des données multidimensionnelles

WBOY

Libérer： 2023-12-18 18:39:54

original

2004 Les gens l'ont consulté

Graphique multi-axes ECharts : comment afficher des données multidimensionnelles

Graphique multi-axes ECharts : Comment afficher des données multidimensionnelles, des exemples de code spécifiques sont nécessaires

Introduction :
Avec l'avènement de l'ère du Big Data, nous devons mieux afficher les données multidimensionnelles complexes. En tant que puissante bibliothèque de visualisation, ECharts fournit une variété de types de graphiques, parmi lesquels les graphiques multi-axes sont l'un des outils importants pour afficher des données multidimensionnelles. Cet article présentera ce qu'est un graphique multi-axes et comment utiliser ECharts pour afficher des données multidimensionnelles, et fournira des exemples de code correspondants.

1. Qu'est-ce qu'un graphique multi-axes ? Un graphique multi-axes est un graphique qui peut afficher plusieurs séries de données avec différentes unités et magnitudes de données sur le même graphique. En utilisant plusieurs axes, un pour chaque série de données, nous pouvons comparer de manière plus intuitive les données sur différentes dimensions.

2. Éléments de configuration du graphique multi-axes ECharts

Pour créer un graphique multi-axes, nous devons définir plusieurs propriétés dans l'objet option d'ECharts. Voici les principaux éléments de configuration qui doivent être définis :

Attribut legend : utilisé pour configurer la légende, c'est-à-dire l'identification des couleurs dans le graphique, utilisé pour distinguer différentes séries de données.
Propriétés xAxis et yAxis : utilisées pour configurer plusieurs axes. xAxis configure l'axe x et yAxis configure l'axe y. Plusieurs axes peuvent être configurés sous forme de tableau.
Attribut series : utilisé pour configurer les séries de données. Chaque série de données correspond à un axe et peut avoir différents types de données et méthodes de présentation graphique.

3. Exemple de code

Ci-dessous, nous utilisons un exemple de code spécifique pour montrer comment utiliser ECharts pour créer un graphique multi-axes afin d'afficher des données multidimensionnelles. Commençons par un exemple de merchandising.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multi-axis Chart Example</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px; height: 400px;"></div>
</body>
</html>

Copier après la connexion

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

var option = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['电视销量', '冰箱销量', '洗衣机销量']
    },
    xAxis: [
        {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月']
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '销量'
        },
        {
            type: 'value',
            name: '销售额'
        }
    ],
    series: [
        {
            name: '电视销量',
            type: 'bar',
            data: [120, 200, 150, 80, 70]
        },
        {
            name: '冰箱销量',
            type: 'bar',
            data: [80, 100, 120, 150, 110]
        },
        {
            name: '洗衣机销量',
            type: 'line',
            yAxisIndex: 1,
            data: [1000, 1500, 2000, 1800, 1600]
        }
    ]
};

chart.setOption(option);

Copier après la connexion

Dans le code ci-dessus, nous avons mis en place trois séries de données : ventes de téléviseurs, ventes de réfrigérateurs et vente de machines à laver. Parmi eux, les ventes de téléviseurs et de réfrigérateurs sont affichées à l'aide de graphiques à barres, et les ventes de machines à laver sont affichées à l'aide de graphiques linéaires. Le volume des ventes et les ventes sont affichés à l'aide de différents axes Y.

4. Résumé

ECharts fournit la fonction de graphiques multi-axes, qui peuvent facilement afficher des données multidimensionnelles. En définissant les éléments de configuration appropriés, nous pouvons créer des graphiques multi-axes magnifiques et intuitifs. Grâce à l'exemple de code présenté dans cet article, vous pouvez rapidement commencer à utiliser ECharts pour dessiner des graphiques multi-axes et les appliquer à vos propres projets.

Lien de référence :

[Document officiel ECharts](https://echarts.apache.org/zh/index.html)

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!