首页echart+flask

echart+flask

时间: 2023-08-24 21:09:50 浏览: 89

你的问题是关于如何在 Flask 中使用 ECharts 吗？如果是的话，可以按照以下步骤进行： 1. 安装 ECharts 的 Python 包：`pip install pyecharts` 2. 在 Flask 中引入 ECharts： ```python from pyecharts.charts import Line from flask import jsonify, render_template ``` 3. 创建一个路由，将 ECharts 图表的数据返回到前端页面： ```python @app.route('/echarts') def echarts(): # 准备数据 x_data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] y_data = [820, 932, 901, 934, 1290, 1330, 1320] # 创建图表对象 chart = Line() chart.add_xaxis(x_data) chart.add_yaxis('销量', y_data) # 将图表数据转成 JSON 格式，返回到前端页面 return jsonify({'data': chart.dump_options()}) ``` 4. 在前端页面中引入 ECharts 的 JavaScript 库，并使用 AJAX 请求数据： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts Demo</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 800px;height:400px;"></div> <script> var xhr = new XMLHttpRequest(); xhr.open('GET', '/echarts'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var data = JSON.parse(xhr.responseText); var chart = echarts.init(document.getElementById('chart')); chart.setOption(data.data); } }; xhr.send(); </script> </body> </html> ``` 以上就是在 Flask 中使用 ECharts 的简单示例。希望对你有所帮助！

阅读全文