使用 dataZoom 时 apache echarts 中的条形图溢出

Question

我正在使用 apache echarts 版本 5.2.2 来渲染两个笛卡尔轴均带有 datazoom 的条形图。然而，我发现这个代码有一个容易重现的错误，可以在dataZoom文档中找到。

这就是当我对条形图应用

inside

缩放时发生的情况，它最终会溢出 Y 轴的空间。

生成此代码的代码如下，可以粘贴到 echarts 示例页面：

option = {
    dataZoom: [
        {
            id: 'dataZoomX',
            type: 'inside',
            xAxisIndex: [0],
            filterMode: 'filter'
        },
        {
            id: 'dataZoomY',
            type: 'inside',
            yAxisIndex: [0],
            filterMode: 'empty'
        }
    ],
    xAxis: {type: 'value'},
    yAxis: {type: 'value'},
    series: {
        type: 'bar',
        data: [
            // The first column corresponds to xAxis,
            // and the second column corresponds to yAxis.
            [12, 24, 36],
            [90, 80, 70],
            [3, 9, 27],
            [1, 11, 111]
        ]
    }
}

我已阅读

filterMode

属性的建议配置，但是无论我使用

filter

、

weakFilter

等，都会发生此错误。我还看到这对于具有

 类型 X 轴的其他图表可以正常工作category

，但我的是

value

类型，并且

inside

缩放是强制性的。

我错过了什么吗？感谢您的帮助。

Answer 1

看起来 echarts 只要中心在网格内就可以放置条形。目前我没有看到解决这个问题的内置方法。以下是一些可能的建议：

1. 使用

   barMaxWidth

   和 yAxis

   offset

   的组合在条形图和 yAxis 之间留出空间。 （请注意，由于某种原因，

   offset

   需要第二个 y 轴才能正常工作）。

示例：

option = {
  dataZoom: [
    {
      id: 'dataZoomX',
      type: 'inside',
      xAxisIndex: [0],
      filterMode: 'filter'
    },
    {
      id: 'dataZoomY',
      type: 'inside',
      yAxisIndex: [1],
      filterMode: 'empty'
    }
  ],
  xAxis: { type: 'value' },
  yAxis: [{ show: false }, { position: 'left', offset: 20 }],
  series: {
    type: 'bar',
    yAxisIndex: 1,
    barMaxWidth: 40,
    data: [[12, 24],[90, 80],[3, 9],[1, 11]]
  }
};

2. 如果数据与轴重叠，请使用

   dataZoom

   事件自行调整数据。这是一个不完整的示例。由于某种原因，如果我以编程方式从控制台中

   layout.size

   对象中记录的值中读出，则

   myChart

   值会有所不同。如果您可以访问正确的值，它应该可以工作。