Vue进阶（幺玖幺）：ECharts 实现地图功能_vue echarts 地图 label(1)

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

ToolTip

市级地图
县级地图

二、实现步骤

2.1 Map 初始化

initEcharts("china")

function initEcharts(map) {
  let option = {

    geo: {
      map: map,
      roam: false,
      scaleLimit: {
        min: 1.2,
        max: 3
      },
      zoom: 1.2,
      //图形上的文本标签，可用于说明图形的一些数据信息
      label: {
        normal: {
          show: true,
          fontSize: "10",
          color: "rgba(0,0,0,0.7)"
        }
      },
      //地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态
      itemStyle: {
        //normal 是图形在默认状态下的样式；
        normal: {
          borderColor: "rgba(0, 0, 0, 0.2)"
        },
        //emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
        emphasis: {
          areaColor: "#F3B329",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    },
    series: [
      {
        name: "信息量",
        type: "map",
        mapType: map,
        geoIndex: 0
        // data: dataList
      }
    ]
  };

  myChart.setOption(option);
}

有关各配参的详细说明，可参考ECharts官网。

2.2 定义省份及市区数组

在定义省市区时，应注意区域规划的正确性。

2.3 点击事件处理

在实现地图下钻过程中，点击相应省份、市区时，可下钻至下一层级。

// 点击触发
myChart.on("click", param => {
  if (param.name in provinces) {
    // 处理省模块
    let names = param.name;
    for (let key in provinces) {
      if (names == key) {
        showProvince(provinces[key], key);
        break;
      }
    }
  } else if (param.name in cityMap) {
    // 处理市模块
    let names = param.name;
    for (let key in cityMap) {
      if (names == key) {
        showCitys(cityMap[key], key);
        break;
      }
    }
  }
});

2.4 下钻渲染

地图下钻过程中，需渲染下一层级地图。

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。