【eCharts】vue创建地图图表数据不展示


最近开发的项目遇到了使用echarts创建地图图表数据不展示的问题。
期间考虑了异步,宏任务微任务,父子传值,props,生命周期等相关的排查均为解决,
最后定位到通过接口拿到的数据源,使用官方示例提供的数据能正常渲染。然后通过接口拿到的各省份数据却渲染不出来,且数据结构相同。
下面是官方给的参数。
Snipaste_2021-05-28_15-57-36.png

经过对比发现接口拿到的参数中添加的有‘省’,‘市’,‘自治区’等相关字段
查看echarts内置的创建地图的js,发现确实是因为字符不对。
Snipaste_2021-05-28_16-03-47.png

最后解决办法是对省份名称做了映射...

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: {
          '河北': '河北省',
          '山西': '山西省',
          '辽宁': '辽宁省',
          '吉林': '吉林省',
          '黑龙江': '黑龙江省',
          '江苏': '江苏省',
          '浙江': '浙江省',
          '安徽': '安徽省',
          '福建': '福建省',
          '江西': '江西省',
          '山东': '山东省',
          '河南': '河南省',
          '湖北': '湖北省',
          '湖南': '湖南省',
          '广东': '广东省',
          '海南': '海南省',
          '四川': '四川省',
          '贵州': '贵州省',
          '云南': '云南省',
          '陕西': '陕西省',
          '甘肃': '甘肃省',
          '青海': '青海省',
          '台湾': '台湾省',
          '内蒙古': '内蒙古自治区',
          '广西': '广西壮族自治区',
          '西藏': '西藏自治区',
          '宁夏': '宁夏回族自治区',
          '新疆': '新疆维吾尔自治区',
          '北京': '北京市',
          '天津': '天津市',
          '上海': '上海市',
          '重庆': '重庆市',
          '香港': '香港特别行政区',
          '澳门': '澳门特别行政区'
        }
      }
    ]
    }

声明:麋鹿与鲸鱼|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 【eCharts】vue创建地图图表数据不展示


Carpe Diem and Do what I like