Echarts 仪表盘 文字颜色跟随指针颜色

echarts yekong

使用color: 'auto'来实现文字和指针颜色一致。

wanjunshijiecom 2021-09-19 at 07.02.13@2x

        getecharts4: function () {
            window.addEventListener('resize', this.getecharts4)
            var chartDom = document.getElementById('main4');
            var myChart = echarts.init(chartDom);
            var option = {
                series: [{
                    type: 'gauge',
                    startAngle: 180,
                    radius: '110%',
                    endAngle: 0,
                    center: ['50%', '75%'],
                    min: 0,
                    max: 100,
                    splitNumber: 5,
                    axisLine: {
                        lineStyle: {
                            width: 3,
                            color: [
                                [0.25, '#20dd0c'],
                                [0.5, '#ffe535'],
                                [0.75, '#f85801'],
                                [1, '#ee2e38']
                            ]
                        }
                    },
                    pointer: {
                        icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                        length: '50%',
                        width: 5,
                        offsetCenter: [0, '-20%'],
                        itemStyle: {
                            color: 'auto'
                        }
                    },
                    splitLine: {
                        show: false,
                        length: 20,
                        lineStyle: {
                            color: 'auto',
                            width: 0
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 12,
                        distance: -50,
                    },
                    title: {
                        offsetCenter: [0, '30%'],
                        fontSize: 12,
                        color: '#55bcd5',
                    },
                    detail: {
                        fontSize: 12,
                        color: 'auto',
                        valueAnimation: true,
                        offsetCenter: [0, 0],
                        textStyle: {
                            padding: [0, 0, 0, 0],
                            fontSize: 14,
                            fontWeight: '500'
                        },
                        formatter: function (value) {
                            if (value <= 25) {
                                return '正常';
                            } else if (value <= 50) {
                                return '注意';
                            } else if (value <= 75) {
                                return '异常';
                            } else if (value <= 100) {
                                return '严重';
                            }
                        }
                    },
                    data: [{
                        value: 70,
                        fontSize: 10,
                        name: '成绩评定'
                    }]
                }]
            };
            myChart.clear()
            myChart.resize()
            option && myChart.setOption(option);
        },
喜欢