关于map示例的问题

scooyy 发布于 2013/11/07 16:11
阅读 1K+
收藏 0

您好,我根据理解写了下面的代码,但总不对,估计是理解的不对,请高手指正,谢谢。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>MAP</title>
    <script src="js/esl.js"></script>
</head>

<body>
    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    
    <script type="text/javascript">
    require.config({
        paths:{
            echarts:'./js/echarts-map',
            'echarts/chart/map' : './js/echarts-map',
        }
    });
    
    require(
        [
            'echarts',
        ],
        function(ec) {
            var myChart = ec.init(document.getElementById('main'));
            var option = {
            series : [
                {
                    name: 'Map',
                    type: 'map',
                    mapLocation: {
                        x : 'left',
                        y : 'top',
                        height : 500
                    },
                    selectedMode: 'multiple',
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                width: 2,
                                color: '#b88608'
                            },
                            areaStyle: {
                                color: (function(){
                                    var zrColor = require('zrender/tool/color');
                                    return zrColor.getLinearGradient(
                                        0, 0, 500, 500,
                                        [[0, '#32cd32'],[0.5, '#afdd00'],[1, '#ffff77']]
                                    )
                                })()
                            },
                            label: {
                                show: false
                            }
                        },
                        emphasis: {                 // 也是选中样式
                            lineStyle: {
                                width: 2,
                                color: '#fff'
                            },
                            areaStyle: {
                                color: '#32cd32'
                            },
                            label: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        }
                    },
                    data:[
                         {
                             name: '内蒙古',
                             value: Math.round(Math.random()*1000),
                             itemStyle: {
                                normal: {
                                    lineStyle: {
                                        width: 2,
                                        color: 'blue'
                                    },
                                    areaStyle: {
                                        color: '#ff7d00'
                                    },
                                    label: {
                                        show: true,
                                        textStyle: {
                                            color: '#fff',
                                            fontSize: 15
                                        }
                                    }
                                },
                                emphasis: {                 // 也是选中样式
                                    lineStyle: {
                                        width: 2,
                                        color: '#fff'
                                    },
                                    areaStyle: {
                                        color: '#cd5c5c'
                                    },
                                    label: {
                                        show: false,
                                        textStyle: {
                                            color: 'blue'
                                        }
                                    }
                                }
                            },
                        },
                        {name: '北京',value: Math.round(Math.random()*1000)},
                        {name: '天津',value: Math.round(Math.random()*1000)},
                        {name: '上海',value: Math.round(Math.random()*1000)},
                        {name: '重庆',value: Math.round(Math.random()*1000)},
                        {name: '河北',value: Math.round(Math.random()*1000)},
                        {name: '河南',value: Math.round(Math.random()*1000)},
                        {name: '云南',value: Math.round(Math.random()*1000)},
                        {name: '辽宁',value: Math.round(Math.random()*1000)},
                        {name: '黑龙江',value: Math.round(Math.random()*1000)},
                        {name: '湖南',value: Math.round(Math.random()*1000)},
                        {name: '安徽',value: Math.round(Math.random()*1000)},
                        {name: '山东',value: Math.round(Math.random()*1000)},
                        {name: '江苏',value: Math.round(Math.random()*1000)},
                        {name: '浙江',value: Math.round(Math.random()*1000)},
                        {name: '江西',value: Math.round(Math.random()*1000)},
                        {name: '湖北',value: Math.round(Math.random()*1000)},
                        {name: '广西',value: Math.round(Math.random()*1000)},
                        {name: '甘肃',value: Math.round(Math.random()*1000)},
                        {name: '山西',value: Math.round(Math.random()*1000)},
                        {name: '新疆',value: Math.round(Math.random()*1000)},
                        {name: '陕西',value: Math.round(Math.random()*1000)},
                        {name: '吉林',value: Math.round(Math.random()*1000)},
                        {name: '福建',value: Math.round(Math.random()*1000)},
                        {name: '贵州',value: Math.round(Math.random()*1000)},
                        {name: '广东',value: Math.round(Math.random()*1000)},
                        {name: '青海',value: Math.round(Math.random()*1000)},
                        {name: '西藏',value: Math.round(Math.random()*1000)},
                        {name: '四川',value: Math.round(Math.random()*1000)},
                        {name: '宁夏',value: Math.round(Math.random()*1000)},
                        {name: '海南',value: Math.round(Math.random()*1000)},
                        {name: '台湾',value: Math.round(Math.random()*1000)},
                        {name: '香港',value: Math.round(Math.random()*1000)},
                        {name: '澳门',value: Math.round(Math.random()*1000)}
                    ]
                }
            ]
        }    
    });
    </script>
</body>
</html>
加载中
0
Kener-林峰
Kener-林峰
require( 
        [ 
            'echarts', 
        ], 

改成
require( 
        [ 
            'echarts', 

            'echarts/chart/map'

        ], 

0
s
scooyy
您好,谢谢,改过来ok了,但显示的不是全国图,而是上图中的样子,请问是怎么回事儿,谢谢。
0
s
scooyy
林峰您好:根据您的指导,我修改我的代码成如下这样:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>MAP</title>
    <script src="js/esl.js"></script>
</head>

<body>
    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    
    <script type="text/javascript">
    require.config(
    {
        paths:
        {
            echarts:'./js/echart',
            'echarts/chart/map' : './js/echarts-map',
        }
    });
    
    require(
        [
            'echarts',
            'echarts/chart/map'
        ],

        function(ec)
        {
            var myChart = ec.init(document.getElementById('main'));
            myChart.setOption(option);
            var option =
            {
            series : [
                {
                    name: 'Map',
                    type: 'map',
                    mapLocation:
                     {
                        x : 'left',
                        y : 'top',
                        height : 500
                    },
                    selectedMode: 'multiple',
                    itemStyle:
                    {
                        normal:
                        {
                            lineStyle:
                            {
                                width: 2,
                                color: '#b88608'
                            },
                            areaStyle:
                            {
                                color: (function()
                                {
                                    var zrColor = require('zrender/tool/color');
                                    return zrColor.getLinearGradient(
                                        0, 0, 500, 500,
                                        [[0, '#32cd32'],[0.5, '#afdd00'],[1, '#ffff77']]
                                    )
                                })()
                            },
                            label:
                            {
                                show: false
                            }
                        },
                        emphasis:
                        {                 // 也是选中样式
                            lineStyle:
                             {
                                width: 2,
                                color: '#fff'
                            },
                            areaStyle:
                            {
                                color: '#32cd32'
                            },
                            label:
                            {
                                show: true,
                                textStyle:
                                {
                                    color: '#fff'
                                }
                            }
                        }
                    },
                    data:[
                         {
                             name: '内蒙古',
                             value: Math.round(Math.random()*1000),
                             itemStyle:
                             {
                                normal:
                                {
                                    lineStyle:
                                    {
                                        width: 2,
                                        color: 'blue'
                                    },
                                    areaStyle:
                                    {
                                        color: '#ff7d00'
                                    },
                                    label:
                                    {
                                        show: true,
                                        textStyle:
                                        {
                                            color: '#fff',
                                            fontSize: 15
                                        }
                                    }
                                },
                                emphasis:
                                {                 // 也是选中样式
                                    lineStyle:
                                    {
                                        width: 2,
                                        color: '#fff'
                                    },
                                    areaStyle:
                                    {
                                        color: '#cd5c5c'
                                    },
                                    label:
                                    {
                                        show: false,
                                        textStyle:
                                        {
                                            color: 'blue'
                                        }
                                    }
                                }
                            },
                        },
                        {name: '北京',value: Math.round(Math.random()*1000)},
                        {name: '天津',value: Math.round(Math.random()*1000)},
                        {name: '上海',value: Math.round(Math.random()*1000)},
                        {name: '重庆',value: Math.round(Math.random()*1000)},
                        {name: '河北',value: Math.round(Math.random()*1000)},
                        {name: '河南',value: Math.round(Math.random()*1000)},
                        {name: '云南',value: Math.round(Math.random()*1000)},
                        {name: '辽宁',value: Math.round(Math.random()*1000)},
                        {name: '黑龙江',value: Math.round(Math.random()*1000)},
                        {name: '湖南',value: Math.round(Math.random()*1000)},
                        {name: '安徽',value: Math.round(Math.random()*1000)},
                        {name: '山东',value: Math.round(Math.random()*1000)},
                        {name: '江苏',value: Math.round(Math.random()*1000)},
                        {name: '浙江',value: Math.round(Math.random()*1000)},
                        {name: '江西',value: Math.round(Math.random()*1000)},
                        {name: '湖北',value: Math.round(Math.random()*1000)},
                        {name: '广西',value: Math.round(Math.random()*1000)},
                        {name: '甘肃',value: Math.round(Math.random()*1000)},
                        {name: '山西',value: Math.round(Math.random()*1000)},
                        {name: '新疆',value: Math.round(Math.random()*1000)},
                        {name: '陕西',value: Math.round(Math.random()*1000)},
                        {name: '吉林',value: Math.round(Math.random()*1000)},
                        {name: '福建',value: Math.round(Math.random()*1000)},
                        {name: '贵州',value: Math.round(Math.random()*1000)},
                        {name: '广东',value: Math.round(Math.random()*1000)},
                        {name: '青海',value: Math.round(Math.random()*1000)},
                        {name: '西藏',value: Math.round(Math.random()*1000)},
                        {name: '四川',value: Math.round(Math.random()*1000)},
                        {name: '宁夏',value: Math.round(Math.random()*1000)},
                        {name: '海南',value: Math.round(Math.random()*1000)},
                        {name: '台湾',value: Math.round(Math.random()*1000)},
                        {name: '香港',value: Math.round(Math.random()*1000)},
                        {name: '澳门',value: Math.round(Math.random()*1000)}
                    ]
                }
            ]
        }    
    });
    </script>
</body>
</html>

浏览器报下面错误,请问是什么原因?谢谢

消息: 'series' 为空或不是对象

行: 99
字符: 201495
代码: 0
URI: http://192.168.1.131/echarts/doc/example/www/js/echarts.js

返回顶部
顶部