Echarts3 有比较多的改动,官方没有实例来展示地图多级下钻,虽然还是支持的,但是坑比较多
option 如下:
var option = {
title : {
text : '',
x : 'center'
},
tooltip : {
show : true,
trigger : 'item'
},
/* roamController : {
show : true,
x : 'right',
y : 'bottom',
mapTypeControl : {
'china' : true
}
}, */
dataRange : {
show: false,
min : 0,
max : 5000,
color : [ 'orangered', 'yellow', 'lightskyblue' ],
calculable : true
},
series: [{
name: '安徽',
type: 'map',
mapType: '安徽',
label : {
normal : {
show : true
},
emphasis : {
show : true
}
},
itemStyle : {
normal : {
borderWidth : 0,
borderColor : 'rgb(150, 150, 150)',
shadowColor: 'rgba(0, 0, 0, 0.7)',
shadowBlur: 8
},
emphasis : { // 也是选中样式
borderWidth : 0,
color : '#32cd32',
shadowColor: 'rgba(0, 0, 0, 0.7)',
shadowBlur: 8
}
},
roam: true,
selectedMode:'single',
data:[
{"name":"安徽","value":"5211"},
{"name":"湖北","value":"0"},
{"name":"湖南","value":"0"}
] //必须带上 不带报错
}]//必须写进数组 直接写对象报错
};
series 不要使用 map,必须使用 mapType,不然触发了官方推荐的点击事件 mapselectchanged 也得不到想要的值,
data 必须存在,写个空也行,
series 必须写成数组,即使只有一个图
地图 json 文件可以使用 echart2 的也可以使用 3 的,但是 3 的地图文件显示的很不美观,很多都挤到了一起,
以下实例使用的 2 的地图文件
下图使用 iframe, 黑客派社区因为跨域不能显示请直接访问 http://blog.codegather.com/articles/2017/04/21/1492761483180.html
手机游戏源码素材网:http://www.codegather.com
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于