flask项目使用echarts异步加载数据

参考文章
Flask+Ajax实现Echarts异步渲染
Echarts和flask的结合使用

py文件

def read_csv_file():
    time_list = []
    data_list = []
    jsonData = {}
    current_date = time.strftime('%Y-%m-%d', time.localtime(time.time()))
    # with open(current_date+'.csv', encoding='utf-8') as f:
    with open('new.csv', encoding='utf-8') as f:
        f_csv = csv.DictReader(f)
        for row in f_csv:
            time_list.append(row['time'])
            result = int(row['bo']) / int(row['so'])
            data_list.append(result)
    jsonData['xdays'] = time_list
    jsonData['yvalues'] = data_list
#json.dumps()用于将字典形式的数据转化为字符串，json.loads()用于将字符串形式的数据转化为字典
    return json.dumps(jsonData)

@app.route('/test/', methods=['POST'])
def my_echart():
    result = read_csv_file()
    return result

html文件

{% extends 'base.html' %}
{% block title %}表格{% endblock %}

{% block main %}
    <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>

    <div id="main" style="width: 600px;height: 400px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'), 'light');

        var app = {
            xday:[],
            yvalue:[]
        };

        $(document).ready(function () {
            getData();
            console.log('12334');
            console.log(app.xday);
            console.log(app.yvalue);
        });

        function getData(){
            $.ajax({
                url:'/test/',
                data:{},
                type:'POST',
                dataType: 'json',
                success:function (data) {
                    app.xday = data.xdays;
                    app.yvalue = data.yvalues;
                    myChart.setOption({
                        title: {text: '异步加载数据'},
                        tooltip: {},
                        xAxis: {
                          data: app.xday
                        },
                        yAxis: [{
                            max:1,
                            min:0.95,
                            splitNumber:20
                        }],
                        series: [{
                            name: '比值',
                            type: 'line',
                            data: app.yvalue
                        }]
                    })
                },
                error:function (msg) {
                    console.log(msg);

                }
            })
        }


        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        myChart.setOption(option);

    </script>


{% endblock %}