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 版权协议,转载请附上原文出处链接和本声明。
