ApexCharts径向条形图：根据百分比区间设置颜色及文本

步骤1：根据分数区间确定颜色和文本 #

用原生JS判断分数所属区间，获取对应的条形颜色和标签文本：

const score = data.cultureScore;
let barColor, scoreLabel;

if (score < 33) {
  barColor = '#ff4560'; // 自定义红色值
  scoreLabel = 'Poor';
} else if (score < 66) {
  barColor = '#ffb020'; // 自定义黄色值
  scoreLabel = 'Fair';
} else {
  barColor = '#00e396'; // 自定义绿色值
  scoreLabel = 'Great';
}

步骤2：修改Apex Charts配置 #

将上述得到的颜色和文本注入图表配置，通过colors属性设置条形颜色，替换labels数组内容：

var optionsRadial = {
  chart: {
    height: 350,
    type: 'radialBar',
  },
  series: [score],
  labels: [scoreLabel], // 替换为对应等级文本
  colors: [barColor], // 设置条形颜色
  plotOptions: {
    radialBar: {
      startAngle: -135,
      endAngle: 135
    }
  }
};

// 初始化并渲染图表（需替换为你的DOM元素选择器）
const radialChart = new ApexCharts(document.querySelector("#radial-chart-container"), optionsRadial);
radialChart.render();

补充说明 #

• 色值可根据需求自由替换为任意RGB/Hex格式的颜色代码
• 如果需要调整标签的字体、大小等样式，可在plotOptions.radialBar.label中添加自定义配置项

内容的提问来源于stack exchange，提问作者Raylo