ApexCharts如何修改饼图及对应系列颜色，解决多系列颜色重复问题

问题解决方法 #

你将自定义颜色配置在fill.colors下的写法仅会修改饼图扇区的填充色，不会同步映射到图例、悬浮提示等其他组件的系列颜色，因此出现显示不一致的问题。

正确配置方式是将自定义颜色数组放在options的顶层colors属性中，ApexCharts会自动将该色板同步应用到所有和系列对应的展示位置：

var clientTypeDataL = <?php echo json_encode($clientTypeLost) ?>;
var optionsL = {
    series: clientTypeDataL.data,
    chart: {
      width: 480,
      type: 'pie',
    },
    labels: clientTypeDataL.name,
    // 自定义色板放在顶层colors属性
    colors: ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#ecf0f1", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"],
    responsive: [{
      breakpoint: 400,
      options: {
        chart: {
          width: 200,
        },
        legend: {
          position: 'left',
          horizontalAlign: 'right',
        }
      }
    }]
};

var chartx = new ApexCharts(document.querySelector("#chart-client-type-lost"), optionsL);
chartx.render();

如果同时需要调整填充透明度等样式，可以保留fill配置项，不需要再在fill里重复配置颜色。

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