flask后端返回数据给前端js

Question

我有一个echarts_line.js，我想将后台数据传给前端，但是没传成功，希望牛人能帮忙解惑，以下是目前效果，后端设置数据+代码：
目前效果：

后端设计数据：

后端部分

@app.route('/line',methods = ['post','get'])
def get_line():
    line_data = pd.read_excel('D:\桌面\更新表.xlsx', sheet_name='折线图')
    print(line_data)
    list_date = line_data['日期'].to_list()
    list_last_month = line_data['往期'].to_list()
    list_this_month = line_data['当月'].to_list()
    dict_return_line = {'list_date':list_date,
                        'list_last_month':list_last_month,
                        'list_this_month':list_this_month}
    return jsonify(dict_return_line)

前端部分

<div id='line' style="width: 40%;height: 74%;left: 32%;top: 25%;"></div>
        <script src="../static/js/echarts-line.js"></script>
function getline(){
            $.ajax({
                url:"/line",
                success:function(data){
                    option.series[0].data = data.list_last_month
                    option.series[1].data = data.list_this_month
                    option.xAxis[0].data = data.list_date
                    myChart.setOption(option)
                },error:function(xhr,type,errorThrown){
                    
                }
            })
        }

js部分

var myChart = echarts.init(document.getElementById('line'));
var option;

option = {
  title: {
    text: '当月每日GMV数据（单位：万元）',
    textStyle: {
          color: '#fff'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['同比上月', '本月'],
    left:'10%',
    top: '10%',
    orient :'vertical',
    icon: 'circle',
    textStyle:{
        color:'#FFF',
        fontSize :20
        
    }
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [{
      type: 'category',
      axisLine: {
            show: true
          },
          axisLabel: {
            show: true,
            color: 'white'  // 设置刻度标签颜色为白色
          },
      data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日']
    }],
  yAxis: [
    {
      type: 'value',
      axisLine: {
            show: true
          },
          axisLabel: {
            show: true,
            color: 'white'  // 设置刻度标签颜色为白色
          },
      }],
  series: [
    {
      name: '同比上月',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      markPoint: {
              symbol: 'pin',
              symbolSize: 80,
              data: [{type: 'max', name: '往期最大值'}],
              label:{
                  fontsize:40,
                  fontWeight:'bold'
              }
            },
      data: [120, 132, 101, 134, 90, 230, 210,40,80,120,3000,100,150,130,140,150,40,160,300,350,320,400,380,500,600,700,800,900,1200,1500,900]
    },
    {
      name: '本月',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      markPoint: {
              symbol: 'pin',
              symbolSize: 50,
              data: [{type: 'max', name: '本月最大值'}],
              label:{
                      fontsize:40,
                      fontWeight:'bold'
              }
            },
      data: [220, 182, 191, 234, 290,199, 630,400,500,600]
    }
  ]
};

option && myChart.setOption(option);

Answer 1

【以下回答由 GPT 生成】

首先，确保你的后端代码能够正确地返回数据。我注意到你的后端代码中有一行print语句，用于输出读取的数据。但是，在Flask中，print语句并不会直接在终端输出，因此你需要使用Flask的日志记录功能来输出该行数据。将print(line_data)改为app.logger.debug(line_data)。

接下来，需要确保将数据正确传递给前端的js文件。在你的前端代码中，我看到你正在使用ajax来调用后端接口。首先，确保你已正确引入了jQuery库。然后，你需要在成功回调函数中创建echarts实例，并将数据设置到相应的选项中，最后使用setOption方法更新图表。同时，注意将option定义到ajax请求外部，以便在整个页面上都能访问到。

下面是修改后的代码：

<div id='line' style='width: 40%; height: 74%; left: 32%; top: 25%;'></div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="../static/js/echarts-line.js"></script>
<script>
// 定义option，在ajax请求外部可访问
var option = {
    // ... 其他配置项
    series: [
        {
            name: '往期',
            type: 'line',
            data: []
        },
        {
            name: '当月',
            type: 'line',
            data: []
        }
    ],
    xAxis: [
        {
            type: 'category',
            data: []
        }
    ]
};

function getline() {
    $.ajax({
        url: "/line",
        success: function(data) {
            option.series[0].data = data.list_last_month;
            option.series[1].data = data.list_this_month;
            option.xAxis[0].data = data.list_date;

            // 创建echarts实例，并设置option
            var myChart = echarts.init(document.getElementById('line'));
            myChart.setOption(option);
        },
        error: function(xhr, type, errorThrown) {
            // 错误处理
        }
    });
}

// 在页面加载完成后调用getline函数，或者在需要的时候调用
$(document).ready(function() {
    getline();
});
</script>

以上就是对你的代码的改进。请尝试这些修改并测试一下，如果仍然遇到问题，请提供错误信息以便进一步检查。

【相关推荐】

• 这篇博客: Flask | Echart | 服务器部署 | 记录一次制作一个数据可视化网页并部署到个人云服务器学习过程中的 在线学习资源 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^