echarts 地图正常显示,但是 tooltip数据 不显示问题

问题:

  1. 地图不显示背景颜色
  2. 地图tooltip只显示名称,不显示值
  3. 地图无法根据绑定的数据进行颜色渐变展示

解决方法:

  • 在itemStyle里面配置normal和emphasis项。normal不能缺少!
//地图区域块样式
                        itemStyle: {
                            normal:{
                                // areaColor: "blue",
                                borderColor: "#41b8ff",
                                borderWidth: 1,
                            },
                            emphasis: {
                                borderColor: "#fff",
                                shadowBlur: 10,   // 模糊度
                                shadowColor: "rgba(0,255,244,0.6)",  // 模糊阴影的颜色
                                borderWidth: 4,
                                color: "#41b8ff",    // 鼠标选择区域颜色
                            }
                        },
  • 踩大雷!数据值缺少或者无法与地图名称匹配,会导致tooltip提示框无法正常显示,经过检查,发现地图中name与传给地图的数据对不上,比如“北京市”和“北京”。可以考虑统一,自己用代码或者手动。
{
  "北京市": "北京",
  "天津市":"天津",
  "河北省": "河北",
  "山西省":"山西",
  "内蒙古自治区": "内蒙古",
  "辽宁省":"辽宁",
  "吉林省": "吉林",
  "黑龙江省":"黑龙江",
  "上海市": "上海",
  "江苏省":"江苏",
  "浙江省": "浙江",
  "安徽省":"安徽",
  "福建省": "福建",
  "江西省":"江西",
  "山东省": "山东",
  "河南省":"河南",
  "湖北省": "湖北",
  "湖南省":"湖南",
  "广东省": "广东",
  "广西壮族自治区":"广西",
  "海南省": "海南",
  "重庆市": "重庆",
  "四川省": "四川",
  "贵州省": "贵州",
  "云南省": "云南",
  "西藏自治区": "西藏",
  "陕西省": "陕西",
  "甘肃省": "甘肃",
  "青海省": "青海",
  "宁夏回族自治区": "宁夏",
  "新疆维吾尔自治区": "新疆",
  "台湾省": "台湾",
  "香港特别行政区": "香港",
  "澳门特别行政区": "澳门"
}
  •  option里面设置visualMap,并且在series里面指定地图的visualMapIndex
            visualMap: 
                    [
                        {
                        type: 'continuous',
                        min: 0,
                        max: 2500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'],
                        calculable: true,
                        colorLightness: [0.2, 1],
                        inRange:{
                            color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
                        },
                        // dimension: 0,
                        }
                    ],

示例

参考:https://www.cnblogs.com/liuXiaoDi/p/16966531.html

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值