前端 - echarts 中使用 echart-gl 的 map3D,地区高度调整后,标签高度没有被调整?

Question

{          type: 'map3D',          map: 'china',          boxWidth: 60,          boxHeight: 5,          boxDepth: 'auto',          regionHeight: 0.5,          roam: true,          selectedMode: 'multiple',          environment: environmentImage,          groundPlane: {            show: false,            color: '#00aaff'          },          instancing: false,          label: {            formatter(params) {              return params.name            },            distance: 100000          },          itemStyle: {            color: '#eee',            borderWidth: 0.5          },          emphasis: {            label: {              show: true            }          },          animation: true,          data: [            {              name: '广东省',              itemStyle: {                color: 'green',              },              label: {                show: true,                color: 'black',                distance: 100              },              height: 10            }          ]        }

希望的效果是广东省应该是放置在绿色的最上面,但是还是在之前的位置上。尝试使用了 distance 配置,但是发现没有效果。
这个如何让标签跟随区域的高度进行调整?

echart-gl 好像没有对 ts 的支持,而且像 height 这样的属性,官方文档写的是 regionHeight,也是折腾了一下才知道是 height 才起作用。如果没有其他属性可以保证标签可以跟随区域调整。那么有没有其他比较好的库可以实现类似的功能,最好提供了对应的 vue 组件支持 。

Answer 1

ECharts 的 map3D 图表类型确实在调整地区高度时不会自动调整标签的高度。标签的位置和高度通常是通过 label 配置项中的 distance 参数来控制的，它表示标签距离地面的距离。然而，在 map3D 中，这个距离是相对于地图表面的，而不是相对于地面的。

在你的代码中，你已经尝试在数据项中为广东省设置了 label 的 distance 为 100，但这可能并不足以将标签移动到期望的位置。这是因为 distance 的值可能需要根据地图的实际尺寸和比例进行调整。

一个可能的解决方案是尝试动态计算 distance 的值，使其与地区的高度相关联。然而，ECharts 的文档并没有明确指出如何实现这一点。你可能需要通过试验和错误来找到适合你的地图和数据的 distance 值。

另一种可能的解决方案是使用 ECharts 的 graphic 组件来手动创建和调整标签的位置。这可能需要更多的工作，但它提供了更大的灵活性，允许你精确地控制每个元素的位置。

总的来说，ECharts 的 map3D 在处理标签和地区高度方面可能有一些限制。你可能需要通过试验不同的配置和方法来找到最适合你的需求的解决方案。