数据可视化图表展示

基于 Python Matplotlib 教材第 2 章的 10 个经典实例,使用 ECharts 进行网页端复现与交互呈现

折线图 · 柱形图 · 条形图 · 面积图 · 直方图 · 饼图 · 散点图 · 箱形图 · 雷达图 · 误差棒图

项目介绍

本项目以《Python 数据可视化》课程第 2 章"Matplotlib 数据可视化基础"为蓝本,选取教材中的 10 个典型实例,将原本在 Jupyter Notebook 中使用 Matplotlib 绘制的静态图表,全部迁移至浏览器端, 使用 ECharts 可视化库重新实现。

相比静态图片,网页版图表支持鼠标悬停查看数据、图例筛选、局部缩放、图片导出等交互功能, 数据与原始笔记本完全一致,直观展示了从折线图、柱形图、条形图、堆积面积图、直方图、饼图、 散点图/气泡图、箱形图、雷达图到带误差棒柱形图等多种基础图表的绘制方法与应用场景。

本页面为单文件静态网页(index.html),无需服务器与数据库支持,可直接部署至任意静态网站空间。

ECharts 5HTML5 / CSS3响应式布局纯静态部署

实例 1|未来 15 天最高气温和最低气温

2.1 绘制折线图 · plot()

使用折线图展示未来 15 天的最高气温与最低气温变化趋势,两条折线对比直观反映昼夜温差。

实例 2|2013—2019 财年阿里巴巴淘宝和天猫平台 GMV

2.2 绘制柱形图 · bar()

柱形图展示阿里平台 GMV(成交总额,亿元)逐年高速增长的情况。

实例 3|各商品种类的网购替代率

2.3 绘制条形图 · barh()

水平条形图展示 18 类商品的网购替代率,长条越长表示线上消费对线下的替代程度越高。

实例 4|物流公司物流费用统计

2.4 绘制堆积面积图 · stackplot()

堆积面积图统计 A、B、C 三家物流公司 1—12 月的运输费用(万元),并展示总费用走势。

实例 5|人脸识别的灰度直方图

2.5 绘制直方图 · hist()

对 10000 个灰度采样值(正态分布随机数)绘制包含 25 个矩形条的直方图,反映灰度分布规律。

实例 6|支付宝月账单报告

2.6 绘制饼图 · pie()

饼图展示月度消费结构:购物、餐饮美食、人情往来等 8 类支出占比,外凸强调各类别。

实例 7|汽车速度与制动距离的关系

2.7 绘制散点图/气泡图 · scatter()

散点图呈现车速 10~200 km/h 与制动距离的关系,速度越快、制动距离越长,近似二次曲线。

实例 8|2017 年和 2018 年全国发电量统计

2.8 绘制箱形图 · boxplot()

箱形图对比两年 12 个月的全国发电量(亿千瓦时)分布,展示中位数、四分位数与离群点。

实例 9|霍兰德职业兴趣测试

2.9 绘制雷达图 · polar()

雷达图展示 6 位测试者在研究型、艺术型、社会型、企业型、传统型、现实型六个维度的得分。

实例 10|4 个树种不同季节的细根生物量

2.10 绘制带误差棒的柱形图 · bar()+errorbar()

分组柱形图对比 4 个树种在春、夏、秋三季的细根生物量(t/hm²),误差棒表示测量偏差。