地图之——如何让地图显示出3d感"/>
Echarts地图之——如何让地图显示出3d感
首先,我们正常引入echarts和地图json,然后获取dom初始化echarts,这些步骤省略
然后地图的基本配置我们也是知道通过series的type:map来决定的
series: [{type: 'map',map: 'china', //echarts.registerMap的时候设置的名称aspectScale: 0.85, //长宽比zoom: 1.2, //放大缩小roam: false, //鼠标缩放关闭top: '9%',left: '11%',....}
]
上面几个是常用的地图配置,其他的配置如label、itemstyle、emphasis(高亮)、select(选中)则和其他的图表类似可以看文档,根据需要来修改配置
当我们把该option配置完成时就能看到一个基础的地图了
然后我们给地图添加阴影的效果,与其说是阴影不如说是地图下的错位图层,多加了几层所形成的效果
这里我们通过geo给地图添加其他图层,geo和我们刚才说的series内的配置基本一样
geo: [{map: 'china',aspectScale: 0.85,zoom: 1.2,top: '9%',//***********重点**********距离顶部的位置,每层向下一个百分比left: '11%',roam: false,z: 5,//*********重点*********可以看成是css的z-index,数字越大图层越高,我这里设置了5个,然后页面有点卡,根据实际需要来添加,3个其实就能看出效果了regions: [{ // 隐藏南海诸岛,因为顶层已经添加过了name: '南海诸岛',itemStyle: {normal: {opacity: 0 // 为 0 时不绘制该图形}},label: {show: false}}],itemStyle: {areaColor: '#004b75',//****重点****每个图层的背景色,根据需要来调,由亮变暗,下面的几个颜色也一样borderColor: '#195175',borderWidth: 2,shadowColor: '#0f4c74',shadowOffsetX: 0,shadowOffsetY: 4,shadowBlur: 10,},emphasis: {......},select: {......},tooltip: {show: false},},{map: 'china',aspectScale: 0.85,zoom: 1.2,top: '10.5%',//根据自己需要来设置left: '11%',roam: false,z: 4,//变小,也就是被压在下面itemStyle: {areaColor: '#004b75',//记得改颜色borderColor: '#195175',borderWidth: 2,shadowColor: '#0f4c74',shadowOffsetX: 0,shadowOffsetY: 4,shadowBlur: 10,},......//其他的配置一样,重复添加},{.....修改上述的几个配置,满足自己的需要},...
]
这样我们在原有图层的基础上添加了几层阴影效果,这样就会有3d的感觉了
更多推荐
Echarts地图之——如何让地图显示出3d感
发布评论