echarts实现湖南省地图并且定时轮询

1、在HTML页面引入echarts.min.js

<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

2、实现代码

<!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 和 dataIndexmyChart.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>