<!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>
楼主解决了吗?解决了,重新做了一遍怎么解决的,我发现我也遇到了这样的问题。解决了,重新做了一遍
楼主解决了吗,我也遇到了相同的问题
<spanstyle="color:#000080;font-weight:bold;">var<spanstyle="color:#660e7a;font-weight:bold;font-style:italic;">mapOption={<spanstyle="color:#660e7a;font-weight:bold;">title:{<spanstyle="color:#660e7a;font-weight:bold;">text:<spanstyle="color:#008000;font-weight:bold;">'',<spanstyle="color:#660e7a;font-weight:bold;">subtext:<spanstyle="color:#008000;font-weight:bold;">'',<spanstyle="color:#660e7a;font-weight:bold;">left:<spanstyle="color:#008000;font-weight:bold;">'center'<spanstyle="color:#008000;font-weight:bold;">},<spanstyle="color:#660e7a;font-weight:bold;">tooltip:{<spanstyle="color:#660e7a;font-weight:bold;">trigger:<spanstyle="color:#008000;font-weight:bold;">'item'<spanstyle="color:#008000;font-weight:bold;">},<spanstyle="color:#660e7a;font-weight:bold;">legend:{<spanstyle="color:#660e7a;font-weight:bold;">show:<spanstyle="color:#000080;font-weight:bold;">false<spanstyle="color:#000080;font-weight:bold;">},<spanstyle="color:#660e7a;font-weight:bold;">visualMap:{<spanstyle="color:#660e7a;font-weight:bold;">show:<spanstyle="color:#000080;font-weight:bold;">false<spanstyle="color:#000080;font-weight:bold;">},<spanstyle="color:#660e7a;font-weight:bold;">toolbox:{<spanstyle="color:#660e7a;font-weight:bold;">show:<spanstyle="color:#000080;font-weight:bold;">false<spanstyle="color:#000080;font-weight:bold;">},<spanstyle="color:#660e7a;font-weight:bold;">series:[{<spanstyle="color:#660e7a;font-weight:bold;">name:<spanstyle="color:#008000;font-weight:bold;">'<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">车享家<spanstyle="color:#008000;font-weight:bold;">',<spanstyle="color:#660e7a;font-weight:bold;">type:<spanstyle="color:#008000;font-weight:bold;">'map',<spanstyle="color:#660e7a;font-weight:bold;">map:<spanstyle="color:#008000;font-weight:bold;">'china',<spanstyle="color:#660e7a;font-weight:bold;">roam:<spanstyle="color:#000080;font-weight:bold;">false,<spanstyle="color:#660e7a;font-weight:bold;">itemStyle:{<spanstyle="color:#660e7a;font-weight:bold;">normal:{<spanstyle="color:#660e7a;font-weight:bold;">borderColor:<spanstyle="color:#008000;font-weight:bold;">'rgba(255,255,255,0.8)',<spanstyle="color:#660e7a;font-weight:bold;">areaColor:<spanstyle="color:#008000;font-weight:bold;">'rgba(255,255,255,0.4)',},<spanstyle="color:#660e7a;font-weight:bold;">emphasis:{<spanstyle="color:#660e7a;font-weight:bold;">areaColor:<spanstyle="color:#008000;font-weight:bold;">'rgba(255,255,255,0.8)',}},<spanstyle="color:#660e7a;font-weight:bold;">markPoint:{<spanstyle="color:#660e7a;font-weight:bold;">symbol:<spanstyle="color:#008000;font-weight:bold;">'circle',<spanstyle="color:#7a7a43;">symbolSize:<spanstyle="color:#000080;font-weight:bold;">function(val){<spanstyle="color:#000080;font-weight:bold;">returnval+val/<spanstyle="color:#0000ff;">100;},<spanstyle="color:#660e7a;font-weight:bold;">label:{<spanstyle="color:#660e7a;font-weight:bold;">normal:{<spanstyle="color:#660e7a;font-weight:bold;">show:<spanstyle="color:#000080;font-weight:bold;">false,<spanstyle="color:#660e7a;font-weight:bold;">position:<spanstyle="color:#008000;font-weight:bold;">'right',<spanstyle="color:#660e7a;font-weight:bold;">formatter:<spanstyle="color:#008000;font-weight:bold;">'{b}'<spanstyle="color:#008000;font-weight:bold;">},<spanstyle="color:#660e7a;font-weight:bold;">emphasis:{<spanstyle="color:#660e7a;font-weight:bold;">show:<spanstyle="color:#000080;font-weight:bold;">false,}},<spanstyle="color:#660e7a;font-weight:bold;">itemStyle:{<spanstyle="color:#660e7a;font-weight:bold;">normal:{<spanstyle="color:#660e7a;font-weight:bold;">color:<spanstyle="color:#008000;font-weight:bold;">'#fff',<spanstyle="color:#660e7a;font-weight:bold;">borderColor:<spanstyle="color:#008000;font-weight:bold;">'#fff',}},<spanstyle="color:#660e7a;font-weight:bold;">data:[]},<spanstyle="color:#660e7a;font-weight:bold;">geoCoord:{<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">西藏省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">91.11,<spanstyle="color:#0000ff;">29.97],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">上海市<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">121.48,<spanstyle="color:#0000ff;">31.22],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">福建省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">119.3,<spanstyle="color:#0000ff;">26.08],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">广东省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">113.23,<spanstyle="color:#0000ff;">23.16],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">山西省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">112.53,<spanstyle="color:#0000ff;">37.87],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">云南省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">102.73,<spanstyle="color:#0000ff;">25.04],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">深圳市<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">114.07,<spanstyle="color:#0000ff;">22.62],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">辽宁省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">123.38,<spanstyle="color:#0000ff;">41.8],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">吉林省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">125.35,<spanstyle="color:#0000ff;">43.88],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">江西省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">115.89,<spanstyle="color:#0000ff;">28.68],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">海南省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">109.511909,<spanstyle="color:#0000ff;">18.252847],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">青海省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">101.74,<spanstyle="color:#0000ff;">36.56],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">内蒙古省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">111.65,<spanstyle="color:#0000ff;">40.82],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">四川省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">104.06,<spanstyle="color:#0000ff;">30.67],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">陕西省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">108.95,<spanstyle="color:#0000ff;">34.27],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">重庆市<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">106.54,<spanstyle="color:#0000ff;">29.59],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">江苏省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">118.78,<spanstyle="color:#0000ff;">32.04],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">北京市<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">116.46,<spanstyle="color:#0000ff;">39.92],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">新疆<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">87.68,<spanstyle="color:#0000ff;">43.77],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">浙江省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">120.19,<spanstyle="color:#0000ff;">30.26],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">山东省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">117,<spanstyle="color:#0000ff;">36.65],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">天津<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">117.2,<spanstyle="color:#0000ff;">39.13],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">河南省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">113.65,<spanstyle="color:#0000ff;">34.76],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">黑龙江省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">126.63,<spanstyle="color:#0000ff;">45.75],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">河北省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">114.48,<spanstyle="color:#0000ff;">38.03],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">湖南省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">113,<spanstyle="color:#0000ff;">28.21],<spanstyle="color:#008000;font-weight:bold;">"<spanstyle="color:#008000;font-weight:bold;font-family:'宋体';">湖北省<spanstyle="color:#008000;font-weight:bold;">":[<spanstyle="color:#0000ff;">114.31,<spanstyle="color:#0000ff;">30.52]}}]};
<imgheight="634"src="https://static.oschina.net/uploads/space/2017/0401/153247_qsTC_2965162.png"width="766">
也是这样的问题哦。
还没有发现原因。
..
求删帖,又没解决问题分分享,还占搜索
烦人,不说怎么解决的
怎么解决的?
你们是不是也用了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){
returnparam.value;
},
textStyle:{
color:'#000',
fontSize:10,
baseline:'bottom'
}
}
}
},
data:convertData(data)
},
忽略不重要的属性,重点是convertData()方法
varconvertData=function(data){
varres=[];
for(vari=0;i<data.length;i++){
vargeoCoord=geoCoordMap[data[i].name];
if(geoCoord){
res.push({
name:data[i].name,
coord:[geoCoord[0],geoCoord[1]],
value:data[i].value
});
}
}
returnres;
};
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。