html数据统计echarts柱状图(flask动态获取数据)
时间: 2023-10-17 14:05:39 浏览: 53
要实现html数据统计echarts柱状图(flask动态获取数据),需要以下步骤:
1. 在html页面中引入echarts库,并创建一个div标签,用于展示柱状图。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据统计</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>
```
2. 在flask中定义一个路由,用于返回数据给前端页面。这里假设数据来源为数据库。
```python
from flask import Flask, jsonify
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://username:password@localhost:3306/db_name'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)
class Data(db.Model):
id = db.Column(db.Integer, primary_key=True)
name = db.Column(db.String(20), unique=True, nullable=False)
value = db.Column(db.Integer, nullable=False)
@app.route('/data')
def get_data():
data_list = Data.query.all()
name_list = [d.name for d in data_list]
value_list = [d.value for d in data_list]
return jsonify({'name_list': name_list, 'value_list': value_list})
```
3. 在前端页面中使用ajax技术,向flask路由发送请求,获取数据并渲染echarts柱状图。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数据统计</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
// 使用ajax获取数据
$.ajax({
url: '/data',
type: 'GET',
success: function(data) {
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '数据统计'
},
tooltip: {},
xAxis: {
data: data.name_list
},
yAxis: {},
series: [{
name: '数量',
type: 'bar',
data: data.value_list
}]
};
myChart.setOption(option);
}
});
</script>
</body>
</html>
```
以上就是实现html数据统计echarts柱状图(flask动态获取数据)的步骤。