效果图:
自定义tooltip样式
tooltip: {position: ['50%', '50%'],trigger: 'item',backgroundColor: 'rgba(0,0,0,0)',borderColor: 'rgba(0,0,0,0)',extraCssText: 'box-shadow: 0 0 0 rgba(0, 0, 0, 0);',zIndex: 400,formatter: function (params) {// 由于是写在最外层的所以需要判断一下当前鼠标是在地图上还是散点上悬浮if (ponentSubType === 'scatter') {// console.log('parms', params)let AreaName = params.nameconst aaa = require('@/assets/img/chart/map-bg.png')var str = `<div style = "background:url(${aaa}) no-repeat 100% 100% ;height:159px;width:298px;color:#FFFFFF;"><div style="padding-left:11px;padding-top:4px">${AreaName}</div></div>`return str}},},
修改tooltip的展示大小:
extraCssText: 'width:100px;height:40px;',