实现方案
通过前端网元的定时刷新，实现前后台数据的实时同步。
后端python代码
使用flask框架，需提前进行安装。
from flask import Flask, render_template, jsonify
import random
import pandas as pd
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/data', methods=['GET'])
def get_data():
# PABCD动态报表.csv中的数据动态变化
# data = [{'x': i, 'y': random.randint(1, 100)} for i in range(10)]
df = pd.read_csv(r'PABCD动态报表.csv', encoding='GBK')
df['日期'] = pd.to_datetime(df['日期'])
df2 = df[['日期', '语音网络接通率(集中式)(%)', 'SBC初始注册成功率(集中式)(%)']]
df2 = df2.groupby('日期').mean()
df2 = df2.reset_index()
df2['日期'] = df2['日期'].apply(lambda x: x.strftime('%Y-%m-%d'))
xlist = df2['日期'].tolist()
ylist1 = df2['语音网络接通率(集中式)(%)'].tolist()
ylist2 = df2['SBC初始注册成功率(集中式)(%)'].tolist()
ylabellist = ['语音网络接通率', 'SBC初始注册成功率(集中式)(%)']
ylabel1 = "\'语音网络接通率\'"
ylabel2 = "\'SBC初始注册成功率(集中式)(%)\'"
return render_template('intex2.html', xlist=str(xlist), ylist1=str(ylist1), ylabel1=ylabel1, ylist2=str(ylist2),
ylabel2=ylabel2, ylabellist=str(ylabellist))
if __name__ == '__main__':
app.run(debug=True)
前端HTML
使用echarts.min.js实现动态折线图绘制。下载echarts.min.js插件（下载地址https://echarts.apache.org/zh/download.html），放入static/js目录下。
目录结构
前端代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts 多图表示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f0f0f0;
}
.chart-container {
width: 80%;
height: 400px;
margin-bottom: 20px;
overflow: hidden;
}
</style>
<!-- 引入 ECharts 文件 -->
<script src="./static/js/echarts.min.js"></script>
</head>
<body>
<div class="chart-container" id="bar-chart"></div>
<div class="chart-container" id="line-chart"></div>
<div class="chart-container" id="pie-chart"></div>
<script>
// 初始化第一个图表（柱状图）
var myBarChart = echarts.init(document.getElementById('bar-chart'));
var optionBar = {
title: {
text: '路由器1流量',
left: 'center'
},
tooltip: {},
xAxis: {
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
yAxis: {},
series: [{
name: '流量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20, 30]
}]
};
myBarChart.setOption(optionBar);
// 初始化第二个图表（双折线图）
var myLineChart = echarts.init(document.getElementById('line-chart'));
var optionLine = {
title: {
text: '路由器2流量',
left: 'center'
},
tooltip: {},
xAxis: {
data: {{ xlist|safe }}
},
yAxis: {},
legend: {
data: {{ ylabellist|safe }},
left: 'right',
orient: 'vertical'
},
series: [
{
name: {{ ylabel1|safe }},
type: 'line',
data: {{ ylist1|safe }}
},
{
name: {{ ylabel2|safe }},
type: 'line',
data: {{ ylist2|safe }}
}
]
};
myLineChart.setOption(optionLine);
// 初始化第三个图表（饼图）
var myPieChart = echarts.init(document.getElementById('pie-chart'));
var optionPie = {
title: {
text: '路由器分布',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'right',
data: ['路由器1', '路由器2', '路由器3', '路由器4']
},
series: [
{
name: '路由器分布',
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: [
{value: 335, name: '路由器1'},
{value: 310, name: '路由器2'},
{value: 234, name: '路由器3'},
{value: 135, name: '路由器4'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myPieChart.setOption(optionPie);
setInterval(function() {
location.reload(); // 刷新当前页面
}, 10000); // 10000 毫秒 = 10 秒
</script>
</body>
</html>效果图：
