python—flask—echarts数据可视化简单练习

最新推荐文章于 2023-04-20 10:38:33 发布

抄代码抄错的小牛马

最新推荐文章于 2023-04-20 10:38:33 发布

阅读量373

点赞数 2

分类专栏： py爬虫练习ing 文章标签： echarts flask python

本文链接：https://blog.csdn.net/qq_61122628/article/details/125251488

版权

py爬虫练习ing 专栏收录该内容

8 篇文章 4 订阅

订阅专栏

本文展示了如何利用Python的Flask框架和Echarts库创建一个数据可视化网页，通过读取CSV数据，绘制饼图展示电影累计票房。代码包括Flask应用设置、数据处理及Echarts配置，最终生成一个展示票房数据的动态饼图。

摘要由CSDN通过智能技术生成

B站学习记录：
echarts官网：https://echarts.apache.org/examples/zh/index.html
官网上有很多可视化例子：
在这里插入图片描述

"""
2022年
 
CSDN:抄代码抄错的小牛马
"""
from flask import Flask, render_template
import pandas as pd

app = Flask(__name__)
app.config.from_object(__name__)
app.config["JSON_AS_ASCII"] = False


@app.route("/")
def show():
    data = pd.read_csv("1.csv")
    # print(data)
    data = data.rename(columns={"电影名称":"name","累计票房(万)":"value"})
    # data = data.rename(columns={"电影名称": "name", '累计票房(万)': "value", '场均人次': "value"})

    data = data.to_dict(orient="records")
    print(data)

    return render_template("show.html",data=data)


if __name__ == '__main__':
    app.run(debug=True)

HTML

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
</head>
<body>
    <center>
    <div id="main" style="width:800px; height:600px; background:pink " ></div>
    <script type="text/javascript" >
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
              backgroundColor: '#2c343c',
              title: {
                text: '艺恩票房',
                left: 'center',
                top: 20,
                textStyle: {
                  color: '#ccc'
                }
              },
              tooltip: {
                trigger: 'item'
              },
              visualMap: {
                show: false,
                min: 1,
                max: 60000000000,
                inRange: {
                  colorLightness: [0, 1]
                }
              },
              series: [
                {
                  name: '累计票房(万)',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '50%'],
                  data:{{data|tojson}}.sort(function (a, b) {
                    return a.value - b.value;
                  }),
                  roseType: 'radius',
                  label: {
                    color: 'rgba(255, 255, 255, 0.3)'
                  },
                  labelLine: {
                    lineStyle: {
                      color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                  },
                  itemStyle: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
                  animationType: 'scale',
                  animationEasing: 'elasticOut',
                  animationDelay: function (idx) {
                    return Math.random() * 200;
                  }
                }
              ]
            };
            myChart.setOption(option);


    </script>
    </center>
</body>
</html>