echarts Allow percentages in label width parameter

7vux5j2d 于 4个月前发布在 Echarts

关注(0)|答案(3)|浏览(42)

What problem does this feature solve?

Right now label settings allow only fixed pixels number for the width parameter. In cases where chart width is varying (and that is probably most of the cases), it should be possible to allow labels have a full width "100%" setting.

What I am trying to achieve for my chart is having horizontal bar chart with labels above the bar itself. On the left it should show the data index name, on the right - the value. But since I don't know the final width of the chart, I am unable to "push" the right part of label to be truly on the right side.

What does the proposed API look like?

series -> label -> width - allow "100%" setting, not just pure number value.

echarts

来源：https://github.com/apache/echarts/issues/17874

3条答案

按热度按时间

mgdq6dx11#

Maybe you can try to use the labelLayout callback function to get the chart width and use it to calculate the position of the label.
Like this,

labelLayout(params) {
  // get chart width
  const chartWidth = myChart.getWidth();
  // ...
  return {
    // ...
  }
}

赞(0）回复(0）举报 4个月前

col17t5w2#

I think this is important feature and would be valuable if this extended to font-sizes as well

We're able to define bar/pie elements with percentages, but our labels don't follow. This makes it cumbersome having to write per-chart instance differences in to adjust the font size (which in the end is just eyeballing) .

If the font size supported typical CSS (%, px, em, vw) values that might help the charts be more responsive and scalable to pages that want to reuse the same chart in different scales or just simply have their charts follow font rules used elsewhere in the site.