主要代码
this.mapOptions = {
tooltip: {
show: true,
backgroundColor: "rgba(0,0,0,0.8)",
borderColor: "rgba(0,0,0,0.8)",
textStyle: {
color: "#fff"
},
formatter: function(params) {
_this.tooltipIndex = params.dataIndex;
const _val = params.value ? params.value : "-";
const html = "<div class='fd-tooltip-box'><p>" + params.name + "</p><p>" + params.marker + " " + _type + " " + _val + "</p></div>";
return html;
}
},
visualMap: {
show: true,
min: 0,
max: 200,
left: "20",
top: "bottom",
orient: "horizontal",
inverse: true,
calculable: true,
seriesIndex: [0],
text: ["高", "低"],
inRange: {
color: ["#bae7ff", "#69c0ff", "#1790ff", "#0050b3"] // 蓝绿
}
},
series: [{
type: "map",
mapType: "china",
selectedMode: "multiple",
// selectedMode: "false", // 是否允许选中多个区域
zoom: 1.2,
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
areaColor: "#1790ff",
borderColor: "#fff",
borderWidth: "1"
},
emphasis: {
areaColor: "#896ff4"
}
},
data: _this.mapData
}]
};
_this.myChart.setOption(this.mapOptions);
if (_this.timer) {
clearInterval(_this.timer);
}
//定时显示
_this.timer = setInterval(() => {
_this.myChart.dispatchAction({
type: "showTip", // 根据 tooltip 的配置项显示提示框。
seriesIndex: 0,
dataIndex: _this.tooltipIndex
});
// 如果不是第一个,在高亮之前取消上一个的高亮状态
if (_this.tooltipIndex !== 0) {
_this.myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: _this.tooltipIndex - 1
});
} else {
//如果是第一个,把最后一个高亮状态取消
_this.myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: _this.mapData.length - 1
});
}
// 设置当前index为高亮状态
_this.myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: _this.tooltipIndex
});
_this.tooltipIndex++;
if (_this.tooltipIndex > _this.mapData.length) {
_this.tooltipIndex = 0;
}
}, 3000);