ECharts:饼图中间添加文字

series: [
  {
    type: 'pie',
    radius: ['55%', '62%'],
    center: ['67%', '50%'],
    itemStyle: {
      borderRadius: 10,
      borderColor: '#fff',
      borderWidth: 2
    },
    label: {
      show: true,
      position: 'center',
      formatter: ({ value }) => {
        // 格式化数值为带单位的字符串(如1024 → 1024GB)
        const formattedValue = `${value}GB`;
        
        // 根据数值长度动态调整字体大小
        const fontSizeClass = String(value).length < 10 ? 'bM' : 'bS';
        
        return `{a|数据量}\n\n{${fontSizeClass}|${formattedValue}}`;
      },
      rich: {
        a: {
          color: '#111928',
          fontSize: 16,
          fontWeight: 900
        },
        bM: {
          fontSize: 16,
          fontWeight: 700,
          color: '#6B7280'
        },
        bS: {
          fontSize: 12,
          fontWeight: 700,
          color: '#6B7280'
        }
      }
    },
    labelLine: {
      show: false, // 饼图中心标签不需要连接线
      length: 10,
      length2: 30,
      minTurnAngle: 135,
      lineStyle: {
        type: 'dashed',
        width: 0.5
      }
    },
    encode: {
      itemName: 'product',
      value: '数据量'
    },
    data: [
      { value: total[2], name: '数据量' } // 明确绑定数据
    ]
  }
]

你可能感兴趣的:(前端,echarts,javascript,前端)