echarts地图绘制耗时卡点梳理

概述

• 本文主要记录在使用echart绘制地图时遇到的耗时卡点问题，并给出具体例子
• 如何绘制省市区地区
• 如何自定义label，具体为鼠标hover显示的label内容
• 如何实现地图自适应，监听浏览器窗口变化自适应
• 如何实现地图数据点位加载
• 社区丰富案例 - 高德地图经纬度查询

绘制省市区地区

• 需要省市区经纬度的json格式文件，具体的可以查看链接
• echart配置官方文档
• geo配置中map属性的值一定要和模板名称对应上
  • echarts.registerMap("ZJ", getMapData);
• 代码实现

 computed: {
    options() {
      return {
        tooltip: {
          formatter: function (params) {
            const { count = 0, cityName = "" } = params.data;
            return cityName + "<br>" + "企业数：" + count + "<br>";
          },
        },
        geo: {
          map: "ZJ", 
          show: true,
          roam: true,
          zoom: 1,
    },
  },


 async initChart() {
      const { data: getMapData } = GetMapGeoData; // 获取省市区json文件
      echarts.registerMap("ZJ", getMapData);
      const mapEcharts = echarts.init(document.getElementById("map"));

      mapEcharts.showLoading({ color: "#fff" });
      window.addEventListener("resize", this.onWindowResize);

      setTimeout(() => {
        mapEcharts.setOption(this.options);
        mapEcharts.hideLoading();
        this.mapEcharts = mapEcharts;
      }, 400);
    },

鼠标hover后自定义label内容

• 每种地图的类型的label配置位置可能不同，但相同的是都会使用formatter属性
• formatter属性配置文档
• 代码实现

 tooltip: {
      formatter: function (params) {
        const { count = 0, cityName = "" } = params.data;
        return cityName + "<br>" + "企业数：" + count + "<br>";
      },
    },

如何实现地图自适应，监听浏览器窗口变化自适应

• 代码实现

  window.addEventListener("resize", this.onWindowResize);
  
   // 监听浏览器变化---地图自适应
    onWindowResize() {
      if (this.disable) return;
      this.disable = true;
      setTimeout(() => {
        this.mapEcharts.resize();
        this.disable = false;
      }, 200);
    },
    
    // 组件销毁时取消监听
 beforeDestroy() {
    window.removeEventListener("resize", this.onWindowResize);

  },

如何实现地图数据点位加载

- 坐标点位——官方配置文档查阅 - 坐标点位——涟漪效果配置查阅

--------- 坐标点位-----
  {
            // 企业坐标
            type: "scatter",
            coordinateSystem: "geo",
            showEffectOn: "render",
            animation: false,
            itemStyle: {
              normal: {
                color: function (params) {
                  return "#E6A23C";
                },
              },
            },
            label: {
              show: false,
            },
            tooltip: {
              show: false,
            },
            data: mapPoint,
          },
          
          
          
 --------坐标点位涟漪效果-----
    // 呼吸灯
            type: "effectScatter",
            coordinateSystem: "geo",
            showEffectOn: "render",
            rippleEffect: {
              period: 5,
              scale: 3,
              brushType: "fill",
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: function (params) {
                  const { count = 0, cityName = "" } = params.data;
                  return count > 0 ? "#ffad47" : "rgba(147, 235, 248, 1)";
                },
              },
            },

            label: {
              show: true,
              normal: {
                show: true,
                position: "right", //显示位置
                offset: [5, 0], //偏移设置
                formatter: function (params) {
                  //圆环显示文字
                  return params.data.cityName;
                },
                fontSize: 12,
                color: "#fff",
              },
              emphasis: {
                show: true,
              },
            },
            data: [{
                value: [经度、纬度]
            }]