echarts水球图label值颜色设置不知道为什么被覆盖了打印label是对的

Question

旁边的黑色字体是对的但是，一样的写法啊

 function initCharts() {
  var formatNumber = function (num: number) {
    var reg = /(?=(\B)(\d{3})+$)/g;
    return num.toString().replace(reg, ",");
  };
  // console.log('initChart', onlineData)//ok
  // 确保DOM元素存在
  const initChart = (domId: string, option: any) => {
    const dom = document.getElementById(domId);
    if (!dom) {
      console.warn(`DOM element with id ${domId} not found`);
      return null;
    }
    const chart = echarts.init(dom);
    // const chart = echarts.init(dom, null, { renderer: 'svg' }); // 使用 SVG 渲染
    chart.setOption(option);
    return chart;
  };
 const totalLine = Number.isInteger(totalLineRaw) ? totalLineRaw : parseFloat(totalLineRaw.toFixed(2));
  const charts = {
 online: initChart("Online", {
      title: [
        {
          // text: "{val|" + totalLine + "%}",
          top: "center",
          left: "center",
          textStyle: {
            rich: {
              val: {
                fontSize: 16,
                fontWeight: "bold",
                color: '#000',
              },
            },
          },
        },
      ],
      // tooltip: {
      //   trigger: 'item',
      //   formatter: function () {
      //     return `在线率：${totalLine}%`;
      //   },
      // },

      // color: ["#6cf5b6", "#DDD"],
      series: [
        {
          type: 'liquidFill',
          data: [totalLine / 100], // 转换为小数形式表示百分比
          radius: '80%', // 水球大小
          center: ['50%', '50%'], // 居中
          outline: {
            show: false, // 不要外圈边框
          },
          backgroundStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#6cf5b6' },  // 顶部颜色
                { offset: 1, color: getSqtbtmColor() }    // 底部颜色
              ]
            }
          },
          label: {
            show: true,
            position: ['50%', '50%'],
            formatter: function () {
              return totalLine + '%'; // 显示百分比
            },
            fontSize: 24,
            fontWeight: 'bold',
            // color: '#000', // 主题色函数
            // 使用 rich 格式来确保颜色生效
            rich: {
              val: {
                color: '#000', // 确保颜色生效
              }
            },
          },
          textStyle: { // 额外添加 textStyle
            color: '#000'
          },
          color: ['#6cf5b6'], // 水波颜色
          amplitude: 8, // 增加水波动画幅度
          waveAnimation: true, // 开启动画
          animationDuration: 2000,
          animationDurationUpdate: 2000,
          waveLength: '80%', // 增加波长以增强动画效果
        },
      ],
    }),
offline: initChart("Offline", {
      title: [
        {
          // text: "{val|" + totalOff + "%}",
          top: "center",
          left: "center",
          textStyle: {
            rich: {
              val: {
                fontSize: 16,
                fontWeight: "bold",
                color: '#000',
              },
            },
          },
        },
      ],
      // tooltip: {
      //   trigger: 'item',
      //   formatter: function () {
      //     return `离线率：${totalOff}%`;
      //   },
      // },
      color: ["#F56C6C", "#DDD"],
      series: [
        {
          type: 'liquidFill',
          data: [totalOff / 100], // 转换为小数形式表示百分比
          radius: '80%', // 水球大小
          center: ['50%', '50%'], // 居中
          outline: {
            show: false, // 不要外圈边框
          },
          backgroundStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#F56C6C' },  // 顶部颜色
                { offset: 1, color: getSqtbtmColor() }    // 底部颜色
              ]
            }
          },
          label: {
            show: true,
            position: ['50%', '50%'],
            formatter: function () {
              return totalOff + '%'; // 显示百分比
            },
            fontSize: 24,
            fontWeight: 'bold',
            color: '#000', // 主题色函数
          },
          color: ['#F56C6C'], // 水波颜色
          amplitude: 8, // 增加水波动画幅度
          waveAnimation: true, // 开启动画
          animationDuration: 2000,
          animationDurationUpdate: 2000,
          waveLength: '80%', // 增加波长以增强动画效果
        },
      ],
    }),
  // 监听窗口大小变化，重绘所有图表
  window.addEventListener("resize", () => {
    Object.values(charts).forEach((chart) => {
      chart?.resize();
    });
  });
  // 安全地检查对象是否存在
  console.log('🔴 [Online Chart] Debug:', {
    onlineExists: !!charts.online,
    seriesExists: charts.online ? !!charts.online.getOption().series : false,
    labelExists: charts.online && charts.online.getOption().series ? !!charts.online.getOption().series[0].label : false,
    labelColor: charts.online && charts.online.getOption && charts.online.getOption().series && charts.online.getOption().series[0] && charts.online.getOption().series[0].label ? charts.online.getOption().series[0].label.color : 'undefined',
    getTextColor: getTextColor()
  }) // 调试颜色值与主题色

};

打印出getTextColor
:
"#E5EAF3"
labelColor
:
"#000"
labelExists
:
true
onlineExists
:
true
seriesExists
:
true

Answer 1

解决-水球图50%的时候即水波超过字体的时候，字体会自动变成白色，不是设置问题