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

文章目录

• • 一、前言
    • 二、实现步骤
    • • 2.1 Map 初始化
        • 2.2 定义省份及市区数组
        • 2.3 点击事件处理
        • 2.4 下钻渲染
    • 三、拓展阅读

---

一、前言

无论Web端还是移动端均会存在应用地图展示数据信息的应用场景。应用场景如下：

全国地图

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 点击事件处理

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

自学几个月前端，为什么感觉什么都没学到？？

---

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

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

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。