2️⃣ Flask 零基础入门：完美融合 Echarts！5 分钟打造数据可视化大屏【效率翻倍】-CSDN博客

本文链接：https://blog.csdn.net/m0_51233963/article/details/147929456

文章目录

🎨 背景
🛠️ 环境准备
📝 整合代码
🎉 最终效果
💡 番外
📚 下期预告

🎨 背景

🌟 为什么选择Echarts？

强大的可视化能力 - 支持 30+ 种图表类型，满足各种数据展示需求
流畅的交互体验 - 内置缩放、拖拽、数据筛选等交互功能
跨平台兼容 - 完美适配 PC 和移动端，响应式设计
活跃的社区支持 - 丰富的示例和文档资源

Echarts 中文网 https://echarts.apache.org/examples/zh/

📌 本文是 Flask 系列教程的第二期，将带您实现数据可视化功能整合！

🛠️ 环境准备

1.优化项目结构

新建文件夹，来存放 Echarts 文件和网页文件。目录结构如下

FlaskDemo/
├── static/
│   └── js/
│       └── echarts.min.js  # Echarts核心库
├── templates/
│   └── index.html         # 可视化页面模板
└── main.py                # Flask主程序

2.快速获取 Echarts

进入 static -> js 文件夹，再通过 cmd 打开终端，输入下列代码下载 Echarts 图表库的压缩版 JavaScript 文件。

curl -o echarts.min.js https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js

💡 专业提示：使用 CDN 引入可以减小项目体积！

在这里插入图片描述

📝 整合代码

1.Flask 后端数据处理

添加路由，设置模拟数据，并将数据传给 index.html 里面的 Echarts 模型。

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def hello():
    return "Hello, World!"

@app.route('/index')
def index():
    # 模拟数据 - 实际项目中可以从数据库获取
    chart_data = {
        "title": "网站访问来源统计",
        "subtitle": "模拟数据",
        "legend": ['搜索引擎', '直接访问', '邮件营销', '联盟广告', '视频广告'],
        "series": [
            {"value": 1048, "name": "搜索引擎"},
            {"value": 735, "name": "直接访问"},
            {"value": 580, "name": "邮件营销"},
            {"value": 484, "name": "联盟广告"},
            {"value": 300, "name": "视频广告"}
        ]
    }
    return render_template('index.html', chart_data=chart_data)

if __name__ == '__main__':
    app.run(debug=True)

2.前端可视化实现

在 templates 里新建 index.html 文件，并复制下列代码，关键代码已添加注释。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Flask整合ECharts示例</title>
    <!-- 引入 ECharts 库 -->
    <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
    <style>
        #main {
            width: 1000px;
            height: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">网站访问来源统计</h1>
    <!-- 为 ECharts 准备一个具备大小的 DOM -->
    <div id="main"></div>
    
    <script type="text/javascript">
        // 初始化图表
        var myChart = echarts.init(document.getElementById('main'));
        
        // 配置项
        var option = {
            title: {
                text: '{{ chart_data.title }}',
                subtext: '{{ chart_data.subtitle }}',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: {{ chart_data.legend | tojson }}
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    // 主要在这里放入配置好的数据
                    data: {{ chart_data.series | tojson }},
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        
        // 使用配置项显示图表
        myChart.setOption(option);
        
        // 响应式调整大小
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>