【Flask+Echarts】饼图实现动态的读取数据
使用的数据展示 我们主要就是想要使用循环将数据给写道图中
我们先将数据转换成字典类型
datas = { } for item in df.head().values: datas[item[0]] = item[1]
然后将html文件中的data改成下列
data: [ {% for data in datas %} {value:{ { datas[data] }}, name: { {data}}}, {% endfor %} ],
结果如下所示 完整的代码 app
import pandas as pd from flask import Flask, render_template # df = pd.read_csv(data/房源数量占比.csv) # df = df.sort_values(房源数量分布占比, ascending=False) # province = df[省份].head(5).tolist() # rank = df[房源数量分布占比].head(5).tolist() datas = { } df = pd.read_csv(data/房源数量占比.csv) df = df.sort_values(房源数量分布占比, ascending=False) for item in df.head().values: datas[item[0]] = item[1] app = Flask(__name__) @app.route(/) def index(): return render_template(房源占比前五的饼图.html, datas=datas) if __name__ == __main__: app.run(debug=True)
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>房源占比前五的饼图</title> <script src="../static/echarts.min.js"></script> </head> <body> <div id="main" style="width:1000px;height:400px"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById(main)); option = { title: { text: 房源占比前五的饼图, subtext: 饼图练习, left: center }, tooltip: { trigger: item }, legend: { orient: vertical, left: left }, series: [ { name: 房源占比, type: pie, radius: 50%, data: [ { % for data in datas %} { value:{ { datas[data] }}, name: { {data}}}, { % endfor %} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: rgba(0, 0, 0, 0.5) } } } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html>
下一篇:
第一章 Hadoop概念及入门