echarts ring chart, pie chart custom title centered display

need

insert image description here

method one

Use a div 定位to put the numbers in the middle of the pie chart

  <div style="position: relative;">
      <pieChart :chartObj="usageMap" />
      <div class="pieNum" :style="{ left: drawer ? '40px' : '65px' }">
       <div class="pieTitle" v-if="usageMap">
         <div>{
   
   { usageMap.usedPosCount }}</div>
          <div class="pieLine" v-if="usageMap.totalPosCount"></div>
          <div>{
   
   { usageMap.totalPosCount }}</div>
        </div>
   </div> 
 </div>

css

<style rel="stylesheet/scss" lang="scss" scoped>
.pieNum {
    
    
    color: #fff;
    position: absolute;
    top: 45px;

}

.pieTitle {
    
    
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
}

.pieLine {
    
    
    width: 40px;
    height: 1px;
    background-color: #fff;
}
</style>

Effect

also fulfilled the requirement
insert image description here

However, when the screen changes, the numbers don't adapt
insert image description here

shortcoming

It cannot be adapted to all screens, and the position cannot be moved according to the size of the screen

Method Two

Use titlethe properties that come with the ring chart 自定义titleto display the data

the code

 title: {
    
    
                    top: 'center',
                    text: [
                        '{value|' + this.chartObj.usedPosCount + '}', '{sortLine|———}',
                        '{name|' + this.chartObj.totalPosCount + '}',
                    ].join('\n'),

                    left: '21%',
                    top: '25%',
                    textAlign: 'center',
                    textStyle: {
    
    
                        rich: {
    
    
                            value: {
    
    
                                color: '#ffff',
                                fontSize: 16,

                            },
                            name: {
    
    
                                color: '#ffff',
                                fontSize: 16,
                            },
                            sortLine: {
    
    
                                color: '#ffff',
                                fontSize: 16,

                            },
                        },
                    },
                },

renderings

insert image description here
Reference link https://blog.csdn.net/Guoyu1_/article/details/116978413