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

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文件即可

相关推荐
qq_364371721 小时前
Vue 内置组件 keep-alive 中 LRU 缓存淘汰策略和实现
前端·vue.js·缓存
y先森2 小时前
CSS3中的弹性布局之侧轴的对齐方式
前端·css·css3
new出一个对象5 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥6 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森7 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy7 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189117 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿8 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡9 小时前
commitlint校验git提交信息
前端
虾球xz9 小时前
游戏引擎学习第20天
前端·学习·游戏引擎