flask 實現echarts 加載數據（利用ajax）

使用ajax從后端加載數據，返回echarts圖表。

https://github.com/Bird123456/Flask/tree/Bird123456-add_echarts

 

就簡單的柱狀圖而言，首先前端先找好模板柱狀圖模板。（就鏈接代碼舉例）

<div id="main1" style="width: 400px;height:300px;margin: 0 auto;"></div>
                            <script type="text/javascript">
                            // 基於准備好的dom，初始化echarts實例
                            var myChart1 = echarts.init(document.getElementById('main1'));
                            // 指定圖表的配置項和數據
                            myChart1.setOption({
                                title: {
                                    text: '可視化展示'
                                },
                                tooltip: {},
                                legend: {
                                    data: ['目標檢測']
                                },
                                xAxis: {
                                    data: []
                                },
                                yAxis: {},
                                series: [{
                                    name: 'person',
                                    type: 'bar',
                                    data: []
                                }]
                            });
</script>

鋪墊代碼：（我的目的是讀取文件下的圖片數量）

 

 

 

 

 

 

import os
def count():
    type_list=[]
    num_list=[]
    path =r'F:\Python\rjb_yfzd\img\out_img1'
    original_images =[]
    #walk direction
    '''
    root:path下的文件夾路徑
    dirs：root下的文件夾名稱
    filenames：root下的文件名稱
    '''
    for root, dirs, filenames in os.walk(path):
        for filename in filenames:
            original_images.append(os.path.join(root, filename)) #將所有文件添加到一個list

    print('num:',len(original_images)) #打印list長度  就是保存的數量
    f = open('count_total.txt','w+')

    current_dirname =os.path.dirname(original_images[0])#去掉文件名返回目錄

    file_num =0#初始化數量
    for filename in original_images:
        dirname = os.path.dirname(filename)#去掉文件名返回目錄
        #一個目錄數量讀取完后，需要重新初始化數量，讀取下一個目錄
        #當讀取最后一個文件時，下面也沒有跟新的目錄了，所以需要將數據寫入
        # print(dirname,current_dirname)
        if dirname != current_dirname or filename == original_images[-1]:
            if filename == original_images[-1]:#最后一個文件時，對數量+1
                file_num += 1
            total = current_dirname[32:]
            type_list.append(total)
            num_list.append(file_num)
            f.write('%s:\t%d\n'%(total,file_num))#將數據寫入，（接下來就是跟新操作）
            current_dirname = dirname#跟新新的目錄
            file_num = 1#初始化數量統計
        #同一個目錄就直接數量+1
        else:
            file_num +=1
    finall_dic=dict(zip(type_list,num_list))
    #返回保存文檔的首位
    f.seek(0)
    #獲取文檔信息
    # for s in f:
    #     print(s)
    f.close()
    return finall_dic

這里還會返回到一個txt文本中：

 

 

 

為后面每組數據創建類

class total:
    def __init__(self, name, num):
        self.name = name
        self.num = num
    def __repr__(self):
        return repr((self.name, self.num))

 

后端每組數據返回指定json格式

#使用json.dumps的方法
@app.route('/getdata', methods=["GET"])
def get_data():
    customers =[]#創建list，保存每組數據
    if request.method == "GET":
        fina=count_total.count()#獲取每類圖片的數量（此時為dict類型）
        for (key,values) in  fina.items():
            customers.append(z_json.total(key,values),)#將每組數據以類的方式統一化，添加進list中,返回格式：[('motorbike', 34), ('person', 90), ('car', 97), ('bicycle', 7), ('bus', 1)]
            # print(customers)
        json_str = json.dumps(customers, default=lambda o: o.__dict__, sort_keys=True, indent=4)#組合標准json格式
        # json1=jsonify(customers)
        print(json_str)
    return json_str, 200, {"Content-Type":"application/json"}#因為網頁上此時text，所以需要添加返回為標准的json

返回的json格式：

[
    {
        "name": "motorbike",
        "num": 34
    },
    {
        "name": "person",
        "num": 90
    },
    {
        "name": "car",
        "num": 97
    },
    {
        "name": "bicycle",
        "num": 7
    },
    {
        "name": "bus",
        "num": 1
    }
]

 

重新跟新echarts

                            xvalue=[],  //保存x變量
                            yvalue=[]  //保存y變量
                            myChart1.showLoading(); // 顯示加載動畫
                            // 異步加載數據
                            $.ajax({
                                type: "GET",
                                url: "/getdata", //調用方法
                                dataType: "json", //返回的json類型
                                success: function (result) {
                                    for(var i=0;i<result.length;i++)
                                    {
                                        xvalue.push(result[i].name) //將name添加為x
                                        yvalue.push(result[i].num)  //將num 添加為y
                                    }
                                    myChart1.hideLoading();
                                    myChart1.setOption({
                                        xAxis: {
                                            data:xvalue,
                                            "axisLabel":{
                                                    interval: 0   //保證每個x都能看見
                                                }
                                        },
                                        yAxis: {},
                                        series: [{
                                            name: '目標檢測',
                                            type: 'bar',
                                            data: yvalue
                                        }]
                                    });
                                }
                            });

 

參考：x軸數據顯示不全：https://blog.csdn.net/csm17805987903/article/details/85111925

　　　后端返回給前端json格式：https://www.jianshu.com/p/10a679d51e17（使用json.jumps需要轉換網頁格式）

　　　　json實現復雜對象的類：https://blog.csdn.net/kongxx/article/details/51563720