最近开发的项目遇到了使用echarts创建地图图表数据不展示的问题。
期间考虑了异步,宏任务微任务,父子传值,props,生命周期等相关的排查均为解决,
最后定位到通过接口拿到的数据源,使用官方示例提供的数据能正常渲染。然后通过接口拿到的各省份数据却渲染不出来,且数据结构相同。
下面是官方给的参数。
经过对比发现接口拿到的参数中添加的有‘省’,‘市’,‘自治区’等相关字段
查看echarts内置的创建地图的js,发现确实是因为字符不对。
最后解决办法是对省份名称做了映射...
options:{
series: [
{
name: "交易金额",
type: "map",
mapType: "china",
zoom: 1.0,
roam: false, // 是否开启鼠标缩放和平移漫游
itemStyle: {
// 地图区域的多边形 图形样式
normal: {
// 是图形在默认状态下的样式
label: {
show: true,
textStyle: {
color: "#000",
fontSize: 9
}
}
},
emphasis: {
// 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
label: {show: true}
}
},
left: 0,
right: 10,
// bottom: 0,
top: 0, // 组件距离容器的距离
data: amountsData,
nameMap: {
'河北': '河北省',
'山西': '山西省',
'辽宁': '辽宁省',
'吉林': '吉林省',
'黑龙江': '黑龙江省',
'江苏': '江苏省',
'浙江': '浙江省',
'安徽': '安徽省',
'福建': '福建省',
'江西': '江西省',
'山东': '山东省',
'河南': '河南省',
'湖北': '湖北省',
'湖南': '湖南省',
'广东': '广东省',
'海南': '海南省',
'四川': '四川省',
'贵州': '贵州省',
'云南': '云南省',
'陕西': '陕西省',
'甘肃': '甘肃省',
'青海': '青海省',
'台湾': '台湾省',
'内蒙古': '内蒙古自治区',
'广西': '广西壮族自治区',
'西藏': '西藏自治区',
'宁夏': '宁夏回族自治区',
'新疆': '新疆维吾尔自治区',
'北京': '北京市',
'天津': '天津市',
'上海': '上海市',
'重庆': '重庆市',
'香港': '香港特别行政区',
'澳门': '澳门特别行政区'
}
}
]
}
站元素主机
感谢分享 赞一个
ESullivan
@站元素主机 :