利用ECharts和Python接口生成水平柱状图的方法-Python教程-PHP中文网

利用ECharts和Python接口生成水平柱状图的方法

WBOY

发布： 2023-12-18 18:48:56

原创

1368人浏览过

利用echarts和python接口生成水平柱状图的方法

利用ECharts和Python接口生成水平柱状图的方法

ECharts是一个基于JavaScript开发的可视化图表库，可以方便地创建各种数据可视化图表。结合Python接口，可以更方便地进行数据处理，并将其可视化。

本文将介绍利用ECharts和Python接口生成水平柱状图的方法，并提供具体代码示例。

准备数据

首先，我们需要准备数据。这里我们以某班级学生的成绩为例。假设我们有以下数据：

立即学习“Python免费学习笔记（深入）”；

360 AI助手

360公司推出的AI聊天机器人聚合平台，集合了国内15家顶尖的AI大模型。

140

查看详情

姓名	语文	数学	英语
张三	90	80	75
李四	75	95	85
王五	80	90	70
赵六	85	75	90

我们可以使用Python中的Pandas库来读取数据，并进行处理。具体代码如下：

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)

登录后复制

使用ECharts绘制水平柱状图

接下来，我们使用ECharts来绘制水平柱状图。具体代码如下：

<!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>

登录后复制

运行代码，我们就能看到一个漂亮的水平柱状图了。