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

飝鱻.

已于 2022-03-27 18:52:17 修改

阅读量3.8k

点赞数 5

于 2022-03-14 16:26:53 首次发布

本文链接：https://blog.csdn.net/heiren_a/article/details/123481633

版权

python 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

Echarts

6 篇文章 1 订阅

订阅专栏

Flask

6 篇文章 0 订阅

订阅专栏

饼图实现动态的读取数据

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

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

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>

飝鱻.

关注

5
点赞
踩
37

收藏

觉得还不错? 一键收藏
1
评论
【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: '{{da
复制链接

扫一扫

专栏目录