开放原子开发者工作坊

使用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