echarts地图下钻+平面3D效果+自定义toolTip+自定义立体数据图层

冰眸js2024-09-06 10:55

第一步： 先获取相关地图json文件，可以通过DataV.GeoAtlas地理小工具系列下载相关geoJson文件，对这些文件做好管理，如下getMap.js

javascript 复制代码 
import anyang from '@/assets/map/json/anyang.json'
import hebi from '@/assets/map/json/hebi.json'
import henan from '@/assets/map/json/henan.json'
import jiaozuo from '@/assets/map/json/jiaozuo.json'
import jiyuan from '@/assets/map/json/jiyuan.json'
import kaifeng from '@/assets/map/json/kaifeng.json'
import luohe from '@/assets/map/json/luohe.json'
import luoyang from '@/assets/map/json/luoyang.json'
import nanyang from '@/assets/map/json/nanyang.json'
import pingdingshan from '@/assets/map/json/pingdingshan.json'
import puyang from '@/assets/map/json/puyang.json'
import sanmenxia from '@/assets/map/json/sanmenxia.json'
import shangqiu from '@/assets/map/json/shangqiu.json'
import xinxiang from '@/assets/map/json/xinxiang.json'
import xinyang from '@/assets/map/json/xinyang.json'
import xuchang from '@/assets/map/json/xuchang.json'
import zhengzhou from '@/assets/map/json/zhengzhou.json'
import zhoukou from '@/assets/map/json/zhoukou.json'
import zhumadian from '@/assets/map/json/zhumadian.json'


const mapDict = {
  '周口市':'zhoukou',
  '漯河市':'luohe',
  '商丘市':'shangqiu',
  '许昌市':'xuchang',
  '洛阳市':'luoyang',
  '濮阳市':'puyang',
  '焦作市':'jiaozuo',
  '南阳市':'nanyang',
  '平顶山市':'pingdingshan',
  '新乡市':'xinxiang',
  '开封市':'kaifeng',
  '驻马店市':'zhumadian',
  '郑州市':'zhengzhou',
  '安阳市':'anyang',
  '鹤壁市':'hebi',
  '三门峡市':'sanmenxia',
  '信阳市':'xinyang',
  '济源市':'jiyuan',
}

const mapData = {
  henan,
  zhoukou,
  luohe,
  shangqiu,
  xuchang,
  luoyang,
  puyang,
  jiaozuo,
  nanyang,
  pingdingshan,
  xinxiang,
  kaifeng,
  zhumadian,
  zhengzhou,
  anyang,
  hebi,
  sanmenxia,
  xinyang,
  jiyuan,
}

export function getMap(mapName) {
    const cityName = mapDict[mapName]
    // console.log(cityName);
    if(cityName){
        // console.log('1111',cityName, mapData[cityName]);
        return [cityName, mapData[cityName]]

    }
    // if(!mapName){
    //   return ['henan', henan]
    // }
  return ['henan', henan]
}

**第二步：**导入到地图组件使用，通过下拉框或者点击地图获取name实现json切换

**第三步：**平面3D效果使用多个geo图层堆叠layoutCenter平移，下钻切换地图时记得注册地图registerMap

**第四步：**自定义toolTip比较简单，这里相关背景图使用import导入，关键点是自定义position位置（不自定义会出现安阳定在濮阳的情况），获取地图json中的centorid的坐标（这里的坐标自己可以直接修改位置），通过convertToPixel将地理坐标转换为屏幕坐标，相当好用

**第五步：**自定义立体图层，直接参考代码吧，网上也找过相关的参考，他们的实现方式是主体柱形部分采用左右多层次渐变的方式，要求上下渐变就不太合适。现在我这里这部分是公司里十年前端大佬手撸的，放心使用

**第六步：**地图emphsis鼠标移入使geo与series多图层联动触发，使用了鼠标移入移出事件，相关dispatchAction配置项在echarts官网查看

下方完整组件代码：

html 复制代码 
<template>
  <div class="home">
    <el-select style="width: 164px;" v-model="myCity" size="large" class="mySelect"
               @change="changeOption" :teleported="false">
      <el-option v-for="item in Object.keys(selOption)" :key="item" :value="item" :label="item">
        <div class="myselectItem">
          <span>{{ item }}</span>
          <img src="../../../assets/imgs/zhzf/itenDing.png" alt=""/>
        </div>
      </el-option>
    </el-select>
    <div class="weather">
      <div class="weatherItem br"><img src="../../../assets/imgs/zhzf/qing.png" alt=""/>晴</div>
      <div class="weatherItem br"><img src="../../../assets/imgs/zhzf/wen.png" alt=""/>17℃</div>
      <div class="weatherItem"><img src="../../../assets/imgs/zhzf/shi.png" alt=""/>18%</div>
    </div>
    <div class="echarts_map" id="main" style="height: 700px;">
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import imgBt from "@/assets/imgs/zhzf/tooltipBt.png";
import imgTooltip from "@/assets/imgs/zhzf/tooltipBorder.png";
import imgItem from "@/assets/imgs/zhzf/tooltipItem.png";
import {getMap} from "./hnMap";
import {mapData} from "@/api/zhzf/index1"

export default {
  data() {
    return {
      myCity: '河南省',
      charts: null,
      params: null,
      selOption: {
        '河南省': [113.83531246, 34.0267395887],
        '三门峡市': [111.181262093, 34.7833199411],
        '信阳市': [114.085490993, 32.1285823075],
        '南阳市': [112.542841901, 33.0114195691],
        '周口市': [114.654101942, 33.6237408181],
        '商丘市': [115.641885688, 34.4385886402],
        '安阳市': [114.351806508, 36.1102667222],
        '平顶山市': [113.300848978, 33.7453014565],
        '开封市': [114.351642118, 34.8018541758],
        '新乡市': [113.912690161, 35.3072575577],
        '洛阳市': [112.147524769, 34.2873678177],
        '漯河市': [114.0460614, 33.5762786885],
        '濮阳市': [115.026627441, 35.7532978882],
        '焦作市': [113.211835885, 35.234607555],
        '许昌市': [113.83531246, 34.0267395887],
        '郑州市': [113.64964385, 34.7566100641],
        '驻马店市': [114.049153547, 32.9831581541],
        '鹤壁市': [114.297769838, 35.7554258742],
      },
      stationSurvey: [],
      mapData: []
    }
  },
  async mounted() {
    this.mapData = await mapData()
    this.$nextTick(() => {
      this.initCharts();
    })
  },
  methods: {
    changeOption() {
      const [mapName, mapJson] = getMap(this.myCity);
      this.go(mapName, mapJson)
      this.$emit('changeCity', this.myCity)
    },
    initCharts() {
      const [mapName, mapJson] = getMap();
      this.go(mapName, mapJson)
    },
    go(mapName, mapJson) {
      let geoCoordMap = {}
      let leftDataLs = [];
      let customerBatteryCityData = []
      mapJson.features.forEach(item => {
        let key = item.properties.name
        let value = item.properties.centroid
        geoCoordMap[key] = value
        if (mapName == 'henan') {
          this.mapData.forEach(cityItem => {
            if (item.properties.name == cityItem.city) {
              let obj = {
                name: item.properties.name,
                value: cityItem.warnNum, jrl: cityItem.accessRate, gjs: cityItem.warnNum,
                xy: item.properties.centroid
              }
              customerBatteryCityData.push(obj)
            }
          })
        } else {

          this.mapData.forEach(cityItem => {
            if (this.myCity == cityItem.city) {
              if(cityItem.childList.some(ite=>ite.county==item.properties.name||ite.county+'区'==item.properties.name||ite.county+'县'==item.properties.name)){
                cityItem.childList.forEach(countryItem => {
                  if (countryItem.county==item.properties.name||countryItem.county+'区'==item.properties.name||countryItem.county+'县'==item.properties.name) {
                    let obj = {
                      name: item.properties.name,
                      value: countryItem.warnNum,
                      jrl: countryItem.accessRate,
                      gjs: countryItem.warnNum,
                      xy: item.properties.centroid
                    }
                    customerBatteryCityData.push(obj)
                  }
                })
              }else{
                //空数据补完
                let obj = {
                  name: item.properties.name,
                  value: '0',
                  jrl: '0%',
                  gjs: '0',
                  xy: item.properties.centroid
                }
                customerBatteryCityData.push(obj)
              }

            }

          })
        }

        //手动模拟数据

      })

      let lineDataLs = lineData();
      echarts.registerMap(mapName, mapJson);

      this.charts = echarts.init(document.getElementById('main'));

      let option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          showDelay: 0, //浮层显示的延迟
          transitionDuration: 0.2, // 提示框浮层的移动动画过渡时间
          enterable: false,
          borderWidth: 0,
          shadowBlur: 0,
          shadowColor: '#00000000',
          position: (point, params) => {

            //转换为屏幕坐标，自定义tooltip位置,'inside'时位置不可自定义改变，可以自定义修改mapJson的centroid
            let cord = this.charts.convertToPixel({seriesIndex: params.seriesIndex}, params.data.xy||params.data[2].xy)

            return [cord[0] - 100, cord[1] - 100]
          },
          formatter: function (params) {
            var tipHtml = '';
            if (params.componentSubType == 'map') {
              tipHtml = `<div style="font-size: 12px;height: 180px;line-height: 28px;border-radius: 3px;color:#fff;font-family: DIN-B;background: url(${imgBt}) no-repeat center bottom;position: relative;top: -50px;pointer-events: none">`
                + '<div style="width: 170px;height: 28px;border-top:1px solid #ff6a0055;padding-left: 10px;background-color: #5c626677;backdrop-filter: blur(5px)">' + params.data.name + '</div>'
                + `<div style="width: 169px;height: 87px;padding: 10px ;backdrop-filter: blur(3px);background: #00000066 url(${imgTooltip}) no-repeat center center;background-size: 100% 100%"><div style="display: flex;align-items: center;width: 100%">` + `<img src="${imgItem}"  />` + '接入率&nbsp;&nbsp;' + '<span style="font-size:24px;color:#FFFFFF">' + params.data.jrl + '</span>' + '&nbsp;&nbsp;</div>'
                + '<div style="display: flex;align-items: center;width: 100%">' + `<img src="${imgItem}" />` + '今日告警总数&nbsp;&nbsp;' + '<span style="font-size:24px;color:#FFFFFF">' + params.data.gjs + '</span>' + '&nbsp;&nbsp;</div></div></div>'

            } else {
              tipHtml = `<div style="font-size: 12px;height: 200px;line-height: 28px;border-radius: 3px;color:#fff;font-family: DIN-B;background: url(${imgBt}) no-repeat center bottom">`
                + '<div style="width: 170px;height: 28px;border-top:1px solid #ff6a0055;padding-left: 10px;background-color: #5c626677;backdrop-filter: blur(5px)">' + params.data[2].name + '</div>'
                + `<div style="width: 169px;height: 87px;padding: 10px ;background: #00000066 url(${imgTooltip}) no-repeat center center;background-size: 100% 100%;backdrop-filter: blur(3px);border:1px solid #ff6a00;"><div style="display: flex;align-items: center">` + `<img src="${imgItem}" />` + '接入率&nbsp;&nbsp;' + '<span style="font-size:24px;color:#FFFFFF">' + params.data[2].jrl + '</span>' + '&nbsp;&nbsp;</div>'
                + '<div style="display: flex;align-items: center">' + `<img src="${imgItem}" />` + '今日告警总数&nbsp;&nbsp;' + '<span style="font-size:24px;color:#FFFFFF">' + params.data[2].gjs + '</span>' + '&nbsp;&nbsp;</div></div></div>'

            }

            return tipHtml;
          },
          backgroundColor: "transparent"
        },
        geo: [
          {

            map: mapName,
            aspectScale: 1.1,
            roam: false, // 是否允许缩放
            zoom: 1.2, // 默认显示级别
            layoutSize: '95%',
            layoutCenter: ['50%', '55%'],
            // label: {
            //   show: true,
            //   color: '#FFFFFF'
            // },
            itemStyle: {
              normal: {

                areaColor: {
                  type: 'linear-gradient',
                  x: 0,
                  y: 500,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: '#0c4863' // 0% 处的颜色
                  },
                    {
                      offset: 0.4,
                      color: '#09203eee' // 0% 处的颜色
                    }, {
                      offset: 1,
                      color: '#09132aee' // 50% 处的颜色
                    }],
                  global: true // 缺省为 false
                },
                borderColor: '#02d0d9',
                borderWidth: 1
              },
              emphasis: {
                areaColor: {
                  type: 'linear-gradient',
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: '#00b1c9aa' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#003d86aa' // 50% 处的颜色
                  }],
                  global: false // 缺省为 false
                },
                borderWidth: 2,

              }
            },
            emphasis: {
              itemStyle: {
                areaColor: '#0160AD'
              },
              label: {
                show: false,
                color: 'transparent'
              }
            },
            zlevel: 4
          },
          {
            map: mapName,
            aspectScale: 1.1,
            roam: false, // 是否允许缩放
            zoom: 1.2, // 默认显示级别
            layoutSize: '95%',
            layoutCenter: ['50%', '55.4%'],
            itemStyle: {
              areaColor: '#14406f00',
              borderColor: '#00f7fa',
              borderWidth: 5
            },
            zlevel: 3,
            silent: true
          },
          {
            map: mapName,
            aspectScale: 1.1,
            roam: false, // 是否允许缩放
            zoom: 1.2, // 默认显示级别
            layoutSize: '95%',
            layoutCenter: ['50%', '55%'],
            itemStyle: {
              normal: {
                borderColor: 'rgba(192,245,249,.6)',
                borderWidth: 2,
                shadowColor: '#2C99F6',
                shadowOffsetY: 20,
                shadowBlur: 10,
                areaColor: 'rgba(29,85,139,.2)'
              }
            },
            zlevel: 2,
            silent: true
          },
          {
            map: mapName,
            aspectScale: 1.1,
            roam: false, // 是否允许缩放
            zoom: 1.2, // 默认显示级别
            layoutSize: '95%',
            layoutCenter: ['50%', '56.5%'],
            itemStyle: {
              areaColor: '#00aeff33',
              borderColor: '#08385eff',
              borderWidth: 5
            },
            zlevel: 1,
            silent: true
          }
        ],
        series: [
          {
            geoIndex: 0,
            selectedMode: false,
            showLegendSymbol: true,
            type: 'map',
            roam: true,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#ffffff88'
                }
              },
              emphasis: {
                show: false
              }
            },

            itemStyle: {
              normal: {
                borderColor: '#2ab8ff',
                borderWidth: 1.5,
                areaColor: '#12235c'
              },
              emphasis: {
                borderColor: '#2ab8ff',
                borderWidth: 1.5,
                areaColor: '#12235c'
              }
            },
            // map: mapName, // 使用
            data: customerBatteryCityData
            // data: this.difficultData //热力图数据   不同区域 不同的底色
          },
          {//left
            type: 'custom',
            coordinateSystem: 'geo',
            zlevel: 5,
            silent: true,
            renderItem: function (params, api) {
              let mycolor = [
                {
                  offset: 0,
                  color: '#33ffeeaa' // 0% 处的颜色
                },
                {
                  offset: 0.2,
                  color: '#33ffee99' // 0% 处的颜色
                },
                {
                  offset: 0.4,
                  color: '#33ffee66' // 0% 处的颜色
                },
                {
                  offset: 0.6,
                  color: '#33ffee33' // 0% 处的颜色
                },
                {
                  offset: 0.9,
                  color: '#33ffee00' // 0% 处的颜色
                },
              ]
              if (customerBatteryCityData[params.dataIndex].value >= 15) {
                mycolor = [
                  {
                    offset: 0,
                    color: '#ffb65caa' // 0% 处的颜色
                  },
                  {
                    offset: 0.2,
                    color: '#ffb65c99' // 0% 处的颜色
                  },
                  {
                    offset: 0.4,
                    color: '#ffb65c66' // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: '#ffb65c33' // 0% 处的颜色
                  },
                  {
                    offset: 0.9,
                    color: '#ffb65c00' // 0% 处的颜色
                  },
                ]
              }

              var lng = api.value(0);
              var lat = api.value(1);
              let height = 43;
              let width = 20;

              let p1 = api.coord([lng, lat]);
              let p2 = [p1[0] - width / 2, p1[1] - width / 2];
              let p3 = [p2[0], p2[1] - height + 3];
              let p4 = [p1[0], p1[1] - height];

              let points = [p1, p2, p3, p4];
              return {
                type: 'polygon',
                transition: ['shape'],
                shape: {
                  points: points
                },
                style: api.style({
                  fill: {
                    type: 'linear',
                    x: 1,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: mycolor,
                    global: false // 缺省为 false
                  },
                  stroke: 'none'
                }),
                emphasis: {
                  style: {
                    opacity: 0
                  }
                },
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgba(199,145,41,1)' // 0% 处的颜色
                      },
                      {
                        offset: 0.5,
                        color: 'rgba(199,145,41,.6)' // 0% 处的颜色
                      },
                      {
                        offset: 0.5,
                        color: 'rgba(223,176,32,.6)' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgba(223,176,32,.6)' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgba(199,145,41,.6)' // 100% 处的颜色
                      }
                    ],
                    global: false // 缺省为 false
                  }
                },
                data: leftDataLs
              };
            },

            data: leftDataLs
          },
          {//right
            type: 'custom',
            coordinateSystem: 'geo',
            zlevel: 6,
            silent: true,
            renderItem: function (params, api) {

              let mycolor = [
                {
                  offset: 0,
                  color: '#bcf4efbb' // 0% 处的颜色
                },
                {
                  offset: 0.1,
                  color: '#bcf4ef88' // 0% 处的颜色
                },
                {
                  offset: 0.3,
                  color: '#bcf4ef55' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#bcf4ef00' // 0% 处的颜色
                },
              ]
              if (customerBatteryCityData[params.dataIndex].value >= 15) {
                mycolor = [
                  {
                    offset: 0,
                    color: '#ffc073ee' // 0% 处的颜色
                  },
                  {
                    offset: 0.1,
                    color: '#ffc07388' // 0% 处的颜色
                  },
                  {
                    offset: 0.3,
                    color: '#ffc07355' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#ffc07300' // 0% 处的颜色
                  },
                ]
              }

              var lng = api.value(0);
              var lat = api.value(1);
              let height = 43;
              let width = 20;

              let p1 = api.coord([lng, lat]);
              let p2 = [p1[0] + width / 2, p1[1] - width / 2 + 3];
              let p3 = [p2[0], p2[1] - height];
              let p4 = [p1[0], p1[1] - height];

              let points = [p1, p2, p3, p4];
              return {
                type: 'polygon',
                transition: ['shape'],
                shape: {
                  points: points
                },

                style: api.style({
                  fill: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: mycolor,
                    global: false // 缺省为 false
                  },
                  stroke: 'none'
                }),
                emphasis: {
                  style: {
                    opacity: 0
                  }
                },
              };
            },

            data: leftDataLs
          },
          {//top
            type: 'custom',
            coordinateSystem: 'geo',
            zlevel: 6,
            silent: true,
            label: {
              normal: {
                position: 'top',
                show: true,
                formatter: function (params) {
                  var name = params.data[2].name
                  var value = params.data[2].jrl
                  // var text = `{tline|${name}}:{fline|${value}}`
                  var text = `{fline|${value}}`
                  return text;
                },
                color: '#fff',
                rich: {
                  fline: {
                    // padding: [0, 25],
                    color: '#fff',
                    fontSize: 18,
                    fontFamily: 'DIN-B',
                    fontWeight: '400',
                  },
                  tline: {
                    // padding: [0, 27],
                    color: '#ABF8FF',
                    fontSize: 12,
                  },
                }
              },

            },
            renderItem: function (params, api) {
              let mycolor = [
                {
                  offset: 0,
                  color: '#12cdbe' // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: '#e6fffd' // 0% 处的颜色
                },

              ]
              if (customerBatteryCityData[params.dataIndex].value >= 15) {
                mycolor = [
                  {
                    offset: 0,
                    color: '#fcae4e' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#e6fffd' // 0% 处的颜色
                  },

                ]
              }

              var lng = api.value(0);
              var lat = api.value(1);
              let height = 40;
              let width = 20;

              let p0 = api.coord([lng, lat]);
              let p1 = [p0[0], p0[1] - height - 3];
              let p2 = [p0[0] - width / 2, p0[1] - width / 2 - height];
              let p3 = [p0[0], p0[1] - width - height + 3];
              let p4 = [p0[0] + width / 2, p0[1] - width / 2 - height];

              let points = [p1, p2, p3, p4];
              return {
                type: 'polygon',
                transition: ['shape'],
                shape: {
                  points: points
                },
                style: api.style({
                  fill: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: mycolor,
                    global: false // 缺省为 false
                  },
                  stroke: 'none'
                }),
                emphasis: {
                  style: {
                    opacity: 0
                  }
                }
              };
            },

            data: leftDataLs
          },
          {//bottom
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            zlevel: 4,
            label: {
              normal: {
                formatter: '{b}',
                position: 'bottom',
                color: '#ffffffaa',
                fontSize: 12,
                distance: 1,
                show: true,
              },
              emphasis: {
                show: false
              }
            },
            symbol: 'diamond',
            symbolSize: [17, 8],
            itemStyle: {
              // color: '#F7AF21',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgb(199,145,41,0)' // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: 'rgb(199,145,41,0)' // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: 'rgb(223,176,32,0)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgb(223,176,32,0)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgb(199,145,41,0)' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              },
              opacity: 1,
              emphasis: {
                itemStyle: {
                  opacity: 0,
                }
              },
              // shadowColor: '#fff',
              // shadowBlur: 5,
              // shadowOffsetY: 2
            },
            silent: true,
            data: scatterData2()
          }

        ]
      }
      this.charts.setOption(option);

      this.charts.off("click") // 防止graph里频繁添加click事件，在添加click事件之前先全部清空掉


      this.charts.on("click", ({name}) => {


        //下钻后取消高亮操作
        this.charts.dispatchAction({
          type: 'downplay',
          seriesIndex: 1,
          dataIndex: this.params.dataIndex
        })
        this.charts.dispatchAction({
          type: 'downplay',
          seriesIndex: 2,
          dataIndex: this.params.dataIndex
        })
        this.charts.dispatchAction({
          type: 'downplay',
          seriesIndex: 3,
          dataIndex: this.params.dataIndex
        })
        this.charts.dispatchAction({
          type: 'downplay',
          seriesIndex: 4,
          dataIndex: this.params.dataIndex
        })
        // 如果option.graphic里已经有了城市名称，则不进行任何操作，防止频繁点击
        // const index = option.graphic.findIndex(i => i.style.text === name);
        // // console.log('index',index);
        //
        // if (!name || index !== -1) return
        // 这里和上面一样，其实还可以再优化一下。为了方便阅读，这里不再封装。
        const [mapName, mapJson] = getMap(name);
        if (mapName != 'henan') {
          this.myCity = name
        } else {
          this.myCity = '河南省'
        }
        this.$emit('changeCity', this.myCity)
        // debugger
        this.go(mapName, mapJson)


        // 渲染
        // this.charts.setOption(option, true);
      });

      function scatterData2() {
        return customerBatteryCityData.map((item) => {
          return {
            name: item.name,
            value: geoCoordMap[item.name]
          }
        })
      }

      function lineMaxHeight() {
        const maxValue = Math.max(...customerBatteryCityData.map(item => item.value))
        return 0.3 / maxValue
      }

      function lineData() {
        for (let item of customerBatteryCityData) {
          let height = item.value * lineMaxHeight();
          let width = height / 4;
          let p1 = geoCoordMap[item.name];
          let p2 = [p1[0] - width / 2, p1[1] + width / 2];
          let p3 = [p1[0] - width / 2, p1[1] + width / 2 + height];
          let p4 = [p1[0], p1[1] + height];
          // leftDataLs.push([p1, p2, p3, p4]);
          leftDataLs.push([...p1, item])
        }
        return customerBatteryCityData.map((item) => {
          return {
            coords: [geoCoordMap[item.name], [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()]]
          }
        })
      }

      this.charts.on("mouseover", params => {
        if (params.seriesType == 'map') {
          // 详情
          this.params = params

          this.charts.dispatchAction({
            type: 'highlight',
            seriesIndex: 1,
            dataIndex: params.dataIndex
          })
          this.charts.dispatchAction({
            type: 'highlight',
            seriesIndex: 2,
            dataIndex: params.dataIndex
          })
          this.charts.dispatchAction({
            type: 'highlight',
            seriesIndex: 3,
            dataIndex: params.dataIndex
          })
          this.charts.dispatchAction({
            type: 'highlight',
            seriesIndex: 4,
            dataIndex: params.dataIndex
          })
          this.charts.dispatchAction({
            type: 'highlight',
            seriesIndex: 5,
            dataIndex: params.dataIndex
          })
        }


      })

      this.charts.on("mouseout", params => {
        if (params.seriesType == 'map') {
          // 详情


          this.charts.dispatchAction({
            type: 'downplay',
            seriesIndex: 1,
            dataIndex: params.dataIndex
          })
          this.charts.dispatchAction({
            type: 'downplay',
            seriesIndex: 2,
            dataIndex: params.dataIndex
          })
          this.charts.dispatchAction({
            type: 'downplay',
            seriesIndex: 3,
            dataIndex: params.dataIndex
          })
          this.charts.dispatchAction({
            type: 'downplay',
            seriesIndex: 4,
            dataIndex: params.dataIndex
          })
          this.charts.dispatchAction({
            type: 'downplay',
            seriesIndex: 5,
            dataIndex: params.dataIndex
          })
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .weather {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 300px;
    height: 37px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: "PingFang SC";
    font-size: 20px;
    color: #c3cee3;
    background: url("@/assets/imgs/zhzf/weather.png") no-repeat center center;
    background-size: 100% 100%;

    .weatherItem {
      flex: 1;
      height: 24px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;

    }

    .br {
      position: relative;

      &:after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        height: 24px;
        width: 3px;
        border-radius: 2px;
        background-color: #7ad8ff;

      }
    }
  }

  .mySelect {
    position: absolute;
    left: 20px;
    top: 10px;
    z-index: 99;
  }

  .echarts_map {
    width: 100%;
    height: 100%;
  }
}

.mySelect {
  border: 0 !important;

  .myselectItem {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: inset 0 0 1px #6e87c5;
    padding: 0 10px;
    color: #FFFFFF;
  }

  :deep(.el-select-dropdown__item.hover, .el-select-dropdown__item:hover) {
    background-color: transparent !important;
  }

  :deep(.el-popper.is-light .el-popper__arrow::before) {
    background-color: transparent !important;
    border: 0 !important;
  }

  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 #00000000 !important;
    background: url("@/assets/imgs/zhzf/henanBorder.png") no-repeat center center !important;
    background-size: 100% 100% !important;
    border: 0 !important;
  }

  :deep(.el-input.is-focus .el-input__wrapper) {
    box-shadow: 0 0 0 #00000000 !important;
  }

  :deep(.el-input .el-select__caret) {
    color: #04a9ff !important;
  }

  :deep(.el-select__popper.el-popper,.el-select-dropdown) {
    border: 1px solid #1c2d50 !important;
    background-color: #09142f !important;
  }

  :deep(.el-select-dropdown__item) {
    padding: 0 10px 5px;
  }

  :deep(.el-input .el-input__inner) {
    font-family: "PingFang SC" !important;
    font-weight: 500 !important;
    font-size: 20px !important;
    /* 设置背景色渐变 */
    background-image: linear-gradient(to bottom, #149eff 5%, #effcfe 50%) !important;
    /* 设置背景以文字进行裁切 */
    background-clip: text;
    -webkit-background-clip: text;
    /* 设置文本颜色透明以露出后面裁切成文本形状的渐变背景 */
    color: transparent !important;

  }
}


</style>

结语：费心巴力搞两天搞完，结果领导说想要朴素点的MMP╰（‵□′）╯

相关推荐
Commas.KM几秒前
【CSS|第1期】网页设计的演变：从表格布局到Grid布局
前端·css·网页布局·flex布局·grid布局·表格布局·div+css布局
读心悦几秒前
CSS的offset属性
前端·css
一 乐40 分钟前
点餐|基于java的电子点餐系统小程序(源码+数据库+文档)
java·开发语言·前端·数据库·小程序·论文
布瑞泽的童话1 小时前
Vue 也能这样玩？Vuetify 打造超强大的UI体验
前端·vue.js·ui·开源
加勒比海涛1 小时前
ElementUI 快速入门：使用 Vue 脚手架搭建项目
前端·vue.js·elementui
安冬的码畜日常1 小时前
【CSS in Depth 2 精译_031】5.3 Grid 网格布局的两种替代语法
前端·css·css3·html5·网格布局·网格·css布局
sun_weitao1 小时前
extends in javascript
开发语言·前端·javascript
Jiaberrr2 小时前
轻松切换淘宝最新镜像源，加速npm依赖安装
前端·javascript·vue.js·npm·node.js
Teln_小凯2 小时前
VUE + NODE 历史版本安装
前端·javascript·vue.js
hai405872 小时前
切换淘宝最新npm镜像源是
前端·npm·node.js
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02RAG 实践- Ollama+RagFlow 部署本地知识库032024年高教社杯数学建模国赛C题超详细解题思路分析04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）0551-2 万字长文，深度解读端到端自动驾驶的挑战和前沿06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07通达信神奇九转指标原理及选股公式，无未来函数，数字不消失08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10苍穹外卖面试总结