一篇文章搞定echarts地图轮播高亮

2023年6月11日下午1:49 • JavaScript

下面是详细讲解“一篇文章搞定echarts地图轮播高亮”的完整攻略：

1.准备工作

在开始操作之前，你需要准备以下工具和技能：

计算、理解经纬度坐标系并能熟练使用echarts中的地图组件
熟练使用javascript编程语言
确保已经完成了echarts库和其依赖库的安装

2. 地图轮播高亮思路

地图轮播高亮的核心思路，是通过定时器不断切换并高亮指定点的策略，使地图中的点逐一高亮显示并让用户能够看到。但是，具体实现过程中会有一些细节需要注意：

首先，需要准备好地图的json数据文件和需要高亮的点的数据集文件，这两个文件可以通过官方提供的下载链接获得；
其次，需要按照一定的格式加载地图数据和点数据，并对其进行相应的处理，使其能够与echarts地图组件相对应，并正确显示。
最后，需要通过定时器实现地图轮播，并在每一次轮播的过程中，高亮指定的点，从而让用户更好地了解指定区域或者点的信息。

以下是具体实现过程：

3. 具体实现

3.1 数据准备

首先，从 echarts 的官网中下载中国地图（JSON格式），并根据需要对地图属性进行设置和调整，然后加载数据，如下代码：

$.getJSON("echarts-china.json", function(chinaJson) {
  echarts.registerMap("china", chinaJson);
});

接下来，我们需要准备数据集文件。一般我们需要一个数组保存需要高亮的点的经纬度。

在这里，我们以标志点的数据集数组为例。以下是标记点的数据格式：

var data=[
  {name: '海门', value: 9},
  {name: '鄂尔多斯', value: 12},
  {name: '招远', value: 12},
  {name: '舟山', value: 12},
  {name: '齐齐哈尔', value: 14},
  {name: '盐城', value: 15},
  ...
]

3.2 表示经纬度

以上面的数据为例，将经纬度表示为数组：

var geoCoordMap = {
    "上海市": [121.4648,31.2891],
    "东莞市": [113.8953,22.901],
    "东营市": [118.7073,37.5513],
    "中山市": [113.4229,22.478],
    "临汾市": [111.4783,36.1615],
    "临沂市": [118.3118,35.2936],
    ...
};

这个 geoCoordMap 对象是用来存放坐标信息的。对象的键值为城市名，值则是坐标信息的两个值。坐标类型可以是 String，也可以是 Number 类型。我这里使用 Number 类型，方便后面的计算。

3.3 地图显示数据

首先需要通过 ECharts 的官方 API 来指定地图的显示属性，进行基本的设置。这里我们以中国地图为例：

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    geo: {
        name: '中国地图',
        type: 'map',
        map: 'china',
        roam: true,
        //缩放比例
        zoom: 1.23,
        label: {
            normal: {
                show: true,
                textStyle: {
                    color: 'rgba(0,0,0,0.4)'
                }
            }
        },
        itemStyle: {
            normal:{
                borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis:{
                areaColor: '#F3B329',
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowBlur: 20,
                borderWidth: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    },
    series: []
};

接下来就是将数据渲染在地图上的过程。

series: [
    {
      // 圆圈的设置
      type: 'scatter',
      coordinateSystem: 'geo', // 采用的坐标系
      itemStyle: {
          normal: {
              color: '#ddb926'
          }
      },
      label: {
          normal: {
              formatter: '{b}',
              position: 'right',
              show: true
          }
      },
      symbolSize: function (val) {
          return val[2] ;
      },
      data: []
    },
    {
      // 轮播点的闪烁显示设置
      type: 'effectScatter',
      coordinateSystem: 'geo', // 采用的坐标系
      data: [],
      symbol: 'circle',
      showEffectOn: 'render',
      rippleEffect: {
          period: 15,
          scale: 4,
          brushType: 'fill'
      },
      hoverAnimation: true,
      label: {
          normal: {
              formatter: '{b}',
              position: 'right',
              show: true
          }
      },
      itemStyle: {
          normal: {
              color: '#46bee9',
              shadowBlur: 10,
              shadowColor: 'rgba(14, 31, 46, 0.8)',
              shadowOffsetX: 1,
              shadowOffsetY: 2
          }
      },
      zlevel: 1
  }]

同时，也需要将前面处理好的标记点数据，添加到我们要渲染的数据中，进行关联，如下代码：

for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
        series[0].data.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
        },
        {
            name:data[i].name,
            value:geoCoord.concat(data[i].value),
        });
    }
}

3.4 轮播高亮

接下来就是通过定时器实现轮播高亮的过程。这里我们定义了一个 index 变量保存当前显示的城市索引，接着用 setInterval 函数不停地切换 index 变量的值，并重新设置地图对应的数据位置。同时，我这里还添加了一些动画效果，使切换的过程更加流畅。

var index = -1;
var mtime;
(function loop() {
    mtime = setTimeout(loop, 3000);//时间间隔
    index = (index + 1) % data.length;
    var name = data[index].name;
    var value = data[index].value;
    mapChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0
    });
    mapChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        name: name
    });
    mapChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 1,
        name: name
    });
    mapChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 2,
        name: name
    });
})();