echarts 地图正常显示,但是 tooltip 不显示问题
问题
这个问题已经不是第一次犯了,去年也犯过一次,特此记录。
echarts 配置项如下,可以正常显示地图,给 series 传入的数据格式也没有问题,数据传入后地图可以正常显示,但是鼠标移入发现 tooltip 无法显示 value 值,打印 tooltip-formatter-params 发现 value 为 NaN。最后发现是后台传入的省份名称和 china.json 名称不相等(比如后台返回:’北京市‘、china.json 中对应’北京‘)这样导致 echarts 的地图获取不到数据
mapOption: { tooltip: { trigger: 'item', backgroundColor: 'rgba(0,0,0,0.5)', textStyle: { color: '#fff' }, formatter: function (params) { //这里等获取后台数据后在设置 } }, series: [{ name: 'map', type: 'map', map: 'china', label: { show: true, color: '#555555', fontSize: 12 }, aspectScale: 0.75, layoutCenter: ['50%', '50%'], // 地图位置 layoutSize: '112%', itemStyle: { normal: { borderColor: '#ced1d3', borderWidth: 0.8, areaColor: '#f0f6fc' }, emphasis: { areaColor: '#1890ff' } }, data: [] }] }
解决
新建一个 JSON 文件来表明对应关系,当获取后台数据的时候,给 series 传入的参数通过 JSON 进行转化,成功!
{ "北京市": "北京", "天津市":"天津", "河北省": "河北", "山西省":"山西", "内蒙古自治区": "内蒙古", "辽宁省":"辽宁", "吉林省": "吉林", "黑龙江省":"黑龙江", "上海市": "上海", "江苏省":"江苏", "浙江省": "浙江", "安徽省":"安徽", "福建省": "福建", "江西省":"江西", "山东省": "山东", "河南省":"河南", "湖北省": "湖北", "湖南省":"湖南", "广东省": "广东", "广西壮族自治区":"广西", "海南省": "海南", "重庆市": "重庆", "四川省": "四川", "贵州省": "贵州", "云南省": "云南", "西藏自治区": "西藏", "陕西省": "陕西", "甘肃省": "甘肃", "青海省": "青海", "宁夏回族自治区": "宁夏", "新疆维吾尔自治区": "新疆", "台湾省": "台湾", "香港特别行政区": "香港", "澳门特别行政区": "澳门" }
开源中国博客地址:https://my.oschina.net/u/2998098/blog/1540520