Flask+Vue+ElementUI数据可视化开发框架
warning:
这篇文章距离上次修改已过262天，其中的内容可能已经有所变动。
以下是一个简单的Flask后端和Vue前端的代码示例，展示了如何使用Flask和Vue结合ElementUI来创建一个简单的数据可视化应用。
后端 (Flask):
from flask import Flask, jsonify
import numpy as np
import pandas as pd
app = Flask(__name__)
# 假设有一个Pandas DataFrame
df = pd.DataFrame({
'date': pd.date_range(start='1/1/2020', periods=10),
'value': np.random.randn(10)
})
@app.route('/data')
def data():
# 将DataFrame转换为JSON
return jsonify(df.to_dict(orient='records'))
if __name__ == '__main__':
app.run(debug=True)前端 (Vue + ElementUI):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flask + Vue + ElementUI Data Visualization</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/echarts/dist/echarts.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-row>
<el-col :span="24">
<el-card>
<div slot="header">
<span>Line Chart</span>
</div>
<div>
<el-row>
<el-col :span="24">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="Date"></el-table-column>
<el-table-column prop="value" label="Value"></el-table-column>
</el-table>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div ref="lineChart" style="width: 100%; height: 400px;"></div>
</el-col>
</el-row>
</div>
</el-card>
</el-col>
</el-row>
</div>
<script>
new Vu
评论已关闭