关于echarts的圆环中间数值显示问题

遇到的问题就是只有鼠标悬停在对应数据的时候 它是数值才出现 圆环嘛 一个商品销售量 一个剩余量 最终形成的图形 按照视频走的话 只显示了一部分 后来查到这，就索性截图，后面再忘记就回来翻一哈@ 特别纯粹的笔记

<template>
  <div class="com-container">
    <div class="com-chart" id="stock">
    </div>
  </div>
</template>

<script>
export default {
  name: "Stock"
}
</script>
<script setup>
import { onMounted, onBeforeUnmount,ref } from "vue";
import * as echarts from 'echarts';
import {getStockInfo} from "../http/api/stock";
let echartsInstance=null;
let allData =ref(null);
//当前显示页面
const currentIndex = ref(0);
//定时器
let timeId = null;
//屏幕适配
const titleFontSize = ref(0)
onMounted(()=>{
  // 初始化
  initChart();
  //获取数据
  getData();
  //屏幕适配
  window.addEventListener('resize',screenAdapter);
  //主动触发一下屏幕配置
  screenAdapter();
})
//组件被销毁前
onBeforeUnmount(()=>{
  window.removeEventListener('resize',screenAdapter);
  clearInterval(timeId)
})
//初始化图表
function initChart(){
  echartsInstance = echarts.init(document.querySelector('#stock'),'dark')
  const initOption = {
    title:{
      text:'▌库存和销量分析',
      top:'5%',
      left:'5%'
    },
  }
  echartsInstance.setOption(initOption)
}
//请求数据
async function getData(){
  allData.value = await getStockInfo();
  //更新
  updateChart()
  //增加一个定时器
  startInterval()
}
//更新图表
function updateChart(){
  const centerArr = [
    ['18%', '40%'],
    ['50%', '40%'],
    ['82%', '40%'],
    ['34%', '75%'],
    ['66%', '75%']
  ]
  const colorArr = [
    ['#4FF778', '#0BA82C'],
    ['#E5DD45', '#E8B11C'],
    ['#E8821C', '#E55445'],
    ['#5052EE', '#AB6EE5'],
    ['#23E5E5', '#2E72BF']
  ]
  const start = currentIndex.value * 5
  const end = (currentIndex.value +1) * 5
  const showData = allData.value.slice(start,end);
  const seriesArr = showData.map((item,index)=>{
    return{
      type:'pie',
      radius:[110,100],
      center:centerArr[index],
      hoverAnimation:false, //这个命令废弃了 用scale代替了已经?
      // emphasis:{
      //   scale:false,
      // },
      labelLine:{
        show:false
      },
      label: {
        position: 'center',
        color: colorArr[index][0]
      },
      data:[
        {
          name:item.name + '\n' + item.sales,
          value:item.sales,
          itemStyle:{
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: colorArr[index][0]
              },
              {
                offset: 1,
                color: colorArr[index][1]
              }
            ])
          },
          **label**:{
              show:true
          }
        },
        {
          value:item.stock,
          itemStyle: {
            color:' #333843'
          },
          label: {
            show: false
          }
        }
      ],
    }
  })
  const dataOption ={
    series:seriesArr
  }
  echartsInstance.setOption(dataOption)
}
//屏幕适配
function screenAdapter(){
  titleFontSize.value = document.querySelector('#stock').offsetWidth /100 * 3.6
  const innerRadius = titleFontSize.value * 2
  const outterRadius = innerRadius * 1.125

  const adapterOption = {
    title: {
      textStyle:{
        fontSize:titleFontSize.value
      }
    },
    series: [
      {
        type:'pie',
        radius:[outterRadius,innerRadius],
        label:{
          fontSize: titleFontSize.value /2
        }
      },
      {
        type:'pie',
        radius:[outterRadius,innerRadius],
        label:{
          fontSize: titleFontSize.value /2
        }
      },
      {
        type:'pie',
        radius:[outterRadius,innerRadius],
        label:{
          fontSize: titleFontSize.value /2
        }
      },
      {
        type:'pie',
        radius:[outterRadius,innerRadius],
        label:{
          fontSize: titleFontSize.value /2
        }
      },
      {
        type:'pie',
        radius:[outterRadius,innerRadius],
        label:{
          fontSize: titleFontSize.value /2
        }
      },
    ]
  }
  echartsInstance.setOption(adapterOption);
  echartsInstance.resize()


}
//定时器
function startInterval(){
  if (timeId){
    clearInterval(timeId)
  }
  timeId = setInterval(()=>{
    currentIndex.value ++
    if(currentIndex.value>1){
      currentIndex.value = 0
    }
    updateChart();
  },3000)
}

</script>

<style scoped>

</style>