开发者社区> 问答> 正文

echarts 使用$ajax调用数据报错,e is undefined?报错

大家帮我看看,$ajax使用有错吗?为什么node和link的数据改为$ajax调用php报错, Thank you!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!--Step:1 Import a module loader, such as esl.js or require.js-->
    <!--Step:1 引入一个模块加载器,如esl.js或者require.js-->
    <script src="echarts/esl.js"></script>
    <script src="jquery-1.11.1.min.js"></script>
    
</head>
 
<body>
    <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:2 为ECharts准备一个具备大小(宽高)的Dom-->
    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
  
    <script type="text/javascript">
     
    function nodes() { 
                 
         $.ajax({ 
                    type: "get", 
                    url: "node.php", 
                    data: {}, 
                    dataType: "json",
                    async: true, 
                    success: function(list) { 
                       
                        // var json = eval(data); 
                        //alert(result[0].HighTemp);                 
                        for (var i = 0; i < list.length; i++) { 
                            res.push(list[i].HighTemp); 
                            //alert(result[i].HighTemp); 
                        } 
                    } 
                });                
               
            };

    function links() { 
                 
         $.ajax({ 
                    type: "get", 
                    url: "link.php", 
                    data: {}, 
                    dataType: "json",
                    async:true, 
                    success: function(list1) { 
                        
                        // var json = eval(data); 
                        //alert(result[0].HighTemp);                 
                        for (var i = 0; i < list1.length; i++) { 
                            res.push(list1[i].HighTemp); 
                            //alert(result[i].HighTemp); 
                        } 
                    } 
                });                
              
            }
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
    require.config({
        paths:{ 
            echarts:'./echarts/echarts',
            'echarts/chart/force' : './echarts/echarts',
            'echarts/chart/line':'./echarts/echarts'
            
        }
    });
    
    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
    require(
        [
            'echarts',
            'echarts/chart/force',
            'echarts/chart/line'
            
            
        ],
        function(ec) {
           
            var myChart = ec.init(document.getElementById('main'));
            myChart.setOption({
                title:{
                    text:'fansRelation',
                    x:'right',
                    y:'bottom'
                },
                tooltip : {
                    trigger: 'item',
                    formatter:'{a}:{b}'
                },
                legend: {
                    x:'left',
                    data:['user','fans']
                },
               
                series : [
                    {
                        type:'force',
                        name:'fansRelation',
                        categories:[
                        {
                            name:'users',
                            itemStyle:{
                            normal:{
                                color:'#ff7f50'
                            }
                           }   
                        },
                        {
                            name:'fans',
                            itemStyle:{
                                normal:{
                                    color:'#87cdfa'
                                }
                            }
                        }
                        ],
                        itemStyle:{
                            normal:{
                                label:{
                                    show:true,
                                    textStyle:{
                                        color:'#800080'
                                    }
                                },
                                nodeStyle:{
                                    brushType:'both',
                                    strokeColor:'rgb(255,215,0,0.4)',
                                    lineWidth:1
                                }
                            },
                            emphasis:{
                                label:{
                                    show:false
                                },
                                nodeStyle:{

                                },
                                linkStyle:{}
                            }
                        },
                        minRadius:15,
                        maxRadius:25,
                        density:0.05,
                        attractiveness:1.2,
                        linkSymbol:'arrow',
                       nodes:[nodes()],
                        links : [
                         links()]
                    }
                    
                ]
            });
            var ecConfig = require('echarts/config');
            function focus(param) {
            var data = param.data;
            var links = option.series[0].links;
            var nodes = option.series[0].nodes;
            if (
              data.source !== undefined
              && data.target !== undefined
            ) { //点击的是边
            var sourceNode = nodes[data.source];
             var targetNode = nodes[data.target];
             console.log("选中了边 " + sourceNode.name + ' -> ' + targetNode.name + ' (' +  data.weight + ')');
          } else { // 点击的是点
            console.log("选中了" + data.name + '(' + data.value + ')');
         }
        console.log(param);
       }
      myChart.on(ecConfig.EVENT.CLICK, focus)

                    
        }
        );
    </script>

    
</body>

</html>


展开
收起
爱吃鱼的程序员 2020-06-20 17:26:43 915 0
1 条回答
写回答
取消 提交回答
  • https://developer.aliyun.com/profile/5yerqm5bn5yqg?spm=a2c6h.12873639.0.0.6eae304abcjaIB

    确保内容载入完成再执行

    $.ready(function(){

    //

    })

    回复 @hbxtlinlin:有没有隐藏掉要显示的层?nodes:(function(){nodes()}),links:(function(){links()})这样修改后不报错了,左上角和右下角的信息能出来,但是图还是不能出来晕-_-||,ajax是异步的。。。。设成异步也不显示 回复 @hbxtlinlin:-_-||||||,json格式啊~~兄弟,先补补基础吧,这样没法玩下去的。 @Kener-林峰,两个{}之间需要加逗号吗?这是node.php和link.php返回的部分数据,有错吗?为什么图片还是不能显示?想问下最后是怎么解决的,遇到了同样的问题
    2020-06-20 17:27:01
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
Javascript中的对象 立即下载
探究 Node.js 的服务端之路 立即下载
JavaScript函数 立即下载