echarts-Uncaught TypeError: Cannot read property 'getGeoJson' of undefined

aeee123 发布于 2015/04/21 08:10
阅读 5K+
收藏 0

@Kener-林峰 你好,想跟你请教个问题:

我这边想用echarts显示广东省区县的数据,代码如下,

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
     
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:600px;width:800px"></div>
    
    <script src="js/echarts-2.2.1/doc/asset/js/esl/esl.js"></script>
    <!-- ECharts单文件引入 -->
    <script src="js/echarts-2.2.1/build/dist/echarts.js"></script>
   
    
      
    <script type="text/javascript">




     var myChart;
     
     //require.config({
        //    paths: {
        //        echarts: 'js/echarts-2.2.1/build/dist',
        //        zrender:'js/zrender-2.0.8/build'
        //    }
        //});
     
     require.config({
                packages: [
                     {
                        name: 'echarts',
                        location: 'js/echarts-2.2.1/build/source',
                        main: 'echarts'
                    },
                    {
                        name: 'zrender',
                        location: 'js/zrender-2.0.8/src',
                        main: 'zrender'
                    }
               ]
        });
     
        
             
        var cityMap = {
               "广州市": "440100",
               "韶关市": "440200",
               "深圳市": "440300",
               "珠海市": "440400",
               "汕头市": "440500",
               "佛山市": "440600",
               "江门市": "440700",
               "湛江市": "440800",
               "茂名市": "440900",
               "肇庆市": "441200",
               "惠州市": "441300",
               "梅州市": "441400",
               "汕尾市": "441500",
               "河源市": "441600",
               "阳江市": "441700",
               "清远市": "441800",
               "东莞市": "441900",
               "中山市": "442000",
               "潮州市": "445100",
               "揭阳市": "445200",
               "云浮市": "445300"
        };
        






    var curIndx = 0;
    var mapType = [];
    
        
        
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/map' // 
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                myChart = ec.init(document.getElementById('main')); 
                
                option = {
                   title: {
                       text : '全省各个地市耗电量情况',
                       subtext : '',
                       x:'center'
                   },
                   tooltip : {
                       trigger: 'item',
                       
                   },
                   legend: {
                       orient: 'vertical',
                       x:'right',
                       data:['耗电量']
                   },
                   dataRange: {
                       min: 0,
                       max: 1000,
                       color:['orange','yellow'],
                       text:['高','低'],           // 文本,默认为数值文本
                       calculable : true
                   },
                   series : [
                         {
                            name: '耗电量',
                            type: 'map',
                            mapType: '广州',
                            selectedMode : 'single',
                            itemStyle:{
                               normal:{label:{show:true}},
                               emphasis:{label:{show:true}}
                            },
                            data:[              
                                  {name: '白云区',value: Math.round(Math.random()*1000)},
                                  {name: '天河区',value: Math.round(Math.random()*1000)},
                                  {name: '黄浦区',value: Math.round(Math.random()*1000)}
                                                            
                                 ]
                            }
                         ]
                };
                
              
                var mapGeoData = require('echarts/util/mapData/params');   
                for (var city in cityMap) {
                    mapType.push(city);
                    // 自定义扩展图表类型
                    mapGeoData.params[city] = {
                     getGeoJson: (function (c) {
                     var geoJsonName = cityMap[c];
                     return function (callback) {
                         $.getJSON('js/echarts-2.2.1/doc/example/geoJson/china-main-city/' + geoJsonName + '.json', callback);
                     }
                   })(city)
                  }
                }
                
                
                
                    
                var ecConfig = require('echarts/config');
                function eConsole(param) {
                   var selected=param.selected;  
                   var mapSeries=option.series[0];  
                   var data= [];  
                   var legendData= []; 
                   var name; 
                   for (var p=0,len=mapSeries.data.length; p<len; p++) {  
                       name=mapSeries.data[p].name;  
                       mapSeries.data[p].selected=selected[name];  
                       if (selected[name]) {  
                           alert(name); //这里只是简单的做一个事例说明,弹出用户所选的省,如需做其他的扩展,可以在这里边添加相应的操作   
                       }  
                   }  
                }
                myChart.on(ecConfig.EVENT.MAP_SELECTED, eConsole);
                
                // 为echarts对象加载数据 
                myChart.setOption(option); 
                
            }
        );
        
        
        
        
        
    </script>
</body>

但是一直出现Uncaught TypeError: Cannot read property 'getGeoJson' of undefined这个问题,麻烦帮我解答一下

加载中
返回顶部
顶部