ApexCharts迷你线模式下水平条形图如何设置多色条形？

在Sparkline模式下，ApexCharts会默认简化图表配置，强制单系列的所有条形使用统一颜色，因此全局的colors或fill.colors选项会被忽略。要实现每个条形不同颜色，可以通过数据点级别的颜色指定来解决，以下是两种可行方案：

方案一：为每个数据点单独指定颜色 #

将series的data数组从纯数值改为包含value和color属性的对象数组，直接为每个条形分配颜色：

const categories = stats.map(([domain]) => domain);
// 生成带颜色的系列数据
const seriesData = stats.map(([, value], index) => {
  const colorList = ['#0abd0a', '#4CB140', '#7CC674', '#A9D1A8',
    '#009596', '#00B2B2', '#00C8C8', '#00E0E0', '#00F0F0', '#00FFFF'];
  return {
    value: value,
    color: colorList[index % colorList.length] // 处理数据数量超过颜色列表的情况
  };
});

this.chartOptions = {
  chart: {
    type: 'bar',
    height: 100,
    sparkline: {enabled: true}
  },
  fill: {
    opacity: 1,
  },
  plotOptions: {bar: {horizontal: true}},
  series: [{name: 'Links', data: seriesData}],
  xaxis: {categories: categories},
  tooltip: {fixed: {enabled: true}, y: {formatter: function(val) {return val}}, theme: 'dark'},
};

这种方式灵活性最高，无论数据值是什么，都能精准为每个条形分配颜色。

方案二：根据数值范围匹配颜色（适合有固定值域的场景） #

如果你的数据值有明确的范围区间，可以通过plotOptions.bar.colors.ranges配置，让不同值域的条形自动匹配对应颜色：

this.chartOptions = {
  // ...其他配置不变
  plotOptions: {
    bar: {
      horizontal: true,
      colors: {
        ranges: [
          { from: 0, to: 5, color: '#0abd0a' },
          { from: 6, to: 10, color: '#4CB140' },
          { from: 11, to: 15, color: '#7CC674' },
          // 根据你的数据值域继续添加更多范围规则
        ]
      }
    }
  }
};

注意事项 #

• 由于你使用的是ApexCharts 1.6版本（对应核心库v3.x），上述两种方案均支持。如果遇到兼容性问题，可以尝试升级Vue ApexCharts组件到对应Vue2的最新版本。
• Sparkline模式下无需保留全局的colors和fill.colors配置，数据点指定的颜色会优先生效。

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