ECharts地图进去直接显示数字和颜色问题_echarts地图鼠标移入颜色显示数据-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37517311/article/details/79896345

本文介绍使用ECharts在地图上展示省份名称及随机数值的方法，并解决了地图颜色调整的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上个月刚交付一个项目，最近没什么事，所以准备学学echarts，比较现在做图表什么的这个几乎是不二选择了。

然后一个朋友用echarts做地图方面的项目遇到一问题，让我解决下，顺手就记录下来了，也为方便以后遇到类似问题提供快速解决办法吧。

主要就两个问题，第一个问题是一张中国地图上面显示了省份的名称，但是需要在省份后面加上鼠标滑过时显示的value值，看完文档首先想到的是用nameMap去自定义名称映射，然后尴尬的发现英文不太好，写起来有点麻烦，果断换个方法，直接上代码吧

 series: [{
                        name: '会员量',
                        type: 'map',
                        mapType: provinces[0],
                        selectedMode: 'single',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: function (params) {
                                        var valueType =  Math.round(Math.random() * 100)
                                        return params + valueType
                                    },
                                    //                              地区名称颜色
                                    textStyle: {
                                        color: "#D3776C"
                                    },
                                },
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },

主要就黄色部分，数据是自己造假的；

接下来是第二个问题，就是中国地图颜色的改变，刚开始用的visualMap去设置的，写完发现没事用，一点作用没起，后来问我朋友这个echarts是哪个版本的，好吧，人家不知道，因为visualMap是在第三版才开始有的，这里不行，那就只能用dataRange了，直接看代码吧；

 dataRange: {
                        min: 0,
                        max: 100,
                        x: '-1000',
                        y: '-1000',
                        text:['高','低'], // 文本，默认为数值文本
                        calculable : true,
                        color:['#f8e9ba','#fabd03']//值域颜色
                    },

x和y是设置右边颜色区块的，这里设置为负值给他隐藏了，min和max是取值范围，因为我自己造的假数据是取的0到100的随机数，所以max是100