echarts svg地图扩展不显示

bewexb 发布于 2014/11/14 11:36
阅读 455
收藏 0

想试一下,echarts中地图扩展的例子,但是一直显示不出来,报错信息,提示自定义的地图类型错误,报错如下:

Uncaught TypeError: Cannot set property 'zidingyi' of undefined


代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>地图扩展</title>


    <script type="text/javascript" src="js/jquery.min.js"></script>   
    <script type="text/javascript" src="js/echarts/esl.js"></script>
    <script type="text/javascript" src="js/echarts/echarts.js"></script>
   
<body>


<div id="main" style="padding-left: 20px;padding-right: 20px;padding-top: 30px;padding-bottom: 30px;height:100%;"></div>

 <script type="text/javascript">
   
   
  require.config({
            paths: {
                'echarts': 'js/echarts/echarts',
                'echarts/chart/map': 'js/echarts/echarts-map'
            }
        });
 
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/map'
            ],
 
            function (ec) {
           
    require('echarts/util/mapData/params').params.zidingyi = {
        getGeoJson: function (callback) {
            $.ajax({
                url: "svg/baidu-building.svg",
                dataType: 'xml',
                success: function(xml) {
                    callback(xml)
                }
            });
        }
    }
    
    var myChart = ec.init(document.getElementById('main'));
    
    var option = {
        backgroundColor:'#eee',
        title : {
            text : '百度大厦',
            textStyle: {
                color: '#000'
            }
        },
        tooltip : {
            trigger: 'item',
            formatter: '{b}'
        },
        color: ['rgba(218, 70, 214, 1)', 'rgba(100, 149, 237, 1)', 'green'],
        legend: {
            data: ['嘿嘿', '高经', '会议室']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        series : [
            {
                name: '嘿嘿',
                type: 'map',
                mapType: 'zidingyi',
                roam:true,
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data: [],
                geoCoord: {
                    '叮叮': [39, 45],
                    '小兑儿': [71, 45],
                    '胡瑶': [195, 29],
                    '祖明': [195, 44],
                    '林峰': [195, 60],
                    '安晨': [210, 44],
                    '功': [210, 60],
                    '立新': [144, 59],
                    '诗才': [195, 71],
                    '黄競': [210, 59],
                    '浪宇': [150, 55],
                    '晓青': [210, 71],
                    '毅楠': [222, 59],
                    '朝霞': [222, 71],
                    '武琦': [231, 71],
                    '严萍': [231, 46],
                    '绍波': [231, 59],
                    '开放': [488, 43],
                    '兵兵': [488, 60],
                    '孟珂': [522, 43],
                    '辉耀': [522, 60],
                    '佳璐': [488, 23],
                    '新乐': [522, 23],
                    '大佛': [165, 29],
                    '周玉': [165, 44],
                    '令君': [165, 60],
                    '佳璐': [165, 71],
                    'erik': [222, 44],
                    '爽哥': [240, 60],
                    '雷哥': [240, 44],
                    '坤哥': [176, 59],
                    '刚哥': [176, 71],
                    '高经': [545, 54],
                    '邱华': [468, 23],
                    '饥渴难耐的辉辉': [473, 40],
                    '大发': [500, 40],
                    '淼童': [473, 60],
                    '亚江': [500, 60],
                    '莉姐': [530, 70],
                    '红启': [570, 54],
                    '五福降中天': [373, 173],
                    'csfe': [500, 54],
                    '得胜令': [253, 179],
                    '西湖春': [496, 179],
                    '望江南': [72, 203],
                    '庆千秋': [86, 203],
                    '过江龙': [289, 32],
                    '天下乐': [289, 50],
                    '万年欢': [687, 24],
                    '浣溪沙': [637, 203],
                    '清平乐': [649, 203],
                    '四和春': [663, 203],
                    '杏花天': [676, 203]
                },
                markPoint : {
                    symbolSize : 3,
                    data : [
                        {name: '叮叮'},
                        {name: '小兑儿'},
                        {name: '胡瑶'},
                        {name: '高经'},
                        {name: 'erik'},
                        {name: '祖明'},
                        {name: '林峰'},
                        {name: '坤哥'},
                        {name: '刚哥'},
                        {name: '爽哥'},
                        {name: '雷哥'},
                        {name: '邱华'},
                        {name: '淼童'},
                        {name: '亚江'},
                        {name: '莉姐'},
                        {name: '大发'},
                        {name: '饥渴难耐的辉辉'},
                        {name: '红启'},
                        {name: '安晨'},
                        {name: '功'},
                        {name: '立新'},
                        {name: '诗才'},
                        {name: '黄競'},
                        {name: '晓青'},
                        {name: '毅楠'},
                        {name: '浪宇'},
                        {name: '朝霞'},
                        {name: '严萍'},
                        {name: '武琦'},
                        {name: '绍波'},
                        {name: '开放'},
                        {name: '兵兵'},
                        {name: '孟珂'},
                        {name: '辉耀'},
                        {name: '佳璐'},
                        {name: '新乐'},
                        {name: '周玉'},
                        {name: '令君'},
                        {name: '佳璐'}
                    ]
                },
                markLine : {
                    smooth:true,
                    effect : {
                        show: true,
                        scaleSize: 1,
                        period: 20,
                        color: '#fff',
                        shadowBlur: 5
                    },
                    symbol: ['none'],
                    itemStyle : {
                        normal: {
                            borderWidth:1,
                            lineStyle: {
                                type: 'solid'
                            }
                        }
                    },
                    data : [
                        [
                            {name:'erik'},
                            {name:'胡瑶'}
                        ],
                        [
                            {name:'祖明'},
                            {name:'叮叮'}
                        ],
                        [
                            {name:'祖明'},
                            {name:'小兑儿'}
                        ]
                    ]
                }
            },
            {
                name: '高经',
                type: 'map',
                mapType: 'zidingyi',
                roam:true,
                symbol: ['none'],
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data: [],
                markLine : {
                    smooth:true,
                    effect : {
                        show: true,
                        scaleSize: 1,
                        period: 20,
                        color: '#fff',
                        shadowBlur: 5
                    },
                    itemStyle : {
                        normal: {
                            borderWidth:1,
                            lineStyle: {
                                type: 'solid'
                            }
                        }
                    },
                    data : [
                        [
                            {name:'高经'},
                            {name:'洗手间', geoCoord:[440, 179]}
                        ],
                        [
                            {name:'高经'},
                            {name:'洗手间', geoCoord:[637, 53]}
                        ],
                        [
                            {name:'高经'},
                            {name:'洗手间', geoCoord:[637, 179]}
                        ],
                        [
                            {name:'高经'},
                            {name:'洗手间', geoCoord:[307, 179]}
                        ]
                    ]
                }
            },
            {
                name: '会议室',
                type: 'map',
                mapType: 'zidingyi',
                roam:true,
                itemStyle:{
                    normal:{label:{show:true}},
                    emphasis:{label:{show:true}}
                },
                data:[],
                markPoint : {
                    symbol:'circle',
                    symbolSize : 2,
                    color: 'green',
                    data : []
                },
                markLine : {
                    smooth:true,
                    effect : {
                        show: true,
                        scaleSize: 1,
                        period: 20,
                        color: '#fff',
                        shadowBlur: 5
                    },
                    symbol: ['none'],
                    itemStyle : {
                        normal: {
                            borderWidth:1,
                            lineStyle: {
                                type: 'solid'
                            }
                        }
                    },
                    data : [
                        [
                            {name:'淼童'},
                            {name:'五福降中天'}
                        ],
                        [
                            {name:'大发'},
                            {name:'西湖春'}
                        ],
                        [
                            {name:'林峰'},
                            {name:'望江南'}
                        ],
                        [
                            {name:'莉姐'},
                            {name:'杏花天'}
                        ],
                        [
                            {name:'雷哥'},
                            {name:'过江龙'}
                        ],
                        [
                            {name:'毅楠'},
                            {name:'天下乐'}
                        ],
                        [
                            {name:'红启'},
                            {name:'万年欢'}
                        ],
                        [
                            {name:'亚江'},
                            {name:'浣溪沙'}
                        ],
                        [
                            {name:'爽哥'},
                            {name:'得胜令'}
                        ],
                        [
                            {name:'饥渴难耐的辉辉'},
                            {name:'万年欢'}
                        ]
                    ]
                }
            },
            {
                type: 'map',
                mapType: 'zidingyi',
                data: [],
                markPoint: {
                    symbol: 'emptyCircle',
                    effect: {
                        show: true,
                        color: 'rgba(218, 70, 214, 1)'
                    },
                    data: [
                        {name: '叮叮'},
                        {name: '小兑儿'},
                        {name: '胡瑶'},
                        {name: '淼童'}
                    ]
                }
            },
            {
                type: 'map',
                mapType: 'zidingyi',
                data: [],
                markPoint: {
                    symbol: 'emptyCircle',
                    effect: {
                        show: true,
                        color: 'rgba(100, 149, 237, 1)'
                    },
                    data: [
                        {name: '高经'}
                    ]
                }
            },
            {
                type: 'map',
                mapType: 'zidingyi',
                data: [],
                markPoint: {
                    symbol: 'emptyCircle',
                    symbolSize : 15,
                    effect: {
                        show: true,
                        color: 'green'
                    },
                    data: [
                        {name: '五福降中天'}
                    ]
                }
            }
        ]
    };
    
    myChart.setOption(option);
    
            }
        );


   

  
    </script>
   
   
</body>

</html>

加载中
返回顶部
顶部