maxliu06 发表于 2022-1-28 11:12:43

python ajax echarts 求助

最近在学习前后端数据交互    通过ajax 向后端提交数据，   然后 把数据返回给前端 的 echarts 配置项目；

前后端数据交互 都没有问题，就是返回来的数据给到 echarts 时，却是undefinded...



附上 JS代码var result;   //定义全局变量用于接收 ajax 返回的数据集

function sub(){
             var Stime = document.getElementById("start_time");
             var Etime = document.getElementById("end_time");

             var obj = document.getElementById("sort");// 定位select 对象
             var index = obj.selectedIndex;             // 选中索引
             var text = obj.options.text;      // 选中文本
             var value = obj.options.value;      // 选中值

             var data={
                  data: JSON.stringify({
                  'x': Stime.value,
                  'y': Etime.value,
                  'z': text,
                }),

             };

            $.ajax({
            url:"/index",
            type:"get",
            data:data,
            dataType: 'json',

               success:function(data){
                      result = data;
                      //console.log(typeof(result));
                      //console.log(result);
            },
            error:function(e){
                      alert("error");
            }
          })

      }

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
//data: ,
data: result,
}
]
};
console.log(option.series)
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

maxliu06 发表于 2022-1-28 11:16:28

祝愿各路大神 新春大吉，财源广进；   帮帮忙 {:5_110:}

ckblt 发表于 2022-1-28 11:21:19

你要把下面的代码都移到success里，不然，还没来得及result = data就直接访问result，当然undefined

var result //定义全局变量用于接收 ajax 返回的数据集

function sub() {
var Stime = document.getElementById('start_time')
var Etime = document.getElementById('end_time')

var obj = document.getElementById('sort') // 定位select 对象
var index = obj.selectedIndex // 选中索引
var text = obj.options.text // 选中文本
var value = obj.options.value // 选中值

var data = {
    data: JSON.stringify({
      x: Stime.value,
      y: Etime.value,
      z: text
    })
}

$.ajax({
    url: '/index',
    type: 'get',
    data: data,
    dataType: 'json',

    success: function (data) {
      result = data
      //console.log(typeof(result));
      //console.log(result);


      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'))

      // 指定图表的配置项和数据
      var option = {
      title: {
          text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
          data: ['销量']
      },
      xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
          {
            name: '销量',
            type: 'bar',
            //data: ,
            data: result
          }
      ]
      }
      console.log(option.series)
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    error: function (e) {
      alert('error')
    }
})
}

maxliu06 发表于 2022-1-28 11:28:03

ckblt 发表于 2022-1-28 11:21
你要把下面的代码都移到success里，不然，还没来得及result = data就直接访问result，当然undefined




确定 这样可以;   但是这样不就显得这个函数代码太长了？？   如果我有多个返回的数据集； 需要有多个图表的; 都放在 success中；代码就更长了；



再有，我前面已经定义全局变量 result,   为什么在echarts 的配置项中 却成了未定义？？？
页: [1]
查看完整版本: python ajax echarts 求助