recherche

Maison >développement back-end >Tutoriel Python >Méthode pour générer un histogramme horizontal à l'aide de l'interface ECharts et Python

Méthode pour générer un histogramme horizontal à l'aide de l'interface ECharts et Python

WBOY
WBOYoriginal
2023-12-18 18:48:561071parcourir

Méthode pour générer un histogramme horizontal à laide de linterface ECharts et Python

Comment générer des graphiques à barres horizontales à l'aide des interfaces ECharts et Python

ECharts est une bibliothèque de graphiques visuels développée sur la base de JavaScript, qui peut facilement créer divers graphiques de visualisation de données. En combinaison avec l'interface Python, le traitement et la visualisation des données peuvent être effectués plus facilement.

Cet article présentera la méthode de génération d'histogramme horizontal à l'aide de l'interface ECharts et Python, et fournira des exemples de code spécifiques.

  1. Préparer les données

Tout d'abord, nous devons préparer les données. Ici, nous prenons comme exemple les scores des élèves d’une certaine classe. Supposons que nous ayons les données suivantes :

John Doe王五8085Nous pouvons utiliser la bibliothèque Pandas en Python pour lire le données et les traiter. Le code spécifique est le suivant : 
import pandas as pd

# 读取数据
df = pd.read_csv('成绩表.csv')

# 将姓名作为索引
df.set_index('姓名', inplace=True)

# 取出各科成绩
chinese = df['语文']
math = df['数学']
english = df['英语']

# 计算平均成绩
average = df.mean(axis=1)
Ensuite, nous utilisons ECharts pour dessiner un histogramme horizontal. Le code spécifique est le suivant : Exécutez le code et nous verrons un magnifique graphique à barres horizontales. RésuméCet article présente la méthode de génération d'histogrammes horizontaux à l'aide des interfaces ECharts et Python, et fournit des exemples de code spécifiques. Grâce à cette méthode, nous pouvons facilement traiter et visualiser les données, les rendant plus intuitives et faciles à comprendre.
75 95 85
90 70 Zhao Liu
75 90
Utilisez ECharts pour dessiner un histogramme horizontal 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>水平柱状图示例</title>
    <script src="https://cdn.staticfile.org/echarts/5.0.2/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="height: 500px;"></div>
    <script>
        // 初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'))

        // 配置项
        var option = {
            title: {
                text: '某班级成绩'
            },
            tooltip: {},
            legend: {
                data:['语文', '数学', '英语', '平均分']
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    show: false
                }
            },
            yAxis: {
                type: 'category',
                data: ['张三', '李四', '王五', '赵六']
            },
            series: [
                {
                    name: '语文',
                    type: 'bar',
                    stack: '总成绩',
                    label: {
                        show: true,
                        position: 'right'
                    },
                    data: chinese
                },
                {
                    name: '数学',
                    type: 'bar',
                    stack: '总成绩',
                    label: {
                        show: true,
                        position: 'right'
                    },
                    data: math
                },
                {
                    name: '英语',
                    type: 'bar',
                    stack: '总成绩',
                    label: {
                        show: true,
                        position: 'right'
                    },
                    data: english
                },
                {
                    name: '平均分',
                    type: 'bar',
                    stack: '总成绩',
                    label: {
                        show: true,
                        position: 'right'
                    },
                    data: average
                }
            ]
        };

        myChart.setOption(option)
    </script>
</body>
</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!

Python JavaScript echarts pandas 接口
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Étapes pour dessiner un graphique en roses à l'aide de l'interface ECharts et PythonArticle suivant：Étapes pour dessiner un graphique en roses à l'aide de l'interface ECharts et Python

Articles Liés

Voir plus