Javascript 如何更改Apexcharts RadialBar图表中未前进条的颜色？

我正在研究阿佩克斯哈特的辐射图。我能够实现此图表，但我正在尝试将未进行部分的颜色从灰色更改为蓝色

代码

import React, { Component } from 'react';
import ReactApexChart from 'react-apexcharts';

export default class GaugeChart extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoaded: false,
            error: "",
            value: 90,
            openChart: false,
            options: {
                chart: {
                    offsetY: -10
                },
                plotOptions: {
                    radialBar: {
                        startAngle: -135,
                        endAngle: 135,
                        fill: "#1cbd00",
                        border: '1px solid black',
                        dataLabels: {
                            border: "1px solid #fac5c7",
                            name: {
                                fontSize: '14px',
                                color: "#636363",
                                fontFamily: 'SegoeUI',
                                offsetY: 20,
                            },
                            value: {
                                offsetY: -20,
                                fontSize: '36px',
                                color: "#636363",
                                fontFamily: 'SegoeUI',
                                formatter: function (val) {
                                    let labelValue = ((val / 100) * 90000) | 0;
                                    if(labelValue && labelValue > 9999) {
                                        // Nine Zeroes for Billions
                                        return Math.abs(Number(labelValue)) >= 1.0e+9

                                        ? Math.abs(Number(labelValue)) / 1.0e+9 + "B"
                                        // Six Zeroes for Millions 
                                        : Math.abs(Number(labelValue)) >= 1.0e+6

                                        ? Math.abs(Number(labelValue)) / 1.0e+6 + "M"
                                        // Three Zeroes for Thousands
                                        : Math.abs(Number(labelValue)) >= 1.0e+3

                                        ? Math.abs(Number(labelValue)) / 1.0e+3 + "K"

                                        : Math.abs(Number(labelValue));
                                    } else {
                                        return labelValue;
                                    }
                                }
                            }
                        }
                    }
                },
                fill: {
                    opacity: 1.5,
                    colors: ['#ff9966'],
                    type: 'gradient',
                    gradient: {
                        gradientToColors: ['#ff5e62'],
                        shadeIntensity: 1,
                        opacityFrom: 1,
                        opacityTo: 2,
                        stops: [0, 50, 100],
                        inverseColors: false
                    },
                },
                // stroke: {
                //     lineCap: "round"
                // },
                labels: ['Audience']
            }
        }
    }

    numberConverter = function(labelValue) {

        if(labelValue && labelValue > 9999) {
            // Nine Zeroes for Billions
            return Math.abs(Number(labelValue)) >= 1.0e+9

            ? Math.abs(Number(labelValue)) / 1.0e+9 + "B"
            // Six Zeroes for Millions 
            : Math.abs(Number(labelValue)) >= 1.0e+6

            ? Math.abs(Number(labelValue)) / 1.0e+6 + "M"
            // Three Zeroes for Thousands
            : Math.abs(Number(labelValue)) >= 1.0e+3

            ? Math.abs(Number(labelValue)) / 1.0e+3 + "K"

            : Math.abs(Number(labelValue));
        } else {
            return labelValue;
        }

    }

    render() {
        let series = [];
        let percentage = (10000 / 90000) * 100;
        series.push(percentage);

        return <React.Fragment>
            <div className="row">
                <div className="col-md-12 col-sm-12 col-lg-12 col-xs-12 text-center">
                    <ReactApexChart
                        options={this.state.options}
                        series={series}
                        type="radialBar"
                        height="480"
                    />
                </div>
            </div>
            <div className="row">
                <div className="col-md-6 col-sm-6 col-lg-6 col-xs-6 min-max-div">
                    <span className="min-text">0</span>
                </div>
                <div className="col-md-6 col-sm-6 col-lg-6 col-xs-6 min-max-div">
                    <span className="max-text">{this.numberConverter(10000)}</span>
                </div>
            </div><br /><br />
        </React.Fragment>
    }
}

import React，{Component}来自'React'；
从“react-apexcharts”导入react-ApexChart；
导出默认类GaugeChart扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isLoaded:false，
错误：“”，
数值：90，
openChart:false，
选项：{
图表：{
副职：-10
},
打印选项：{
拉迪阿尔巴：{
startAngle:-135，
端角：135，
填写：“1cbd00”，
边框：“1px纯黑”，
数据标签：{
边框：“1px实心#fac5c7”，
姓名：{
fontSize:'14px'，
颜色：#636363“，
fontFamily:“SegoeUI”，
副职：20，
},
价值：{
副职：-20，
fontSize:'36px'，
颜色：#636363“，
fontFamily:“SegoeUI”，
格式化程序：函数（val）{
设labelValue=（（val/100）*90000）| 0；
如果（labelValue&&labelValue>9999）{
//九个零代表数十亿
返回Math.abs（Number（labelValue））>=1.0e+9
？数学abs（数字（labelValue））/1.0e+9+B
//六零换百万
：Math.abs（数字（labelValue））>=1.0e+6
？数学abs（数字（labelValue））/1.0e+6+“M”
//千分之三的零
：Math.abs（数字（labelValue））>=1.0e+3
？数学abs（数字（labelValue））/1.0e+3+“K”
：Math.abs（数字（labelValue））；
}否则{
返回标签值；
}
}
}
}
}
},
填写：{
不透明度：1.5，
颜色：['#ff9966']，
类型：'梯度'，
坡度：{
渐变色：['#ff5e62']，
阴影强度：1，
不透明性来源：1，
不透明：2，
停止：[0,50,100]，
反色：假
},
},
//笔划：{
//线头：“圆形”
// },
标签：[“观众”]
}
}
}
numberConverter=函数（labelValue）{
如果（labelValue&&labelValue>9999）{
//九个零代表数十亿
返回Math.abs（Number（labelValue））>=1.0e+9
？数学abs（数字（labelValue））/1.0e+9+B
//六零换百万
：Math.abs（数字（labelValue））>=1.0e+6
？数学abs（数字（labelValue））/1.0e+6+“M”
//千分之三的零
：Math.abs（数字（labelValue））>=1.0e+3
？数学abs（数字（labelValue））/1.0e+3+“K”
：Math.abs（数字（labelValue））；
}否则{
返回标签值；
}
}
render（）{
let级数=[]；
百分比=（10000/90000）*100；
系列。推力（百分比）；
返回
0
{this.numberConverter（10000）}



}
}

蓝色下面的东西需要换成蓝色。现在它显示为灰色。

---

在阿佩克斯哈特径向条中，未进行的区域称为轨迹

试试这个

plotOptions：{
拉迪阿尔巴：{
轨道：{
背景：“#1cbd00”
}
}
}