vue3 echarts ts 环形图中间文字 样式设置

vue3+echarts 开发环形图

环形图中间的文字设置

title: {
      text: '{b|工业}',
      subtext: '{a|下降14%}',
      subtextStyle:{
        rich:{
          a:{
            fontSize:"15",
            color:'#61F4F5',


          }
        }
      },
      textStyle:{
        rich:{
          b:{
            fontSize:"15",
            color:'#fff',
          }
        }
      },
      left: 'center',
      top:85
    },

text是主标题 subtext是副标题

可用代码中rich的写法对主标签和副标题进行样式定义

其中，要想标题水平居中用：left: 'center'

标题的垂直居中：top: 'center'

但是在实际中发现并不能完全满足主副标题垂直水平居中的需求

这时候就可以修改top的值 将 top: 'center'改为top: 70等数字 根据实际需求来

包括其他echarts的图表 如果有用到主副标题的样式 都可以参考示例的rich

修改前：

修改后：