zoukankan      html  css  js  c++  java
  • 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="200px;height:200px;background:rgba(22,80,158,0.8);border:1px solid rgba(7,166,255,0.7)">'
                      +'<div style="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;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;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'
                                  }
                              }
                          }
                           
                      },
                  }
              ],
          })
    

      

    看繁华,听风落
  • 相关阅读:
    2019牛客多校 Round10
    2019牛客多校 Round9
    2019牛客多校 Round8
    2019牛客多校 Round7
    2019HDU多校 Round8
    2019HDU多校 Round7
    elasticsearch分词器
    elasticsearch的mapping
    elasticsearch批量操作
    elasticsearch元数据
  • 原文地址:https://www.cnblogs.com/lgnblog/p/14839913.html
Copyright © 2011-2022 走看看