echarts地图自定义tooltip样式_echarts地图tooltip

效果图：

自定义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 (params.componentSubType === 'scatter') {
              // console.log('parms', params)
              let AreaName = params.name
              const 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
            }
          },
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

修改tooltip的展示大小：

 extraCssText: 'width:100px;height:40px;',
1