echart导入数据 flask - CSDN文库

在Flask中使用ECharts导入数据的一种常见方法是通过Flask的路由来获取数据，并将其传递给前端页面渲染ECharts图表。首先，你需要在Flask应用中设置一个路由来处理数据请求。你可以使用`@app.route`装饰器来定义路由。以下是一个示例： ```python from flask import Flask, jsonify, render_template app = Flask(__name__) @app.route('/data') def get_data(): # 在这里获取数据并返回 data = [ {'name': 'A', 'value': 10}, {'name': 'B', 'value': 20}, {'name': 'C', 'value': 30}, ] return jsonify(data) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run() ``` 在上面的例子中，我们定义了两个路由。`/data`路由用于获取数据，`/`路由用于渲染包含ECharts图表的页面。然后，你需要创建一个前端页面来渲染ECharts图表。在这个例子中，我们使用了Jinja2模板引擎来渲染页面。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <title>ECharts Example</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> var chart = echarts.init(document.getElementById('chart')); // 发送GET请求获取数据 fetch('/data') .then(response => response.json()) .then(data => { // 使用数据渲染图表 var option = { xAxis: { type: 'category', data: data.map(item => item.name), }, yAxis: { type: 'value', }, series: [{ type: 'bar', data: data.map(item => item.value), }], }; chart.setOption(option); }); </script> </body> </html> ``` 在上面的例子中，我们使用了ECharts的CDN来加载ECharts库，并通过JavaScript代码发送GET请求获取数据。然后使用获取到的数据来渲染一个简单的柱状图。请注意，这只是一个简单的示例，你可以根据自己的需求进行扩展和修改。同时，你还需要安装Flask和ECharts库，可以使用`pip`命令进行安装。希望对你有所帮助！如果有任何问题，请随时提问。

相关推荐

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通