用Pyecharts写一个可以切片的静态Html
时间: 2023-06-14 09:07:30 浏览: 43
下面是一个示例代码,使用 Pyecharts 和 Flask 框架生成一个可以切片的静态 HTML:
```python
from flask import Flask, render_template
from pyecharts import options as opts
from pyecharts.charts import Line
app = Flask(__name__)
@app.route("/")
def index():
# 生成折线图
x_data = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
y_data = [820, 932, 901, 934, 1290, 1330, 1320]
line = Line()
line.add_xaxis(x_data)
line.add_yaxis("Sales", y_data)
line.set_global_opts(title_opts=opts.TitleOpts(title="Sales Trend"))
# 将图表转换为 HTML 代码
chart_options = line.dump_options()
chart_script = line.dump_js_dependencies()
# 渲染 HTML 模板并传入图表代码
return render_template("index.html", chart_options=chart_options, chart_script=chart_script)
if __name__ == "__main__":
app.run(debug=True)
```
在 `templates` 文件夹下创建一个名为 `index.html` 的 HTML 模板,代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pyecharts Demo</title>
{{ chart_script|safe }}
</head>
<body>
<div id="chart" style="width:800px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('chart'));
var options = {{ chart_options|safe }};
myChart.setOption(options);
</script>
</body>
</html>
```
在这个模板中,我们使用了 `chart_script` 和 `chart_options` 变量来分别存储图表的 JavaScript 代码和配置选项。在模板中,我们首先将 `chart_script` 渲染到页面中,然后创建一个 div 元素用于显示图表,最后使用 JavaScript 将图表的配置选项传入 ECharts 实例中以渲染图表。
运行该脚本,访问 http://localhost:5000 即可看到生成的图表。可以通过修改 url 参数来切换图表的类型或数据,例如:http://localhost:5000?type=bar&data=[5, 20, 36, 10, 75, 90]。你可以根据自己的需求来修改代码和模板以生成不同类型的可切片图表。