如何获取echarts创建的条形图中网格的像素高度

Question

我有一个角度应用程序，带有显示分布的 bar 类型的 echart (v5.5.1)，我使用 large: true 选项，因为我的系列中最多可以有 32k 个类别。

我想创建一个“矩形”类型的图形形状，其范围从值 x0 到值 x1，并覆盖从 0 到 maxY 的所有网格区域。

我的配置是：

const x0 = this.chart.convertToPixel({ gridIndex: 0 }, from);

const x1 = this.chart.convertToPixel({ gridIndex: 0 }, to);

{
  xAxis: {
    type: 'category',
    data: labels,
  },
  yAxis: {
    name: 'y axis',
  },
  series: [mySeries],
  graphic: {
  type: 'rect',
  z: -10,
  shape: {
    x: x0,
    width: x1-x0,
    y: 0,
    height: <-- this is the value i am missing
  },
  style: {
    fill: 'red',
  }
}
};

我尝试将高度设置为：

height: (params)=>{
return params.coordSys.height;
}

但这不起作用..它甚至没有被调用。

有什么建议吗？

Answer 1

1. getGridHeight 函数利用 ECharts 的内部模型来获取 直接网格高度。
2. getGridHeightFromPixels函数使用坐标转换来计算高度。
3. 我还提供了一种基于事件的方法，可以在图表完全渲染后更新高度。

// Solution 1: Get grid height using getModel() method
function getGridHeight(chart: echarts.EChartsType): number {
  const gridModel = chart.getModel().getComponent('grid');
  if (!gridModel) return 0;
  
  return gridModel.getRect().height;
}

// Solution 2: Use convertToPixel to get grid boundaries
function getGridHeightFromPixels(chart: echarts.EChartsType): number {
  // Get the y-coordinates of the top and bottom of the grid
  const yTop = chart.convertToPixel({ gridIndex: 0 }, [0, 1]);
  const yBottom = chart.convertToPixel({ gridIndex: 0 }, [0, 0]);
  
  if (Array.isArray(yTop) && Array.isArray(yBottom)) {
    return Math.abs(yBottom[1] - yTop[1]);
  }
  return 0;
}

// Usage in your chart configuration
const chartOptions: echarts.EChartsOption = {
  xAxis: {
    type: 'category',
    data: labels,
  },
  yAxis: {
    name: 'y axis',
  },
  series: [mySeries],
  graphic: [{
    type: 'rect',
    z: -10,
    shape: {
      x: x0,
      width: x1 - x0,
      y: 0,
      // Use one of these methods:
      height: getGridHeight(chart)
      // or
      // height: getGridHeightFromPixels(chart)
    },
    style: {
      fill: 'red',
    }
  }]
};

// Alternative approach using graphic.elements
const chartOptions2: echarts.EChartsOption = {
  // ... other options ...
  graphic: [{
    type: 'rect',
    z: -10,
    // Use $action to ensure the element updates
    $action: 'replace',
    onclick: function(params) {
      console.log('clicked');
    },
    shape: {
      x: x0,
      width: x1 - x0,
      y: 0,
      height: 0  // Will be updated in setup
    },
    style: {
      fill: 'red',
    }
  }],
};

// Update the height after chart is initialized
chart.on('finished', () => {
  const height = getGridHeight(chart);
  const graphicElements = chartOptions2.graphic as echarts.GraphicComponentOption[];
  
  if (graphicElements && graphicElements[0]) {
    graphicElements[0].shape = {
      ...graphicElements[0].shape,
      height: height
    };
    chart.setOption(chartOptions2);
  }
});

// Helper method to ensure grid dimensions are accurate
function updateGraphicAfterRender(chart: echarts.EChartsType): void {
  setTimeout(() => {
    const height = getGridHeight(chart);
    chart.setOption({
      graphic: [{
        type: 'rect',
        z: -10,
        shape: {
          x: x0,
          width: x1 - x0,
          y: 0,
          height: height
        },
        style: {
          fill: 'red',
        }
      }]
    });
  }, 0);
}