echart地图渐变,边框阴影,弹框tootip设置

地图分层解决方案
1.

2.监听地图缩放事件,控制地图缩放时geo以及series的中心点以及缩放值一致,也可以解决分层现象

注:

<template>
  <div>
    <div>如皋地图</div>
    <!-- 设置地图容器大小及引用（vue中使用） -->
    <div class="map" ref="rgref"></div>
  </div>
</template>
<script>

// 5.x要求的导入方式
import * as echarts from 'echarts'
// 导入地图文件(该地图陈仓区标记和金台区标记重合)
// import { getBaojiMap } from '../api/getBaojiMap'
// 导入本地json地图文件(陈仓区标记已经通过cp属性进行调整)
import rg from './rg.json'
// import rg from '../utils/mapData/rugao.json'

export default {
  mounted() {
    var myChart = this.$echarts.init(this.$refs.rgref);
    // let myChart = echarts.init(this.$refs.rgref)
    let options = {
      title: {
        text: ''
      },
      tooltip: {},
      geo: [{
        name: '如皋地图',
        type: 'map',
        map: '如皋', // 这里的名字要和注册中一致
        center: [120.566324, 32.231591],
        // layoutCenter: ["50%", "50%"],//控制显示中心点位置
        zoom: 1,
        layoutSize: 500,//控制显示大小
        zlevel: 1,
        roam: false,//'scale',
        label: {
          show: true
        },
        itemStyle: {
          emphasis: { // 鼠标悬浮地图区域样式
            show: true,
            areaColor: "#21b1c9",
          },
          normal: {
            areaColor: {
              type: 'linear-gradient',
              x: 0,
              y: 1500,
              x2: 1500,
              y2: 0,
              colorStops: [{
                offset: 0.6,
                color: "#06a6c1", // 0% 处的颜色
              }, {
                offset: 0.5,
                color: "#23ba8f", // 100% 处的颜色
              }],
              global: true, // 缺省为 false

            }
          },
        },
        data: [],
        tooltip: {
          trigger: 'item', // axis显示该列下所有坐标轴对应数据，item只显示该点数据
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          },
          backgroundColor: 'rgba(50,50,50,0.7)',
          textStyle: {
            color: '#fff'
          },
          formatter: function (params) {
            console.log("params======>", params)
            console.log("======>", params.name)
            var res = `
        <div >
          <div
            style='display: inline-block;
            width:  10px;
            height: 20px;
            color: #bb3a3a'
            >●</div>
          <span>${'投诉量：2023-03-01 16:57:07'} 件</span>
        </div>
        <div>
          <div
            style='display: inline-block;
            width: 10px;
            height: 20px;
            color:#18187d'
          >●</div>
          <span>${'举报量：10.00%'} 件</span>
        </div>
        <div>
          <div
            style='display: inline-block;
            width: 10px;
            height: 20px;
            color:#d5ba22'
          >●</div>
          <span>${'受理量：10.00%'} 件</span>
        </div>
          <div>
          <div
            style='display: inline-block;
            width: 10px;
            height: 20px;
            color:#22bd17'
          >●</div>
          <span>${'受理率：10.00%'} 件</span>
        </div>

      `
            return params.name + res
          }
        },
      }],
      series: [
        {
          name: '如皋地图',
          type: 'map',
          map: '如皋', // 这里的名字要和注册中一致
          // layoutCenter: ["50%", "50%"],//控制显示中心点位置
          // layoutCenter: ["50%", "50%"],//控制显示中心点位置
          center: [120.566324, 32.231591],
          layoutSize: 500,//控制显示大小
          zlevel: 0,
          zoom: 1,
          roam: true,//'scale',
          label: {
            show: true
          },
          itemStyle: {
            borderWidth: 8,
            borderColor: '#0655ad',
            areaColor: '#9bb4d7',
            shadowColor: '#0e3d8d',
            emphasis: { // 鼠标悬浮地图区域样式
              show: true,
              areaColor: "#21b1c9",
            },
            shadowOffsetY: 10,
            shadowOffsetX: 2,
            opacity: 1,
          },
          data: []
        }

      ],

    }
    // 初始化地图
    this.initMapDataFromJsonFile(myChart, options)
  },
  methods: {
    // 加载本地json数据来初始化地图
    initMapDataFromJsonFile(myChart, options) {
      console.log("myChart====>", myChart)
      console.log("options====>", options)
      // 加载本地数据注册地图，并命名（options中的series.map的名字要与之一致）
      echarts.registerMap('如皋', rg)


      myChart.on("georoam", e => {
        console.log("e===>", e)
        if (e.componentType == 'geo') {
          let optionTemp = options
          optionTemp.series[0].center = optionTemp.geo[0].center
          optionTemp.series[0].zoom = optionTemp.geo[0].zoom
          myChart.setOption(optionTemp, true)
        }
        //
        const option = options;
        let mapGeo = option.series[0];

      });
      myChart.off("georoam");
      myChart.setOption(options)
    },
  }
}

</script>

<style>
.map {
  width: 800px;
  height: 800px;
}
</style>