echarts报错: Uncaught TypeError: i.getOtherAxis is not a function
<!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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(9)
你们是不是也用了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;
};
怎么解决的?
求删帖,又没解决问题分分享,还占搜索
..
也是这样的问题哦。
还没有发现原因。
解决了,重新做了一遍
怎么解决的, 我发现我也遇到了这样的问题。
解决了,重新做了一遍
楼主解决了吗?