解决 echarts 缩放时文字不缩放的问题

前端

2023-09-05 12:51:08

前言

echarts 提供了丰富的交互功能，其中包括缩放。当使用鼠标或触控板缩放图表时，图形元素（例如线条、柱形图和饼图）会相应调整大小。然而，默认情况下，文本标签（例如数据标签和坐标轴标签）不会随缩放而缩放。

问题

在某些情况下，文本标签的大小相对于缩放后的图形元素可能变得不合适。例如，如果图表包含大量数据，文本标签可能会变得难以阅读或重叠。

解决方法

为了让文本标签随 echarts 缩放而缩放，我们需要修改图表配置。有两种方法可以实现这一点：

1. 使用 scale 属性

chart.setOption({
  dataZoom: [
    {
      type: 'inside',
      start: 0,
      end: 100,
      zoomOnMouseWheel: true,
      roam: true,
      // 启用文字缩放
      textStyle: {
        fontSize: 12,
        textBorderWidth: 1,
      },
    },
  ],
});

在 textStyle 配置中设置 fontSize 和 textBorderWidth 属性可控制文本标签的大小。缩放时，这些属性的值会自动调整。

2. 使用 onZoom 事件处理程序

chart.on('zoom', function (params) {
  // 计算文本标签的新字体大小
  var fontSize = params.scale * 12;

  // 更新文本标签的样式
  chart.setOption({
    textStyle: {
      fontSize: fontSize,
    },
  });
});

onZoom 事件处理程序会在图表缩放时触发。在处理程序中，我们可以计算文本标签的新字体大小，并使用 setOption 方法更新图表配置。