使用Echarts实现可视化大屏页面的地图只显示吉林省

最终效果：

直接上代码，HTML部分：

<div class="box center map">
            <!-- 显示地图 -->
            <div ref="map" id="mapJiLin" style="width: 100%;height: 100%;"></div>
            <!-- 鼠标移入显示详细信息 -->
            <div class="ol-popup" id="popup" v-show="showTooltip">
              <div id="popup-content" v-html="tooltipContent"></div>
            </div>
          </div>

JS部分：

首先需要准备一个存放地理位置信息的json文件：下载地图信息json文件地址

// 初始化加载吉林省地图
    async init() {
      let myChart = this.$echarts.init(document.getElementById("mapJiLin"));
      this.$echarts.registerMap("吉林省", map_json);
      this.scatterData = [
        {
          value: [126.4233, 41.9408],
          color: 'red',
          wellId: "井号：YD-QQK-4-00881",
          time: "运行时间：8h",
          liquid: "昨日产液量：6.85m³/d",
          currentCond: "当前工况：工作正常"
        },
        {
          value: [124.8251, 45.1414],
          color: 'red',
          wellId: "井号：YD-QQK-4-00882",
          time: "运行时间：8.5h",
          liquid: "昨日产液量：6.85m³/d",
          currentCond: "当前工况：供液不足"
        },
        {
          value: [125.9427, 41.7364],
          color: 'green',
          wellId: "井号：YD-QQK-4-00883",
          time: "运行时间：9h",
          liquid: "昨日产液量：6.85m³/d",
          currentCond: "当前工况：工作正常"
        },
        {
          value: [126.5563, 43.8378],
          color: 'green',
          wellId: "井号：YD-QQK-4-00884",
          time: "运行时间：10h",
          liquid: "昨日产液量：6.85m³/d",
          currentCond: "当前工况：供液不足"
        },
        {
          value: [125.1436, 42.8879],
          color: 'red',
          wellId: "井号：YD-QQK-4-00885",
          time: "运行时间：11h",
          liquid: "昨日产液量：6.85m³/d",
          currentCond: "当前工况：工作正常"
        }
      ]
      myChart.setOption({
        geo: {
          map: "吉林省", // 此处名称一定要对应读取本地文件时自定义的名称
          roam: false,
          zoom: 1.3, // 缩放等级
          center: [126.171208, 43.703954], //当前视角的中心点
          itemStyle: {
            normal: {
              areaColor: '#1f51c4',
              shadowColor: '#182f68',
              shadowOffsetX: 0,
              shadowOffsetY: 25
            },
            emphasis: {
              areaColor: '#2ab8ff',
              borderWidth: 0,
              color: 'green',
              label: {
                show: false
              },
            },
          },
          label: {
            show: false,
            distance: 5,
            textStyle: {
              color: '#fff',
              fontSize: 12,
              backgroundColor: 'rgba(0, 23, 11, 0)', // 字体颜色
            }
          },
        },
        series: [
          {
            type: 'map',
            center: [126.171208, 43.703954], // 当前视角的中心点
            roam: false,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff',
                },
                lineHeight: 20,
              },
              emphasis: {
                textStyle: {
                  color: '#fff',
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: '#2ab8ff',
                borderWidth: 0.5,
                areaColor: '#12235c',
              },
              emphasis: {
                areaColor: '#2ab8ff',
                borderWidth: 0,
                color: 'green',
              },
            },
            zoom: 1.2,
            map: "吉林省"
          },
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.scatterData.map(item => {
              return {
                value: item.value,
                color: item.color,
                wellId: item.wellId,
                time: item.time,
                liquid: item.liquid,
                currentCond: item.currentCond
              };
            }),
            symbolSize: 15, // 散点的大小
            label: {
              show: false
            },
            itemStyle: {
              color: function(params) {
                return params.data.color;
              }
            },
          }
        ],
      });
      // 点击事件，显示详细信息
      myChart.on('mousemove', params => {
        if(params.componentType === 'series' && params.seriesType === 'scatter') {
          this.showTooltip = true;
          this.tooltipContent = `<div>
            <p style='margin-bottom: 5px;'>${params.data.wellId}</p>
            <p style='margin-bottom: 5px;'>${params.data.time}</p>
            <p style='margin-bottom: 5px;'>${params.data.liquid}</p>
            <p>${params.data.currentCond}</p>
          </div>`;
          // 获取点击位置的坐标
          const posX = params.event.offsetX;
          const posY = params.event.offsetY;
          // 设置tooltip的位置
          const tooltip = document.querySelector('.ol-popup');
          tooltip.style.top = posY - 40 + 'px';
          tooltip.style.left = posX + 20 + 'px';
        } else {
          this.showTooltip = false;
        }
      });
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    }

CSS部分：

.ol-popup {
    background-color: #38465d;
    padding: 10px;
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 0;
  }
  #popup-content {
    text-align: left;
  }
  .tooltip-content p {
    margin-bottom: 5px;
  }

注意：如果只需要显示吉林省的地图，json文件中就只保留吉林省的地图信息就可以了！！！