echarts地图tooltip添加标注

myCharts.setOption({
          tooltip: {
              triggerOn: 'click',
              enterable: true,
              formatter: function(params, ticket, callback) {
                  console.log(params.length)
                  let content = {
                      area: 1,
                      areaName: params.name
                  }
                  let result = that.$axios({
                      method: 'get',
                      url: that.getMapCompany,
                      params: content
                  }).then(res => {
                      console.log(params, content, 'log')
                  })
                  var tipHtml = '';
                  tipHtml = '<div style="width:200px;height:200px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
                  +'<div style="width:100%;height:40px;line-height:40px;border-bottom:2px solid rgba(7,166,255,0.7);margin-bottom:10px;">'
                  +'<span style="margin-left:10px;color:#fff;font-size:16px;">'+ params.name +'</span>'+'</div>'
                  +'<div>'
                  +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">'+'</i>'
                  +'公司数量:'+'<span style="color:#f48225;margin:0 6px;">'+3+'</span>'+'个'+'</p>'
                  +'<p style="color:#fff;font-size:12px;">'+'<i style="display:inline-block;width:8px;height:8px;background:#16d6ff;margin:0 8px">'+'</i>'
                  +'被考核主体数量'+'<span style="color:#f4e925;margin:0 6px;">'+4+'</span>'+'个'+'</p>'
                  +'</div>'+'</div>';
                  return tipHtml;
 
                  return result;
                   
                   
              }
          },
          series: [
              {
                  type: 'map',
                  map: 'china',
                  zoom: 1,
                  label: {
                      show: true,
                      color: 'white',
                      fontSize: 10
                  },
                  itemStyle: {
                      normal: {
                          borderWidth: 2,//边际线大小
                          borderColor:'#00ffff',//边界线颜色
                          areaColor:'#09295b'//默认区域颜色
                      },
                      emphasis: {
                          show: true,
                          areaColor: '#3066ba',//鼠标滑过区域颜色
                          label: {
                              show: true,
                              textStyle: {
                                  color: '#fff'
                              }
                          }
                      }
                       
                  },
              }
          ],
      })

  

 

posted @ 2021-06-02 09:28  小刺猬的大宝贝  阅读(3743)  评论(0编辑  收藏  举报