MySQL → Flask → Vue → ECharts 开发教程

一、最终项目结构（强烈推荐）

bigscreen/ ├── backend/ # Flask 后端 │ ├── app/ │ │ ├── __init__.py │ │ ├── models.py │ │ ├── routes.py │ │ └── extensions.py │ ├── config.py │ ├── run.py │ └── requirements.txt │ ├── frontend/ # Vue 3 前端 │ ├── src/ │ │ ├── api/ │ │ │ └── index.js │ │ ├── components/ │ │ │ └── ChartPanel.vue │ │ ├── views/ │ │ │ └── Home.vue │ │ ├── App.vue │ │ └── main.js │ ├── package.json │ └── vite.config.js │ └── README.md

二、后端：Flask（生产级结构）

1️⃣ 安装依赖

cd backend python -m venv .venv .venv\Scripts\activate pip install flask flask_sqlalchemy flask_cors pymysql

requirements.txt

flask flask_sqlalchemy flask_cors pymysql

2️⃣ 配置（config.py）

class Config: SQLALCHEMY_DATABASE_URI = ( "mysql+pymysql://root:你的密码@localhost/bigscreen?charset=utf8mb4" ) SQLALCHEMY_TRACK_MODIFICATIONS = False SECRET_KEY = "dev-secret"

3️⃣ 扩展（app/extensions.py）

from flask_sqlalchemy import SQLAlchemy from flask_cors import CORS db = SQLAlchemy() cors = CORS()

4️⃣ 数据模型（app/models.py）

from .extensions import db class Sales(db.Model): __tablename__ = "sales" id = db.Column(db.Integer, primary_key=True) category = db.Column(db.String(50)) amount = db.Column(db.Numeric(10,2)) date = db.Column(db.Date)

5️⃣ 路由（app/routes.py）

from flask import Blueprint, jsonify from .extensions import db from .models import Sales bp = Blueprint("api", __name__, url_prefix="/api") @bp.route("/sales") def sales(): data = Sales.query.all() return jsonify([ { "category": s.category, "amount": float(s.amount), "date": s.date.strftime("%Y-%m-%d") } for s in data ]) @bp.route("/sales/summary") def summary(): sql = """ SELECT category, SUM(amount) AS total FROM sales GROUP BY category """ result = db.session.execute(sql).fetchall() return jsonify([ {"name": r[0], "value": float(r[1])} for r in result ])

6️⃣ 应用工厂（app/init.py）

from flask import Flask from .extensions import db, cors from .routes import bp def create_app(): app = Flask(__name__) app.config.from_object("config.Config") db.init_app(app) cors.init_app(app) app.register_blueprint(bp) return app

7️⃣ 启动入口（run.py）

from app import create_app app = create_app() if __name__ == "__main__": app.run(host="0.0.0.0", port=5000, debug=True)

启动：

python run.py

✅ 接口：

• http://localhost:5000/api/sales

• http://localhost:5000/api/sales/summary

三、前端：Vue 3 + ECharts（完整脚手架）

1️⃣ 创建项目

npm create vite@latest frontend -- --template vue cd frontend npm install npm install echarts

2️⃣ 统一 API（src/api/index.js）

import axios from 'axios' const service = axios.create({ baseURL: 'http://localhost:5000', timeout: 10000 }) export const getSales = () => service.get('/api/sales') export const getSalesSummary = () => service.get('/api/sales/summary')

3️⃣ 通用图表组件（src/components/ChartPanel.vue）

<template> <div ref="chartRef" class="chart"></div> </template> <script setup> import { ref, onMounted, onBeforeUnmount, watch } from 'vue' import * as echarts from 'echarts' const props = defineProps({ option: Object }) const chartRef = ref(null) let chart = null const initChart = () => { chart = echarts.init(chartRef.value) chart.setOption(props.option) } watch(() => props.option, (opt) => { chart?.setOption(opt) }) onMounted(() => { initChart() const ro = new ResizeObserver(() => chart?.resize()) ro.observe(chartRef.value) onBeforeUnmount(() => { ro.disconnect() chart?.dispose() }) }) </script> <style scoped> .chart { width: 100%; height: 100%; } </style>

✅这个组件 = 所有大屏图表的基础

4️⃣ 首页（src/views/Home.vue）

<template> <div class="screen"> <ChartPanel :option="pieOption" /> <ChartPanel :option="barOption" /> <ChartPanel :option="lineOption" /> </div> </template> <script setup> import { ref, onMounted } from 'vue' import { getSales, getSalesSummary } from '../api' import ChartPanel from '../components/ChartPanel.vue' const pieOption = ref({}) const barOption = ref({}) const lineOption = ref({}) onMounted(async () => { const summary = await getSalesSummary() pieOption.value = { title: { text: '销售占比', left: 'center', textStyle: { fontSize: '1.5vh' } }, tooltip: { trigger: 'item' }, legend: { bottom: '2%' }, series: [{ type: 'pie', radius: ['45%', '70%'], center: ['50%', '55%'], data: summary.data }] } const sales = await getSales() barOption.value = { title: { text: '销售趋势', left: 'center', textStyle: { fontSize: '1.5vh' } }, tooltip: {}, xAxis: { type: 'category', data: [...new Set(sales.data.map(i => i.date))] }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: sales.data.map(i => i.amount) }] } }) </script> <style scoped> .screen { width: 100vw; height: 100vh; display: flex; } </style>

5️⃣ 入口（src/main.js）

import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app')

6️⃣ App.vue

<template> <Home /> </template> <script setup> import Home from './views/Home.vue' </script>

四、启动顺序（非常重要）

# 1️⃣ 启动后端 cd backend .venv\Scripts\activate python run.py # 2️⃣ 启动前端 cd frontend npm run dev

访问：http://localhost:5173