echarts地图鼠标划过不同的区域显示不同的值如何实现

echarts地图里面，根据鼠标划过不同的区域的值，区域显示不同的颜色

这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7480059
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：echarts柱状图与中国地图联动，鼠标移入柱状图，地图响应地显示数据
除此之外, 这篇博客: Echarts 地图配置拖动缩放/初始化缩放比例/不同地区显示不同颜色/地图和散点图结合中的 不同地区显示不同颜色 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="Echarts_kaifa.js"></script>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>
        <h4> 地图 </h4>
        <div id="map" style="width: 600px;height:400px;"></div>
    </div>
    <hr>
    <script>
        let myEchart = echarts.init(document.querySelector("#map"))
        let mapKey = 'fmap'
        var airData = [{
                name: '北京',
                value: 39.92
            },
            {
                name: '天津',
                value: 39.13
            },
            {
                name: '上海',
                value: 31.22
            },
            {
                name: '重庆',
                value: 66
            },
            {
                name: '河北',
                value: 147
            },
            {
                name: '河南',
                value: 113
            },
            {
                name: '云南',
                value: 25.04
            },
            {
                name: '辽宁',
                value: 50
            },
            {
                name: '黑龙江',
                value: 114
            },
            {
                name: '湖南',
                value: 175
            },
            {
                name: '安徽',
                value: 117
            },
            {
                name: '山东',
                value: 92
            },
            {
                name: '新疆',
                value: 84
            },
            {
                name: '江苏',
                value: 67
            },
            {
                name: '浙江',
                value: 84
            },
            {
                name: '江西',
                value: 96
            },
            {
                name: '湖北',
                value: 273
            },
            {
                name: '广西',
                value: 59
            },
            {
                name: '甘肃',
                value: 99
            },
            {
                name: '山西',
                value: 39
            },
            {
                name: '内蒙古',
                value: 58
            },
            {
                name: '陕西',
                value: 61
            },
            {
                name: '吉林',
                value: 51
            },
            {
                name: '福建',
                value: 29
            },
            {
                name: '贵州',
                value: 71
            },
            {
                name: '广东',
                value: 38
            },
            {
                name: '青海',
                value: 57
            },
            {
                name: '西藏',
                value: 24
            },
            {
                name: '四川',
                value: 58
            },
            {
                name: '宁夏',
                value: 52
            },
            {
                name: '海南',
                value: 54
            },
            {
                name: '台湾',
                value: 88
            },
            {
                name: '香港',
                value: 66
            },
            {
                name: '澳门',
                value: 77
            },
            {
                name: '南海诸岛',
                value: 55
            }
        ]
        $.get('json/map/china.json', ret => {
            // 注册地图的JSON数据
            echarts.registerMap(mapKey, ret)
            let option = {
                geo: {
                    type: 'map',
                    map: mapKey,
                    roam: true //拖动缩放
                },
                series: [{
                    data: airData,
                    geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
                    type: 'map'
                }],
                visualMap: {
                    min: 0,
                    max: 300,
                    inRange: {
                        color: ['white', 'red'] // 控制颜色渐变的范围
                    },
                    calculable: true // 出现滑块
                }
            }
            myEchart.setOption(option)
        })
    </script>
</body>

</html>

在这里插入图片描述

您还可以看一下童金浩老师的跟风舞烟学大数据可视化－Echarts从入门到上手实战课程中的【大数据可视化技术：Echarts】课程目标小节, 巩固相关知识点

echarts地图 鼠标划过不同的区域 显示不同的值如何实现

echarts地图鼠标划过不同的区域显示不同的值如何实现