Python爬虫+ECharts：手把手教你搭建实时数据大屏

站大爷IP
29 阅读7分钟

​ 免费编程软件「python+pycharm」 链接：pan.quark.cn/s/48a86be2f…

一、为什么需要实时数据大屏？

想象这样一个场景：某电商公司运营总监早上走进办公室，打开电脑就能看到实时更新的销售数据、用户访问量、热门商品排行等关键指标。这些数据不是静态报表，而是会随着时间自动更新的动态可视化大屏。这种直观的数据展示方式，能让决策者快速捕捉业务变化，及时调整运营策略。

传统报表需要人工定期导出数据、制作图表，而实时数据大屏通过爬虫自动采集数据，配合ECharts的动态渲染能力，可以实现数据的全自动更新。这种技术组合特别适合需要持续监控的场景，比如股票行情、物流跟踪、舆情监测等。

二、技术选型与工具准备

1. 核心组件

  • Python爬虫：负责从目标网站获取原始数据
  • ECharts：百度开源的JavaScript可视化库，擅长交互式图表
  • Flask/Django：提供后端服务，搭建数据接口
  • WebSocket/AJAX：实现前端与后端的数据实时通信

2. 环境配置

# 创建虚拟环境（推荐）
python -m venv venv
source venv/bin/activate  # Linux/Mac
venv\Scripts\activate     # Windows

# 安装必要库
pip install requests beautifulsoup4 flask pyecharts websockets

转存失败，建议直接上传图片文件

3. 架构设计

客户端浏览器 → WebSocket/AJAX → Flask后端 → Python爬虫 → 目标网站
                ↑               ↓
           数据更新请求       原始数据返回

转存失败，建议直接上传图片文件

三、爬虫开发实战：以电商数据为例

1. 目标分析

假设我们要监控某电商平台的商品价格变化，首先需要：

  • 确定目标URL（如商品详情页）
  • 分析页面结构，找到价格、销量等关键元素的CSS选择器
  • 处理可能的反爬机制（如验证码、请求频率限制）

2. 基础爬虫代码

import requests
from bs4 import BeautifulSoup
import time
import random

def fetch_product_data(url):
    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36',
        'Referer': 'https://www.example.com/'
    }
    
    try:
        # 随机延迟避免被封
        time.sleep(random.uniform(1, 3))
        
        response = requests.get(url, headers=headers)
        response.raise_for_status()
        
        soup = BeautifulSoup(response.text, 'html.parser')
        
        # 假设价格在class="price"的span标签中
        price = soup.select_one('span.price').get_text(strip=True)
        
        # 假设销量在class="sales"的div标签中
        sales = soup.select_one('div.sales').get_text(strip=True)
        
        return {
            'price': float(price.replace('¥', '')),
            'sales': int(sales.replace('件', '')),
            'timestamp': int(time.time() * 1000)  # ECharts需要毫秒时间戳
        }
    except Exception as e:
        print(f"Error fetching {url}: {e}")
        return None

转存失败，建议直接上传图片文件

3. 反爬策略升级

  • 代理IP池：使用免费/付费代理服务

  • 请求头轮换：随机更换User-Agent、Referer等

  • 模拟人类操作：添加随机点击、滚动行为（配合Selenium）

  • 数据存储：将爬取结果存入数据库或文件

    # 简单代理示例（实际建议使用付费代理服务）
proxies = [
    {'http': 'http://123.123.123.123:8080'},
    {'http': 'http://124.124.124.124:8080'}
]

def fetch_with_proxy(url):
    proxy = random.choice(proxies)
    try:
        return requests.get(url, proxies=proxy, timeout=10)
    except:
        return fetch_with_proxy(url)  # 失败重试

    转存失败，建议直接上传图片文件

四、ECharts可视化实现

1. 基础图表配置

以实时价格折线图为例：

from pyecharts.charts import Line
from pyecharts import options as opts

def create_price_chart(data_list):
    line = (
        Line()
        .add_xaxis([item['timestamp'] for item in data_list])
        .add_yaxis("价格", [item['price'] for item in data_list])
        .set_global_opts(
            title_opts=opts.TitleOpts(title="商品价格实时监控"),
            tooltip_opts=opts.TooltipOpts(trigger="axis"),
            xaxis_opts=opts.AxisOpts(type_="time"),  # 时间轴
            yaxis_opts=opts.AxisOpts(name="价格(元)"),
        )
    )
    return line

转存失败，建议直接上传图片文件

2. 动态更新机制

前端通过AJAX定期请求数据：

// 每5秒更新一次数据
setInterval(function() {
    fetch('/api/price')
        .then(response => response.json())
        .then(data => {
            // 更新ECharts实例
            myChart.setOption({
                xAxis: { data: data.timestamps },
                series: [{ data: data.prices }]
            });
        });
}, 5000);

转存失败，建议直接上传图片文件

3. 多图表组合大屏

from pyecharts.charts import Page

def create_dashboard(price_data, sales_data):
    page = Page(layout=Page.DraggablePageLayout)  # 可拖拽布局
    
    # 价格折线图
    price_chart = create_price_chart(price_data)
    page.add(price_chart)
    
    # 销量柱状图
    sales_chart = (
        Bar()
        .add_xaxis([item['timestamp'] for item in sales_data])
        .add_yaxis("销量", [item['sales'] for item in sales_data])
        .set_global_opts(title_opts=opts.TitleOpts(title="商品销量趋势"))
    )
    page.add(sales_chart)
    
    return page.render_embed()  # 返回HTML片段

转存失败，建议直接上传图片文件

五、完整系统集成

1. Flask后端实现

from flask import Flask, jsonify
import threading
import time

app = Flask(__name__)

# 模拟数据存储
price_history = []
sales_history = []

# 模拟爬虫持续运行
def background_crawler():
    while True:
        # 这里替换为实际爬虫调用
        new_data = fetch_product_data("https://example.com/product/123")
        if new_data:
            price_history.append(new_data)
            sales_history.append(new_data)  # 实际中销量可能不同源
            
            # 保持最近100条数据
            if len(price_history) > 100:
                price_history.pop(0)
                sales_history.pop(0)
        time.sleep(5)  # 每5秒爬取一次

# 启动后台爬虫线程
crawler_thread = threading.Thread(target=background_crawler)
crawler_thread.daemon = True
crawler_thread.start()

@app.route('/api/price')
def get_price_data():
    # 返回最近20个数据点
    recent_data = price_history[-20:] if len(price_history) >= 20 else price_history
    return jsonify({
        'timestamps': [item['timestamp'] for item in recent_data],
        'prices': [item['price'] for item in recent_data]
    })

@app.route('/')
def dashboard():
    # 这里应该调用create_dashboard()生成实际图表
    # 为简化示例，直接返回静态HTML
    return """
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>实时数据大屏</title>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
    </head>
    <body>
        <div id="price-chart" style="width: 800px;height:400px;"></div>
        <script>
            var chart = echarts.init(document.getElementById('price-chart'));
            var option = {
                title: { text: '商品价格监控' },
                tooltip: {},
                xAxis: { type: 'time' },
                yAxis: {},
                series: [{ name: '价格', type: 'line', data: [] }]
            };
            chart.setOption(option);
            
            // 模拟数据更新（实际应调用API）
            setInterval(function() {
                // 这里应该是fetch('/api/price')的调用
                // 为演示使用模拟数据
                var now = new Date();
                var newData = {
                    timestamp: now.getTime(),
                    price: 100 + Math.random() * 10
                };
                
                // 实际项目中需要处理历史数据
                chart.setOption({
                    series: [{
                        data: [newData].concat(chart.getOption().series[0].data.slice(0, 19))
                    }]
                });
            }, 5000);
        </script>
    </body>
    </html>
    """

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

转存失败，建议直接上传图片文件

2. 部署优化建议

  • 生产环境：使用Gunicorn+Nginx部署Flask应用
  • 数据持久化：将爬取数据存入MySQL/MongoDB
  • 异常处理：添加爬虫失败重试、数据校验机制
  • 性能优化：对高频更新图表使用增量渲染

六、常见问题Q&A

Q1：被网站封IP怎么办？
A：立即启用备用代理池，建议使用隧道代理（如站大爷IP代理），配合每请求更换IP策略。对于重要项目，可考虑购买企业级代理服务，这些服务通常提供更稳定的IP和更好的技术支持。

Q2：如何处理JavaScript渲染的页面？
A：对于动态加载的内容，可以使用Selenium或Playwright模拟浏览器行为。示例配置：

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

options = Options()
options.add_argument('--headless')  # 无头模式
options.add_argument('--disable-gpu')
driver = webdriver.Chrome(options=options)

driver.get("https://example.com")
price = driver.find_element_by_css_selector("span.price").text
driver.quit()

转存失败，建议直接上传图片文件

Q3：ECharts图表在移动端显示异常？
A：确保添加响应式配置，监听窗口大小变化：

window.addEventListener('resize', function() {
    myChart.resize();
});

转存失败，建议直接上传图片文件

Q4：如何实现更复杂的数据大屏布局？
A：可以使用以下方案：

  1. Grid布局：ECharts内置的grid配置可实现多图表对齐
  2. CSS框架：结合Bootstrap或Element UI的栅格系统
  3. 专业工具：考虑使用DataV、Grafana等专业大屏工具

Q5：爬虫数据与实际有延迟怎么办？
A：检查以下环节：

  1. 目标网站API是否有频率限制
  2. 代理IP的响应速度
  3. 服务器与目标网站的网络延迟
  4. 前端渲染是否成为瓶颈

七、进阶方向

  1. 机器学习集成：在数据大屏中加入异常检测、预测功能
  2. 3D可视化：使用ECharts GL实现地理空间数据展示
  3. 大屏交互：添加钻取、联动等高级交互功能
  4. 低代码平台：将爬虫配置与图表生成分离，实现可视化配置

通过Python爬虫与ECharts的组合，我们能够以较低成本构建功能强大的实时数据监控系统。关键在于理解业务需求，合理设计系统架构，并在实践中不断优化各个组件的性能与稳定性。

​

avatar
文章
阅读
粉丝