美文网首页
echarts 柱状图设置最小高度 barMinHeight

echarts 柱状图设置最小高度 barMinHeight

作者: 不要面包要蛋糕 | 来源:发表于2023-10-08 11:11 被阅读0次

柱状图值与 y 轴起点值相同时,柱状图不会显示,如果需要显示,可以给柱状图设置最小高度

使用 barMinHeight 属性给柱状图设置最小高度

y轴起点为0时

// 设置最小高度 10
const barData = [10, 20, 30]
series:{
  type: 'bar',
  data: barData,
  barMinHeight: 10,
}

以上写法只适用于 y 轴起点为 0 的情况,y 轴起点不为 0 的时候,比如自适应坐标轴起点时,设置的 10,有时候会看不到,或者表现的高度不对。

y轴起点不为 0 时,需要计算起点,再加上需要显示的最小高度

// 设置最小高度 3
 renderBarMinHeight(barMinHeight = 3) {
  // 获取渲染的 chart 示例
  const chart = this.$refs.echart.getInstance();
  const option = chart.getOption();
  const series = option.series;
  const yAxis = option.yAxis;
  if (yAxis?.length) {
    yAxis.forEach((axis, idx) => {
      const serie = series.find((item) => item.yAxisIndex === idx) || series[0];
      if (serie.type === 'bar') {
        // _extent 里面是 y 轴的最小值和最大值,格式如 [2,100]
        const { _extent: yAxisScale } = chart.getModel().getComponent('yAxis', idx).axis.scale;
        const yMin = yAxisScale[0];
        // 将 y 轴上的点转为 px 长度值,坐标原点为左上角,越往下,px 越大,barMinHeight 是从 y 轴为 0 处开始计算
        // y 轴 0 点距离左上角坐标原点的高度
        const zeroPx = chart.convertToPixel({ yAxisIndex: idx }, 0);
        // y 轴起点点距离左上角坐标原点的高度
        const minPx = chart.convertToPixel({ yAxisIndex: idx }, yMin);
        // zeroPx - minPx: y 轴从 0 到起点,被隐藏的高度, 加上 barMinHeight,显示出来的最小高度即为设置的最小高度
        serie.barMinHeight = zeroPx - minPx + barMinHeight;
      }
    });
  }
  chart.setOption({ series });
}

以上动态计算的高度,在图表渲染完成后,再调用。在 vue 中,可在 setOption 中,在渲染后的 $nextTick 里面进行调用。

相关文章

网友评论

      本文标题:echarts 柱状图设置最小高度 barMinHeight

      本文链接:https://www.haomeiwen.com/subject/kocbbdtx.html