关键词

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

下面是详细讲解“一篇文章搞定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
    });
})();

4. 示例

以下是两个使用此方法实现的Echarts轮播高亮地图的示例:

以上就是关于“一篇文章搞定echarts地图轮播高亮”的完整攻略,希望能够对你有所帮助。

本文链接:http://task.lmcjl.com/news/8494.html

展开阅读全文