echarts-gl 地图3d label或tooltip自动高

echarts还存在个gl-echarts，如果不显示tooltip。
https://www.cnblogs.com/zxr0/p/14819032.html
其实一种是通过label显示的，开始时默认一种展示，然后具体到单个时再显示另外一种。
注label和tooltip是两个不同的东西，这只是借用label实现。

image.png
https://datav.aliyun.com/portal/school/atlas/area_selector
阿里datav工具，配合获取县手动用可以下载下来
重点是chartMap中autoHighlight
echarts中如果渲染自定义结构需要用到rich语法

 rich: {
              customDiv: {
                backgroundColor: 'rgba(50,50,50,0.7)',
                padding: [4, 5],
                width: 80,
                margin: 0,
                lineHeight: 20
              }
            }

其余参考：

<script>
let mapTimer =null 
...
data() {
  return {
    cartoonIndex:0,
    features:[],
  }
},
mounted() {
  this.getAreaInfo()
},
methods:{
// 根据城市id获取县的区块信息
  getAreaInfo: function (cityName) {
      if (this.isInit) {
        this.chartMap()
        return
      }
      const code = 420100
      // const code = 421100
      const baseUrl = 'https://geo.datav.aliyun.com/areas_v3/bound/geojson'
      // 使用Axios发送GET请求，并动态添加查询参数
      this.$axios
        .get(baseUrl, {
          params: {
            // code: '_full'
            code: `${code}_full`
          }
        })
        .then(res => {
          // 处理API响应数据
          // 注册地图数据
          this.features = []
          this.$echarts.registerMap('geoJson', res.data)
          this.features = res.data.features
          this.chartMap()
          this.mapBorder()
          // 将响应数据存储到Vue组件的数据中
        })
        .catch(error => {
          // 处理错误
          console.error(error)
        })
    },
  chartMap() {
      var myChart = this.$echarts.init(document.getElementById('map1'))
      myChart.hideLoading()

      // 根据县动态生成
      let regions = []

      this.features.forEach(item => {
        regions.push({
          name: item.properties.name, // 板块名称
          itemStyle: {
            color: '' // 板块颜色
          }
        })
      })

      let self = this
      let option = {
        geo3D: {
          map: 'geoJson',
          roam: false, // 禁用地图的缩放和平移功能
          onMouseWheel: false,
          itemStyle: {},
          label: {
            show: true,
            position: 'inside',
            color: '#fff', //地图初始化区域字体颜色
            fontSize: 12,
            rich: {
              customDiv: {
                backgroundColor: 'rgba(50,50,50,0.7)',
                padding: [4, 5],
                width: 80,
                margin: 0,
                lineHeight: 20  // 如不需要高度间距用行高修正
              }
            },
            formatter: function (params) {
              return `${params.name}`
            },
            verticalAlign: 'middle', // 设置文字垂直居中对齐
            lineHeight: 16 // 调整文字的行距
          },
          regions: regions,
          viewControl: {
            autoRotate: false,
            autoRotateAfterStill: 2,
            distance: 105,
            //  beta: this.beta,   默认左右旋转角度 
            // minAlpha: 45, 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
           //   maxAlpha: 350,上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            // minBeta: 310, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            // maxBeta: 160, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            animation: false,
            animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
            animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
          },

          emphasis: {
            disabled: true, //是否可以被选中
            label: {
              formatter: params => {
                clearInterval(self.mapTimer)
                // 自定义 tooltip 的内容
                return '{customDiv|' + `${params.name}\n百分比：0%\n百分比：0% ` + '}'
       
              },
              backgroundColor: 'rgba(50,50,50,0.7)' // tooltip 背景颜色
            },
            itemStyle: {
              color: 'orange' //显示移入的区块变粉色
            }
          },
          shading: 'lambert',
          light: {
            // 光照阴影
            // ambient: {
            //   intensity: 1
            // }
          }
        }
      }
      option.geo3D.regions.forEach((region, index) => {
        region.itemStyle.color = mapColors[index % 11]
        // 白色虚线
        region.itemStyle.borderColor = '#fff'
        // region.itemStyle.backgroundColor = '#fff'
        region.itemStyle.borderWidth = 1
      })

 
        myChart.setOption(option)
        this.isInit = true
        const autoHighlight = () => {
          self.cartoonIndex = (this.cartoonIndex + 1) % this.features.length
          // 获取所有地图数据
          // 使用setOption方法更新echarts配置
          myChart.setOption({
            geo3D: {
              label: {
                formatter: function (params) {
                  let curIndex = regions.findIndex(item => {
                    return item.name === params.name
                  })
                  if (curIndex === self.cartoonIndex) {
                    return '{customDiv|' + `${params.name}\n完测率：0%\n达标率：0% ` + '}'
                  } else {
                    return params.name
                  }
                }
              }
            }
          })
        }
        // 开启定时器，每秒切换一次高亮
        clearInterval(this.mapTimer)
        this.mapTimer = setInterval(autoHighlight, 1000)
        document.querySelector('#map1').addEventListener('mouseout', function (event) {
          // 在鼠标移出时执行的操作
          clearInterval(self.mapTimer)
          self.mapTimer = setInterval(autoHighlight, 1000)
        })
      }
...