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

在Vue 3和ECharts中，您可以通过设置series中label属性来自定义环形图中间文字的样式。以下是一个简单的例子，展示如何在使用ECharts和Vue 3时设置环形图中间文字的样式：

<template>
  <div ref="chart" style="width: 400px; height: 400px;"></div>
</template>
 
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
 
const chart = ref<HTMLElement | null>(null);
 
onMounted(() => {
  const option = {
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'center',
          formatter: '{b}\n{c}',
          style: {
            fontSize: 20,
            fontWeight: 'bold',
            color: '#333',
            textAlign: 'center'
          }
        },
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' },
          { value: 1548, name: '搜索引擎' }
        ]
      }
    ]
  };
 
  const chartInstance = echarts.init(chart.value as HTMLElement);
  chartInstance.setOption(option);
});
</script>

在这个例子中，label对象的show属性被设置为true以显示标签，position属性被设置为center以确保文本位于环形图的中心，formatter属性用于定义文本的格式，style属性用于设置文本样式，比如fontSize、fontWeight、color和textAlign等。这样，您就可以根据自己的需求自定义环形图中间文字的样式了。