echarts报错: Uncaught TypeError: i.getOtherAxis is not a function

llxx00 发布于 2016/10/18 20:39
阅读 7K+
收藏 0
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DGnY1nQZcu2e4nytZcpGYRXgWUV5Xqxp"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>  
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
      <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
       
    option = {
        bmap: {
            center: [118.1017000000, 36.0737400000],
            zoom: 8,
            roam: true,
            mapStyle: {
                styleJson: [{
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": {
                        "color": "#044161"
                    }
                }, {
                    "featureType": "land",
                    "elementType": "all",
                    "stylers": {
                        "color": "#004981"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry",
                    "stylers": {
                        "color": "#064f85"
                    }
                }, {
                    "featureType": "railway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "highway",
                    "elementType": "geometry",
                    "stylers": {
                        "color": "#004981"
                    }
                }, {
                    "featureType": "highway",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#005b96",
                        "lightness": 1
                    }
                }, {
                    "featureType": "highway",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "arterial",
                    "elementType": "geometry",
                    "stylers": {
                        "color": "#004981"
                    }
                }, {
                    "featureType": "arterial",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#00508b"
                    }
                }, {
                    "featureType": "poi",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "green",
                    "elementType": "all",
                    "stylers": {
                        "color": "#056197",
                        "visibility": "off"
                    }
                }, {
                    "featureType": "subway",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "manmade",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "local",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "arterial",
                    "elementType": "labels",
                    "stylers": {
                        "visibility": "off"
                    }
                }, {
                    "featureType": "boundary",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": "#029fd4"
                    }
                }, {
                    "featureType": "building",
                    "elementType": "all",
                    "stylers": {
                        "color": "#1a5787"
                    }
                }, {
                    "featureType": "label",
                    "elementType": "all",
                    "stylers": {
                        "visibility": "off"
                    }
                }]
            }
        },
        color: ['gold', 'aqua', 'lime'],
                title: {
                    text: '山东省高速出行情况',
                    x: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function(v) {
                        return v[1].replace(':', ' > ');
                    }
                },
         
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    x: 'right',
                    y: 'center',
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
         series: [{
                        name: '开始站之华山收费站',
                        type: 'map',
                        mapType: 'none',
                        center: [117.04042, 36.73925],
                        data: [],
                        geoCoord: {
                            '峡山收费站': [119.47122, 36.63167],
                            '田庄收费站': [119.75134, 36.7775]
                        },


                        markLine: {
                            smooth: true,
                            effect: {
                                show: true,
                                scaleSize: 1,
                                period: 30,
                                color: '#fff',
                                shadowBlur: 10
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 1,
                                    lineStyle: {
                                        type: 'solid',
                                        shadowBlur: 10
                                    }
                                }
                            },
                            data: [
                                [{ name: '华山收费站' }, { name: '临沂收费站', value: 2 }],
                                [{ name: '华山收费站' }, { name: '兖州收费站', value: 148 }],
                                [{ name: '华山收费站' }, { name: '章丘收费站', value: 86 }]


                            ]
                        },
                        markPoint: {
                            symbol: 'Circle',
                            symbolSize: 10,
                            effect: {
                                show: true,
                                shadowBlur: 0
                            },
                            itemStyle: {
                                normal: {
                                    label: { show: false }
                                }
                            },
                            data: [
                                { name: '兖州收费站', value: 148 },
                                { name: '章丘收费站', value: 86 }
                            ]
                        }
                    }, {
                        name: '结束站之黄岛收费站',
                        type: 'map',
                        mapType: 'none',
                        data: [],
                        markLine: {
                            smooth: true,
                            effect: {
                                show: true,
                                scaleSize: 1,
                                period: 30,
                                color: '#fff',
                                shadowBlur: 10
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 1,
                                    lineStyle: {
                                        type: 'solid',
                                        shadowBlur: 10
                                    }
                                }
                            },
                            data: [
                                [{ name: '淄博新区收费站' }, { name: '黄岛收费站', value: 1 }],
                                [{ name: '邹城收费站' }, { name: '黄岛收费站', value: 1 }]
                            ]
                        },
                        markPoint: {
                            symbol: 'Circle',
                            symbolSize: 10,
                            effect: {
                                show: true,
                                shadowBlur: 0
                            },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: false
                                    }
                                }
                            },
                            data: [
                                { name: '淄博新区收费站', value: 1 },
                                { name: '邹城收费站', value: 1 }
                            ]
                        }


                    }, {
                        name: '开始站之青岛东收费站',
                        type: 'map',
                        mapType: 'none',
                        data: [],
                        markLine: {
                            smooth: true,
                            effect: {
                                show: true,
                                scaleSize: 1,
                                period: 30,
                                color: '#fff',
                                shadowBlur: 10
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 1,
                                    lineStyle: {
                                        type: 'solid',
                                        shadowBlur: 10
                                    }
                                }
                            },
                            data: [
                                [{ name: '青岛东收费站' }, { name: '惜福收费站', value: 51 }],
                                [{ name: '青岛东收费站' }, { name: '济南北收费站', value: 1 }]
                            ]
                        },
                        markPoint: {
                            symbol: 'Circle',
                            symbolSize: 10,
                            effect: {
                                show: true,
                                shadowBlur: 0
                            },
                            itemStyle: {
                                normal: {
                                    label: { show: false }
                                }
                            },
                            data: [
                                { name: '惜福收费站', value: 51 },
                                { name: '济南北收费站', value: 1 }
                            ]
                        }
                    }






                ],
 




        };




        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
加载中
0
whiney
whiney
楼主解决了吗?
0
l
llxx00
解决了,重新做了一遍
h
heroin2017
怎么解决的, 我发现我也遇到了这样的问题。
0
l
llxx00
解决了,重新做了一遍
0
瓦牛瓦牛

楼主解决了吗,我也遇到了相同的问题

var mapOption = { title: { text: '', subtext: '', left: 'center'  }, tooltip: { trigger: 'item'  }, legend: { show: false  }, visualMap: { show: false  }, toolbox: { show: false  }, series: [
        { name: '车享家', type: 'map', map: 'china', roam: false, itemStyle: { normal: { borderColor: 'rgba(255,255,255,0.8)', areaColor: 'rgba(255,255,255,0.4)',
                }, emphasis: { areaColor: 'rgba(255,255,255,0.8)',
                }
            }, markPoint:{ symbol: 'circle', symbolSize: function (val) { return val + val / 100;
                }, label: { normal: { show: false, position: 'right', formatter: '{b}'  }, emphasis:{ show: false,
                    }
                }, itemStyle: { normal: { color: '#fff', borderColor: '#fff',
                    }
                }, data: []
            }, geoCoord: { "西藏省":[91.11,29.97], "上海市":[121.48,31.22], "福建省":[119.3,26.08], "广东省":[113.23,23.16], "山西省":[112.53,37.87], "云南省":[102.73,25.04], "深圳市":[114.07,22.62], "辽宁省":[123.38,41.8], "吉林省":[125.35,43.88], "江西省":[115.89,28.68], "海南省":[109.511909,18.252847], "青海省":[101.74,36.56], "内蒙古省":[111.65,40.82], "四川省":[104.06,30.67], "陕西省":[108.95,34.27], "重庆市":[106.54,29.59], "江苏省":[118.78,32.04], "北京市":[116.46,39.92], "新疆":[87.68,43.77], "浙江省":[120.19,30.26], "山东省":[117,36.65], "天津":[117.2,39.13], "河南省":[113.65,34.76], "黑龙江省":[126.63,45.75], "河北省":[114.48,38.03], "湖南省":[113,28.21], "湖北省":[114.31,30.52]
            }

        }
    ]
};

0
h
heroin2017

也是这样的问题哦。

还没有发现原因。

0
xiejinjie
xiejinjie

求删帖,又没解决问题分分享,还占搜索

0
huyujieer
huyujieer

烦人,不说怎么解决的

0
浩瀚天空01
浩瀚天空01

怎么解决的?

0
夏天_Leo
夏天_Leo

你们是不是也用了markPoint属性?

可能是漏掉了marker需要对应的坐标系

可能是漏掉了marker需要对应的坐标系

可能是漏掉了marker需要对应的坐标系

我先说下我自己的情况:用的echarts3.8.4,并且用的是原先官网可以下载的《城市1.js》的地图文件 + 《城市2.json》的GeoJSON文件 拼接而成的 《城市2.js》文件用作series => "type" = "map";的例子 

因为我是具体实现的地图区块上每个feature都有一个对应的label展示,需要依赖marker做成效果(肯定有其他更好的办法,但是此时比较赶时间,所以未深究!),所以我的marker需要经纬度作为地理坐标系,所以是这样的

          markPoint:{
                    symbolSize:8,
                    itemStyle:{
                        normal:{
                            color:'transparent',
                            label:{
                                formatter:function(param){
                                    return param.value;
                                },
                                textStyle:{
                                    color:'#000',
                                    fontSize:10,
                                    baseline:'bottom'
                                }
                            }
                        }
                    },
                    data:convertData(data)
                },

 

忽略不重要的属性,重点是convertData()方法

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                coord:[geoCoord[0],geoCoord[1]],
                value: data[i].value
            });
        }
    }
    return res;
};

返回顶部
顶部