首页 前端知识 echarts 3d中国地图,label无法显示

echarts 3d中国地图,label无法显示

2024-02-25 11:02:47 前端知识 前端哥 537 766 我要收藏

 在使用echarts-gl 中的 geo3d 制作3d中国地图时遇到的问题;

在配置中加了label.show = true 任然无法的在省份显示省份名称,但是注册的是省份地图的话,配置label.show = true可以展示label;

option = {
      geo3D: {
        map: 'china',
        // shading: "lambert",
        itemStyle: {
          borderWidth: .7,
          color: 'rgba(26, 109, 194)',
          opacity: .4,
          borderColor: '#169C89',
        },
        label: {
          show: true,
          color: "white",
        },
        emphasis: {
          label: {
            show: false,
          }
        },

        viewControl: {
          alpha: 70,
          distance: 100,
        },
        instancing: true,
        series: []
      },
    };

 结果:

 解决办法 使用formatter ,并且不要直接返回name,直接返回name会导致label仍不显示。我的例子中在name后加了空格

option = {
      geo3D: {
        map: 'china',
        // shading: "lambert",
        itemStyle: {
          borderWidth: .7,
          color: 'rgba(26, 109, 194)',
          opacity: .4,
          borderColor: '#169C89',
        },
        label: {
          show: true,
          color: "white",
          formatter: function ({name}) {
            console.log(name)
            return `${name} ` //注意name后加了空格
          },
         // formatter: function ({name}) {
         //  return name //直接返回name无效
         // }
        },
        emphasis: {
          label: {
            show: false,
          }
        },

        viewControl: {
          alpha: 70,
          distance: 100,
        },
        instancing: true,
        series: []
      },
    };

效果: 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2692.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!