1、在HTML页面引入echarts.min.js
javascript
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
2、实现代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>湖南省地图</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<style>
#main {
width: 100%;
height: 600px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="main"></div>
<script>
const xhr = new XMLHttpRequest();
xhr.open('GET', 'hunan.json', true);
xhr.onload = function () {
if (xhr.status === 200) {
echarts.registerMap('hunan', JSON.parse(xhr.responseText));
const data = [
{ name: '长沙市', value: 120 },
{ name: '株洲市', value: 98 },
{ name: '湘潭市', value: 76 },
{ name: '衡阳市', value: 54 },
{ name: '岳阳市', value: 45 },
{ name: '常德市', value: 43 },
{ name: '张家界市', value: 38 },
{ name: '益阳市', value: 35 },
{ name: '娄底市', value: 29 },
{ name: '郴州市', value: 25 },
{ name: '永州市', value: 20 },
{ name: '怀化市', value: 18 },
{ name: '邵阳市', value: 15 },
{ name: '湘西土家族苗族自治州', value: 6 },
];
const myChart = echarts.init(document.getElementById('main'));
const option = {
title: {
text: '湖南省各市数据情况',
subtext: '数据来源于XXX',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}: {c}',
axisPointer: {
type: 'line' // 可选:使用线状指示器
}
},
visualMap: {
min: 0,
max: 150,
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true,
inRange: {
color: ['#d94e5d', '#eac736', '#50a3ba']
}
},
series: [
{
name: '数据量',
type: 'map',
roam: false,
map: 'hunan',
label: {
show: true,
fontSize: 10,
position: 'inside',
offset: [0, 5],
color: '#fff',
emphasis: {
show: true
}
},
itemStyle: {
areaColor: '#323c48',
borderColor: '#fff'
},
data: data
}
]
};
myChart.setOption(option);
// 封装的轮询函数
function startCityPolling() {
let currentIndex = 0;
setInterval(() => {
// 清除之前高亮并重置所有市的颜色
option.series[0].data.forEach((item) => {
item.itemStyle = {
areaColor: '#323c48', // 默认颜色
borderColor: '#fff'
};
});
// 高亮当前市并修改颜色
const currentItem = option.series[0].data[currentIndex];
currentItem.itemStyle = {
areaColor: '#ff6347', // 高亮颜色
borderColor: '#fff'
};
// 更新图表配置并刷新显示
myChart.setOption(option);
// 确保调用 dispatchAction 时,正确的 seriesIndex 和 dataIndex
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0, // 确保这是你的系列的索引
dataIndex: currentIndex // 当前高亮城市的索引
});
// 更新当前索引
currentIndex = (currentIndex + 1) % option.series[0].data.length; // 使用 option 中的长度保证正常循环
}, 2000); // 每2秒切换一次
}
// 启动轮询
startCityPolling();
} else {
console.error('无法加载湖南地图数据');
}
};
xhr.send();
</script>
</body>
</html>
3、实现效果
其它省份修改对应的json文件即可