当前位置：首页 > article >正文

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

article 2024/11/17 0:26:40

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 和 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>