一种是map3D
一种是geo3D + series中的内容(比如bar3D、scatter3D)
具体配置Documentation - Apache EChartshttps://echarts.apache.org/zh/option-gl.html#series-bar3D.coordinateSystem中的GL配置中
需要强调的是:map3D可以使用 this.chart.on('click', 回调函数);方法获取点击内容,而geo3D是不可以的。
所以我们如果想用点击事件,并且还想在地图上做一些散点,圆柱。可以map3D和geo3D同时使用,将geo3D中show属性设为false隐藏就可以了
参数:
mapName
地图名称,在 geo 组件或者 map 图表类型中设置的 map 对应的就是该值。
opt
geoJSON 可选。GeoJson 格式的数据,具体格式见 GeoJSON。可以是 JSON 字符串,也可以是解析得到的对象。这个参数也可以写为 geoJson,效果相同。
svg 可选。从 v5.1.0 开始支持SVG 格式的数据。可以是字符串,也可以是解析得到的 SVG DOM 对象。更多信息参见 SVG 底图。
specialAreas 可选。将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看。只在 geoJSON 中生效,svg 中不生效。
DataV.GeoAtlas地理小工具系列
但是需要注意一点:阿里生成的china数据在map3d和geo3d上是无法显示名称的,但是省份或者市是可以的。这个地方实在太坑了!因为这个问题找了半天时间,一定要注意!
配置地图的时候最好还是按着官方文档配置,map3D和平面地图的配置有略微不同的。
这里说一下option中比较常用的map3D和geo3D配置
viewControl: {
alpha: 70, //视角绕 x 轴,即上下旋转的角度。配合 beta 可以控制视角的方向。
beta: 5 //视角绕 y 轴,即左右旋转的角度。
},
top: 0, //组件的视图离容器四个方向的距离。
left: 0,
right: 0,
bottom: 0,
center: [0, 0, 0] //视角中心点,旋转也会围绕这个中心点旋转,默认为[0,0,0]。
label: {
show: true, //是否显示标签。
formatter: params => { //标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 \n换行。
return params.name;
},
textStyle: { //标签的字体样式。
color: '#fff', //字体颜色
borderWidth: 1, //字体边框宽度
borderColor: 'red', //字体边框颜色,注意:使用此属性需要设置borderWidth
fontFamily: 'sans-serif', //文字的字体系列。
fontSize: '12',//文字的字体大小。
fontWeight: 500 //文字字体的粗细。
},
emphasis: { //鼠标悬停时候的样式
show: true,
textStyle: {
color: '#fff'
}
}
},
itemStyle: {
color: '#387BFF', //图形的颜色。地图中就是板块的颜色
opacity: 1, //透明度
borderColor: '#fff', //边框颜色
borderWidth: 0.5, //边框宽度
emphasis: { //鼠标悬停的样式
color: '#7BA8FF',
borderColor: '#fff',
borderWidth: 0.5
}
},
如果需要使用scatter3D、bar3D就需要geo3D配合使用
bar3D Documentation - Apache EChartshttps://echarts.apache.org/zh/option-gl.html#series-bar3D
scatter3D Documentation - Apache EChartshttps://echarts.apache.org/zh/option-gl.html#series-scatter3D