echarts如何通过flask读取到的数据库中的数据表绘画多个指标的折线图放在指定的div中
时间: 2024-05-02 20:20:15 浏览: 151
以下是一个示例代码,可以通过Flask读取数据库中的数据表,并使用ECharts绘制多个指标的折线图,并将图表放置在指定的div中:
```python
from flask import Flask, render_template, jsonify
import pymysql
import json
app = Flask(__name__)
# 连接数据库
db = pymysql.connect(host='localhost', user='root', password='password', database='mydb', charset='utf8')
# 从数据库中获取数据
@app.route('/data')
def get_data():
cursor = db.cursor()
cursor.execute("SELECT * FROM data_table")
data = cursor.fetchall()
return jsonify(data)
# 渲染页面并绘制图表
@app.route('/')
def index():
return render_template('index.html')
# 在index.html页面中使用ECharts绘制图表
@app.route('/charts')
def charts():
return render_template('charts.html')
if __name__ == '__main__':
app.run(debug=True)
```
在index.html页面中,使用jQuery从Flask服务器获取数据,并将其传递给charts.html页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$.getJSON('/data', function(data) {
sessionStorage.setItem('data', JSON.stringify(data));
window.location.href = '/charts';
});
});
</script>
</head>
<body>
<h1>Index</h1>
</body>
</html>
```
在charts.html页面中,使用ECharts绘制图表,并将其放置在指定的div中:
```html
<!DOCTYPE html>
<html>
<head>
<title>Charts</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
</head>
<body>
<h1>Charts</h1>
<div id="chart"></div>
<script>
var data = JSON.parse(sessionStorage.getItem('data'));
var chart = echarts.init(document.getElementById('chart'));
var option = {
title: {
text: 'Multi-line Chart'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Indicator1', 'Indicator2', 'Indicator3']
},
xAxis: {
type: 'category',
data: data.map(function(item) {
return item[0];
})
},
yAxis: {
type: 'value'
},
series: [{
name: 'Indicator1',
type: 'line',
data: data.map(function(item) {
return item[1];
})
}, {
name: 'Indicator2',
type: 'line',
data: data.map(function(item) {
return item[2];
})
}, {
name: 'Indicator3',
type: 'line',
data: data.map(function(item) {
return item[3];
})
}]
};
chart.setOption(option);
</script>
</body>
</html>
```
在这个示例中,我们从数据库中获取数据,并将其传递给charts.html页面。在charts.html页面中,我们使用ECharts绘制图表,并将其放置在指定的div中。在这个示例中,我们绘制了三个指标的折线图,但您可以根据自己的需求添加或删除指标。
阅读全文