这里用的echarts版本是5.3.2，以福建省的的地图为例，页面进入时地图块开始轮播高亮，鼠标移入地图块停止轮播，鼠标移出地图块继续轮播高亮
实现效果：
实现代码如下：
<template>
<div id="map-chart" ref="mapInfo"></div>
</template>
<script>
import mapJson from "../data/fujian.json";
import * as echarts from "echarts";
export default {
data() {
return {
icon: require("@/assets/img/analyzeData/icon.png"),
mapname_bg: require("@/assets/img/analyzeData/mapname_bg.png"),
mapDate: [
{
name: "福州市",
value: [119.4, 26],
year: "2022年",
residentPopulation: 123,
residencePopulation: 15,
},
{
// name: "平潭综合试验区",
name: "平潭县",
value: [119.84, 25.67],
year: "2022年",
residentPopulation: 123,
residencePopulation: 15,
},
{
name: "厦门市",
value: [118.18, 24.45],
year: "2022年",
residentPopulation: 123,
residencePopulation: 15,
},
{
name: "莆田市",
value: [119, 25.34],
year: "2022年",
residentPopulation: 123,
residencePopulation: 15,
},
{
name: "三明市",
value: [117.61, 26.23],
year: "2022年",
residentPopulation: 123,
residencePopulation: 15,
},
{
name: "泉州市",
value: [118.2, 25.13],
year: "2022年",
residentPopulation: 123,
residencePopulation: 15,
},
{
name: "漳州市",
value: [117.58, 24.22],
year: "2022年",
residentPopulation: 123,
residencePopulation: 15,
},
{
name: "南平市",
value: [118.16, 27.4],
year: "2022年",
residentPopulation: 123,
residencePopulation: 15,
},
{
name: "龙岩市",
value: [116.51, 25.12],
year: "2022年",
residentPopulation: 123,
residencePopulation: 15,
},
{
name: "宁德市",
value: [119.72, 26.95],
year: "2022年",
residentPopulation: 123,
residencePopulation: 15,
},
],
cartoonIndex: 0,
curHoverIndex: null,
curSelectName: "",
hoverTimer: null,
};
},
watch: {
// 这里是记录轮播到的index,可以传给父元素去进行别的操作，不需要的可以忽略
curHoverIndex() {
if (this.curHoverIndex !== -1) {
let info = {
name: this.mapDate[this.curHoverIndex].name,
};
this.$emit("hoverIndexChange", info);
}
},
},
mounted() {
this.$nextTick(() => {
this.init();
});
},
methods: {
init() {
let _this = this;
echarts.registerMap("fujian", mapJson);
let dom = document.getElementById("map-chart");
let myChart = echarts.init(dom);
let option = {
title: {
top: 20,
text: "",
subtext: "",
x: "center",
textStyle: {
color: "#ccc",
},
},
tooltip: {
backgroundColor: "rgba(0,0,0,.8)",
top: "-500px",
trigger: "item",
textStyle: {
fontSize: 16,
color: "#fff",
fontWeight: 500,
},
formatter: function (params) {
let data = _this.mapDate[params.dataIndex];
return `<span style="margin-bottom: 10px">${params.marker} ${params.name}</span><br/>
<span style="margin-bottom: 5px">统计范围： ${data.year}</span><br/>
<span style="margin-bottom: 5px">年末常驻总人口（万人）： ${data.residentPopulation}</span><br/>
<span>年末户籍总人口： ${data.residencePopulation}</span>`;
},
z: 9999,
},
visualMap: {
show: false,
min: 0,
max: 1000000,
right: 100,
seriesIndex: 1,
type: "piecewise",
bottom: 100,
textStyle: {
color: "#FFFF",
},
},
geo: [
// 地图最外城边框
{
map: "fujian",
aspectScale: 0.75,
zoom: 0.81,
layoutCenter: ["50%", "50%"],
layoutSize: "120%",
show: true,
roam: false,
label: {
emphasis: {
show: false,
},
},
itemStyle: {
normal: {
borderColor: "rgba(192,245,249,.8)",
borderWidth: 1,
shadowColor: "#6FFDFF",
shadowOffsetY: 0,
shadowBlur: 10,
areaColor: "rgba(29,85,139,.6)",
},
},
emphasis: {
areaColor: "rgba(29,85,139,.6)",
},
},
// 地图最外层光晕
{
map: "fujian",
aspectScale: 0.75,
zoom: 0.81,
layoutCenter: ["50%", "50%"],
layoutSize: "120%",
show: true,
roam: false,
label: {
emphasis: {
show: false,
},
},
itemStyle: {
normal: {
borderColor: "rgba(192,245,249,.8)",
borderWidth: 3,
shadowColor: "#2C99F6",
shadowOffsetY: 0,
shadowBlur: 100,
areaColor: "rgba(29,85,139,.6)",
},
},
emphasis: {
areaColor: "rgba(29,85,139,.6)",
},
},
],
series: [
{
type: "map",
label: {
normal: {
show: false,
textStyle: {
color: "#fff",
},
// rotate: "50",
},
emphasis: {
show: false,
textStyle: {
color: "#fff",
},
},
},
//地图块渐变颜色设置
itemStyle: {
normal: {
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#00b1fe", // 0% 处的颜色
},
{
offset: 1,
// color: "#084284", // 100% 处的颜色
color: "#0344cf", // 100% 处的颜色
},
],
},
borderColor: "#06b2ef",
borderWidth: 1,
},
emphasis: {
areaColor: "#01aefb",
borderColor: "#fff",
borderWidth: 1,
shadowColor: "rgba(0, 255, 255, 0.7)",
shadowBlur: 10,
label: {
show: false,
},
},
},
// 设置鼠标点击后地图块被选中的样式,因为项目原因不需要这个所以在下面的代码我把选中效果去掉了，这里只是为了覆盖原有的选中样式
select: {
// 点击后鼠标离开样式
label: {
show: false,
color: "rgba(255, 246, 0, 1)", // 子区域字体颜色
},
itemStyle: {
areaColor: "#01aefb",
borderColor: "#fff",
},
},
zoom: 1.2,
roam: false,
map: "fujian", //使用
},
{
type: "scatter",
coordinateSystem: "geo",
itemStyle: {
color: "#f00",
},
symbol: function () {
let iconImg = "image:/" + _this.icon;
return iconImg;
},
// symbolRotate: 50,
symbolSize: [35, 30],
// symbolOffset: [0, -20],
z: 9999,
data: this.mapDate,
},
{
type: "scatter",
coordinateSystem: "geo",
//地图文字设置
label: {
normal: {
show: true,
formatter: function (params) {
var name = params.name;
// var value = params.data.datas;
// var text = `{fline|${value}}\n{tline|${name}}`;
var text = `{fline|${name}}`;
return text;
},
color: "#fff",
// rotate: 50,
rich: {
fline: {
padding: [8, 0, 0, 0],
color: "#fff",
textShadowColor: "#030615",
// textShadowBlur: "100",
textShadowOffsetX: 1,
textShadowOffsetY: 1,
fontSize: 16,
fontWeight: 550,
},
},
},
emphasis: {
show: true,
},
},
itemStyle: {
color: "#00FFF6",
},
// 地图文字背景框设置
symbol: "image:/" + this.mapname_bg,
// symbolRotate: 50,
symbolSize: [80, 30],
symbolOffset: [0, -28],
z: 999,
data: this.mapDate,
},
],
};
myChart.setOption(option);
this.cartoonIndex = -1;
window.addEventListener("resize", () => {
myChart.resize();
});
this.mapSet(myChart, true);
this.initTimer(myChart);
myChart.on("mousemove", function (e) {
clearInterval(_this.hoverTimer);
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
});
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: e.dataIndex,
});
}); //鼠标移入静止播放
myChart.on("mouseout", function (e) {
clearInterval(_this.hoverTimer);
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: e.dataIndex,
}); //鼠标移出后先把上次的高亮取消
// 把点击过的选中样式去掉
if (this.curSelectName) {
myChart.clear();
myChart.setOption(option);
}
_this.initTimer(myChart);
});
myChart.on("click", function (e) {
this.curSelectName = e.name;
let index = _this.mapDate.findIndex((item) => item.name === e.name);
_this.curHoverIndex = index;
});
},
// 地图定时轮播动画
initTimer(myChart) {
this.hoverTimer = setInterval(() => {
this.mapSet(myChart);
this.cartoonIndex++;
if (this.cartoonIndex >= this.mapDate.length) {
this.cartoonIndex = -1;
}
this.curHoverIndex = this.cartoonIndex;
}, 5000);
},
mapSet(myChart, isfirst) {
// 隐藏提示框
myChart.dispatchAction({
type: "hideTip",
seriesIndex: 0,
dataIndex: this.cartoonIndex,
});
// 显示提示框
myChart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: this.cartoonIndex + 1,
});
// 取消高亮指定的数据图形
myChart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: this.cartoonIndex,
});
// 高亮指定的数据图形
myChart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: this.cartoonIndex + 1,
});
if (isfirst) {
this.cartoonIndex++;
this.curHoverIndex = this.cartoonIndex;
}
},
},
};
</script>
<style>
#map-chart {
width: 550px;
height: 500px;
}
</style>
