【Flask+Echarts】饼图实现动态的读取数据

您所在的位置：网站首页 › flask数据库存的是数字,前端传入中文 › 【Flask+Echarts】饼图实现动态的读取数据

【Flask+Echarts】饼图实现动态的读取数据

2024-07-15 00:33| 来源: 网络整理| 查看: 265

饼图实现动态的读取数据

使用的数据展示在这里插入图片描述我们主要就是想要使用循环将数据给写道图中

我们先将数据转换成字典类型

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> 房源占比前五的饼图 // 基于准备好的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);

【本文地址】

【Flask+Echarts】饼图实现动态的读取数据

【Flask+Echarts】饼图实现动态的读取数据

今日新闻

推荐新闻