[已解决]python ajax echarts 求助

maxliu06

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

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



附上 JS代码

1. var result;   //定义全局变量  用于接收 ajax 返回的数据集
   
2. 
   
3. function sub(){
   
4.              var Stime = document.getElementById("start_time");
   
5.              var Etime = document.getElementById("end_time");
   
6. 
   
7.              var obj = document.getElementById("sort");  // 定位select 对象
   
8.              var index = obj.selectedIndex;             // 选中索引
   
9.              var text = obj.options[index].text;        // 选中文本
   
10.              var value = obj.options[index].value;      // 选中值
    
11. 
    
12.              var data={
    
13.                   data: JSON.stringify({
    
14.                     'x': Stime.value,
    
15.                     'y': Etime.value,
    
16.                     'z': text,
    
17.                 }),
    
18. 
    
19.              };
    
20. 
    
21.             $.ajax({
    
22.               url:"/index",
    
23.               type:"get",
    
24.               data:data,
    
25.               dataType: 'json',
    
26. 
    
27.                success:function(data){
    
28.                       result = data;
    
29.                       //console.log(typeof(result));
    
30.                       //console.log(result);
    
31.               },
    
32.               error:function(e){
    
33.                       alert("error");
    
34.               }
    
35.           })
    
36. 
    
37.         }
    
38. 
    
39. // 基于准备好的dom，初始化echarts实例
    
40. var myChart = echarts.init(document.getElementById('main'));
    
41. 
    
42. // 指定图表的配置项和数据
    
43. var option = {
    
44. title: {
    
45. text: 'ECharts 入门示例'
    
46. },
    
47. tooltip: {},
    
48. legend: {
    
49. data: ['销量']
    
50. },
    
51. xAxis: {
    
52. data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    
53. },
    
54. yAxis: {},
    
55. series: [
    
56. {
    
57.   name: '销量',
    
58.   type: 'bar',
    
59.   //data: [8, 9, 10, 11, 12, 13],
    
60.   data: result,
    
61. }
    
62. ]
    
63. };
    
64. console.log(option.series)
    
65. // 使用刚指定的配置项和数据显示图表。
    
66. myChart.setOption(option);

复制代码

最佳答案

月排行榜 / 总排行榜

ckblt

2022-1-28 11:21:19

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

1. var result //定义全局变量  用于接收 ajax 返回的数据集
   
2. 
   
3. function sub() {
   
4.   var Stime = document.getElementById('start_time')
   
5.   var Etime = document.getElementById('end_time')
   
6. 
   
7.   var obj = document.getElementById('sort') // 定位select 对象
   
8.   var index = obj.selectedIndex // 选中索引
   
9.   var text = obj.options[index].text // 选中文本
   
10.   var value = obj.options[index].value // 选中值
    
11. 
    
12.   var data = {
    
13.     data: JSON.stringify({
    
14.       x: Stime.value,
    
15.       y: Etime.value,
    
16.       z: text
    
17.     })
    
18.   }
    
19. 
    
20.   $.ajax({
    
21.     url: '/index',
    
22.     type: 'get',
    
23.     data: data,
    
24.     dataType: 'json',
    
25. 
    
26.     success: function (data) {
    
27.       result = data
    
28.       //console.log(typeof(result));
    
29.       //console.log(result);
    
30. 
    
31. 
    
32.       // 基于准备好的dom，初始化echarts实例
    
33.       var myChart = echarts.init(document.getElementById('main'))
    
34. 
    
35.       // 指定图表的配置项和数据
    
36.       var option = {
    
37.         title: {
    
38.           text: 'ECharts 入门示例'
    
39.         },
    
40.         tooltip: {},
    
41.         legend: {
    
42.           data: ['销量']
    
43.         },
    
44.         xAxis: {
    
45.           data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    
46.         },
    
47.         yAxis: {},
    
48.         series: [
    
49.           {
    
50.             name: '销量',
    
51.             type: 'bar',
    
52.             //data: [8, 9, 10, 11, 12, 13],
    
53.             data: result
    
54.           }
    
55.         ]
    
56.       }
    
57.       console.log(option.series)
    
58.       // 使用刚指定的配置项和数据显示图表。
    
59.       myChart.setOption(option)
    
60.     },
    
61.     error: function (e) {
    
62.       alert('error')
    
63.     }
    
64.   })
    
65. }

复制代码

跳转到最佳答案楼层

maxliu06

祝愿各路大神 新春大吉，  财源广进；     帮帮忙 [code][/code]

ckblt

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

1. var result //定义全局变量  用于接收 ajax 返回的数据集
   
2. 
   
3. function sub() {
   
4.   var Stime = document.getElementById('start_time')
   
5.   var Etime = document.getElementById('end_time')
   
6. 
   
7.   var obj = document.getElementById('sort') // 定位select 对象
   
8.   var index = obj.selectedIndex // 选中索引
   
9.   var text = obj.options[index].text // 选中文本
   
10.   var value = obj.options[index].value // 选中值
    
11. 
    
12.   var data = {
    
13.     data: JSON.stringify({
    
14.       x: Stime.value,
    
15.       y: Etime.value,
    
16.       z: text
    
17.     })
    
18.   }
    
19. 
    
20.   $.ajax({
    
21.     url: '/index',
    
22.     type: 'get',
    
23.     data: data,
    
24.     dataType: 'json',
    
25. 
    
26.     success: function (data) {
    
27.       result = data
    
28.       //console.log(typeof(result));
    
29.       //console.log(result);
    
30. 
    
31. 
    
32.       // 基于准备好的dom，初始化echarts实例
    
33.       var myChart = echarts.init(document.getElementById('main'))
    
34. 
    
35.       // 指定图表的配置项和数据
    
36.       var option = {
    
37.         title: {
    
38.           text: 'ECharts 入门示例'
    
39.         },
    
40.         tooltip: {},
    
41.         legend: {
    
42.           data: ['销量']
    
43.         },
    
44.         xAxis: {
    
45.           data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    
46.         },
    
47.         yAxis: {},
    
48.         series: [
    
49.           {
    
50.             name: '销量',
    
51.             type: 'bar',
    
52.             //data: [8, 9, 10, 11, 12, 13],
    
53.             data: result
    
54.           }
    
55.         ]
    
56.       }
    
57.       console.log(option.series)
    
58.       // 使用刚指定的配置项和数据显示图表。
    
59.       myChart.setOption(option)
    
60.     },
    
61.     error: function (e) {
    
62.       alert('error')
    
63.     }
    
64.   })
    
65. }

复制代码

maxliu06

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

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



再有，我前面已经定义全局变量 result,   为什么在  echarts 的配置项中 却成了未定义？？？