下面是详细讲解“一篇文章搞定echarts地图轮播高亮”的完整攻略：
在开始操作之前，你需要准备以下工具和技能：
地图轮播高亮的核心思路，是通过定时器不断切换并高亮指定点的策略，使地图中的点逐一高亮显示并让用户能够看到。但是，具体实现过程中会有一些细节需要注意：
首先，需要准备好地图的json数据文件和需要高亮的点的数据集文件，这两个文件可以通过官方提供的下载链接获得；
其次，需要按照一定的格式加载地图数据和点数据，并对其进行相应的处理，使其能够与echarts地图组件相对应，并正确显示。
最后，需要通过定时器实现地图轮播，并在每一次轮播的过程中，高亮指定的点，从而让用户更好地了解指定区域或者点的信息。
以下是具体实现过程：
首先，从 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},
...
]
以上面的数据为例，将经纬度表示为数组：
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 类型，方便后面的计算。
首先需要通过 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),
});
}
}
接下来就是通过定时器实现轮播高亮的过程。这里我们定义了一个 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
});
})();
以下是两个使用此方法实现的Echarts轮播高亮地图的示例：
以上就是关于“一篇文章搞定echarts地图轮播高亮”的完整攻略，希望能够对你有所帮助。
本文链接：http://task.lmcjl.com/news/8494.html