Python-flask&echarts画图

  • Post author:
  • Post category:python



echarts-画图王


echarts是现在比较流行的一种画图工具,而且是最受关注的和喜爱的,因为他十分简单;

echarts网址:

https://echarts.apache.org


在echarts网站的实例内寻找自己需要的图;


例图:


在这里插入图片描述

如果我们要画这样的图一定会十分麻烦;因为他有许多参数和变量,而且我们这是在一张图(网页)里面,这样我们就可以很直观的得出结果和分析;



**案例**



在这里我们根据这样的一个图例来画图

在这里插入图片描述


python代码

from flask import Flask,render_template,request#导入库
import pandas as pd#导入库
app = Flask(__name__)#创建一个APP

@app.route('/')
def index():
    data= pd.read_csv('./shu.csv')#读取数据表
    data.columns=['name','value']#更改表名(根据实际情况书写,可以不要)
    data = data[['value', 'name']]#根据实际情况书写(可以不要)
    data = data.to_dict(orient='records')#将数据构建成html需要的样式
    #data = data.to_dict(orient='records')
    #print(data)
    return render_template('show.html',data=data)#传送数据
if __name__ == '__main__':
    app.run(debug=True)#启动APP



**html**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入echarts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="height:600px;width:800px;background: pink" ></div>
    <script>
        // 基于准备好的dom,初始化echarts实例
        var main = echarts.init(document.getElementById('main'));//获取ID 赋值给main


        //配置echarts
        var option = {
                backgroundColor: '#2c343c',

                title: {
                    text: 'Customized Pie',
                    left: 'center',
                    top: 20,
                    textStyle: {
                        color: '#ccc'
                    }
                },

                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },

                visualMap: {
                    show: false,
                    min: 10,
                    max: 300,
                    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; }),//这里的“|”是用来引用功能的,导入数据data
                        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;
                        }
                    }
                ]
            };
        // 使用刚指定的配置项和数据显示图表。
        main.setOption(option);
    </script>
</body>
</html>


运行图例


在这里插入图片描述

谢谢点赞评论!



版权声明:本文为qq_44936246原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。