Echart: category text position adjustment of horizontal histogram

Preface

echarts The horizontal histogram of is also quite common , But the category text is basically on the left , such as ：

But you can always trust your project manager or product manager to get you into trouble , For example, it is shown to customers ui chart , The text is above ：

It's OK to negotiate with some talkative customers , But some customers ... The last thing we are forced to do is to develop .

Text

Can this effect be achieved ？ Although I have never seen anything like it , But it can really be realized .

Code

option = {
    
  xAxis: {
    
    type: 'value'
  },
  yAxis: {
    
    type: 'category',
    axisLabel: {
     show: false },
    data: ['abc', 'abcdefgh']
  },
  series: [
    {
    
      name: 'Cost',
      type: 'bar',
      label: {
    
        show: true,
        formatter: '{b}',
        position: 'left',
        align: 'left',
        offset: [10, -20]
      },
      barWidth: 20,
      data: [10, 20]
    }
  ]
};

design sketch

Be careful ：

1、 stay yAxis Must be added in axisLabel: { show: false }, , Otherwise, there will be two categories , such as ：

2、series in label Property configuration for （ The key ）

 label: {
    
   show: true,
   formatter: '{b}',
   position: 'left',
   align: 'left',
   offset: [10, -20]
 },

• show: true, Show category text
• position: 'left', Set to left, At first, the direction was wrong and it was set to top, Wasted a lot of time
• align: 'left', Set text alignment , You have to set , Otherwise, the text position will be inconsistent
• offset: [10, -20] Offset , The first is lateral offset ; The second is the vertical offset . The first one is based on the actual situation , The second suggested absolute value is equal to barWidth（ Width of column ）