echarts地图立体效果,echarts地图点击事件,echarts地图自定义自定义tooltip

一.地图立体效果

方法1:两层地图叠加

实现原理:geo数组中放入两个地图对象,通过修改zlevel属性以及top,left,right,bottom形成视觉差

配置项参考如下代码:

geo: [{zlevel: 2,top: 96,map: 'map',itemStyle: {color: '#091A51ee',opacity: 1,borderWidth: 2,borderColor: '#16BAFA'},label: {show: true,position: 'top',color: '#fff',fontSize: 14,lineHeight: 16,fontWeight: 'bold',textShadowColor: '#073BDA', // 阴影颜色textShadowBlur: 10, // 阴影模糊程度textShadowOffsetX: 0, // 阴影横向偏移textShadowOffsetY: 4, // 阴影纵向偏移formatter: function({ name }) {return ` ${name}`}},emphasis: {disabled: true, //是否可以被选中label: {show: true,color: '#fff',fontSize: 18,textShadowColor: '',textShadowBlur: 0, // 阴影模糊程度textShadowOffsetX: 0, // 阴影横向偏移textShadowOffsetY: 0 // 阴影纵向偏移},itemStyle: {color: '#01A8F1'}}},{zlevel: 1,map: 'map',itemStyle: {color: '#17418B',opacity: 1,borderWidth: 2,borderColor: '#17418B'},label: {show: false},emphasis: {disabled: false, // 是否可以被选中itemStyle: {color: '#01A8F1'}}}]

方法二:通过echarts-gl实现3d效果

1.需要引入echarts-gl.js文件或者npm下载

2.此方法地图省份的点击事件不生效!!!

3.省份名称需要通过下面代码才能显示出来

formatter: function ({ name }) {

          return ` ${name}`

 }

配置项完整代码如下:

geo3D: {map: "map",roam: true,shading: "color",boxHeight: 100,regionHeight: 8,itemStyle: {color: "#163C99",opacity: 0.4,borderWidth: 1,borderColor: "#0EF6FA"},emphasis: {disabled: true, //是否可以被选中label: {//移入时的高亮文本show: true,color: "#000", //显示字体颜色变淡fontSize: 18 //显示字体变大}},label: {show: true,position: "top",color: "#fff",fontSize: 14,lineHeight: 16,formatter: function ({ name }) {return ` ${name}`}},light: {//光照阴影main: {color: "#032372", //光照颜色intensity: 0.1, //光照强度 //shadowQuality: 'high', //阴影亮度shadow: true, //是否显示阴影shadowQuality: "medium", //阴影质量 ultra //阴影亮度alpha: 80,beta: 0,ambientCubemap: 0.5},ambient: {intensity: 1,color: "#133995" //光照颜色}},viewControl: {beta: 0, //x轴旋转alpha: 75, //Y轴旋转panMouseButton: "center", //平移操作使用的鼠标按键rotateMouseButton: "left", //旋转操作使用的鼠标按键rotateSensitivity: 0, //禁止旋转地图//下面的四个参数 可以实现禁止缩放地图projection: "orthographic",orthographicSize: 110,maxOrthographicSize: 110,minOrthographicSize: 110}}//如果要选中/激活高亮某个省份
function setProvince(e) {let option = mapChartInstance.getOption()option.geo3D[0].regions = [{name: e,itemStyle: {color: "#0cf4f9",opacity: 1}}]mapChartInstance.setOption(option)}

二.地图点击事件

//this.mapChart替换成对应的echarts实例
this.mapChart.on('click', (e) => {this.setProvince(e.name)
})

三.自定义tooltip

实现原理:

tooltip和地图的div容器宽高一致,tooltip中要自定义显示的内容相对于tooltip定位,然后通过echarts提供的convertToPixel()方法计算出自定义显示内容的相对位置

html

<div class="top_content"><div class="map_chart" id="map_chart"></div><div class="map-tooltip"><div class="in u-flex-col u-row-center " :style="curMapData"><div>{{ current_province.name }}：</div><div class="u-m-t-15"><span>{{ total }}</span> 家合作企业</div></div></div>
</div>

js

const properties = mapJson.features.find(item => item.properties.name.includes(name)).properties
const cp = properties.cp || properties.center
this.curMapData = this.showTooltipAtCoords(cp)showTooltipAtCoords(cp) { // 经纬度转换position位置const lng = cp[0]const lat = cp[1]const point = this.mapChart.convertToPixel('geo', [lng, lat])const left = `${point[0]}px` // 设置位置const top = `${point[1] - 90}px` // 设置位置return `left:${left} ;top:${top}`
},