apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.1k stars 19.6k forks source link

Underline is occupying MAX given width #17416

Closed RahulVishK closed 1 month ago

RahulVishK commented 2 years ago

What problem does this feature solve?

option = {
  grid: {
    left: 126,
    right: 67,
    bottom: 52,
    top: 33,
    containLabel: false
  },
  backgroundColor: '#fff',
  xAxis: [
    {
      type: 'value',

      name: '',
      min: 0,
      max: 100,
      nameRotate: 360,
      position: 'bottom',
      axisLabel: {
        color: '#6e7079',
        fontSize: 10
      }
    }
  ],
  series: [
    {
      type: 'bar',
            data: [20, 30, 40],
      z: 0
    }
  ],
  yAxis: [
    {
      data: ['SALES', 'MARKETING', 'Operations'],
      name: 'yaxis labels',
      type: 'category',
      nameGap: 99,
      nameLocation: 'middle',
      nameRotate: 90,
      position: 'left',
      inverse: true,
      triggerEvent: true,
      width: '20%',
      axisLine: {
        show: 1,
        onZero: false,
        lineStyle: {
          color: '#6e7079'
        }
      },
      axisLabel: {
        color: '#6e7079',
        fontSize: 10,
        fontStyle: 'normal',
        fontWeight: 'normal',
        z: 1,
        overflow: 'truncate',
        rotate: 360,
        interval: 0,
        width: 60,
        show: true,
        rich: {
          StylesOfUnderLine: {
            align: 'left',
            borderColor: 'black',
            width: '100%',
            borderWidth: 2,
            height: 0 // to avoid box or rectangle 
          }
        },
        formatter: (params) => {
          return params + '\n{StylesOfUnderLine|}'; //appending the underLine tag for underline
        },
      }
    }
  ],
  barCategoryGap: '10%'
};

Screenshot (85)

when width is given at the axisLabel level and in rich styles if we provide 100% of width .the underline for label is occupying the width space at axisLabel Level. the StylesOfUnderline tag should ignore the WIDTH property at axisLabel Level Or do we have any other way like providing custom width to StylesOfUnderline in rich tag for very label.

What does the proposed API look like?

in tag StylesOfUnderLine inside rich text should ignore the width provided at axisLabel level Screenshot (87) l

github-actions[bot] commented 1 month ago

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

github-actions[bot] commented 1 month ago

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!