【ReactEcharts】环形图常规案例实现

详细配置项可跳转至我的文章 ReactEcharts常见基础配置项解析

代码实现

import React from 'react';
import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
import 'echarts-liquidfill';

export default function CircleEchart(prop) {
    let value = prop.score || 0;
    let colorIndex = prop.index || 0;
    let int = value > 0 ? value.toFixed(1).split('.')[0] : 0;
    let float = value > 0 ? value.toFixed(1).split('.')[1] : 0;
    const colorArr = [
        ['rgba(26, 255, 252, 1)', 'rgba(0, 255, 180, 1)'],
        ['rgba(31, 175, 255, 1)', 'rgba(0, 240, 255, 1)'],
        ['rgba(185, 169, 255, 1)', 'rgba(208, 125, 255, 1)'],
        ['rgba(255, 199, 80, 1)', 'rgba(255, 154, 90, 1)'],
    ];
    const borderColor = [
        'rgba(0, 255, 180, 0.8)',
        'rgba(0, 240, 255,0.8)',
        'rgba(208, 125, 255, 0.8)',
        'rgba(255, 154, 90, 0.8)',
    ];
    let option = {
        background:
            'linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(3,7,22,0.73) 47%, #061135 100%);',
        title: {
            text: `{a|${int}}{b|.${float}}`,
            x: 'center',
            y: 'center',
            textStyle: {
                rich: {
                    a: {
                        fontSize: 18,
                        color: '#fff',
                        fontWeight: '600',
                    },
                    b: {
                        fontSize: 18,
                        color: '#fff',
                        fontWeight: '600',
                        padding: [0, 0, 0, 0], // 调整位置
                    },
                },
            },
        },
        series: [
            {
                type: 'gauge',
                radius: '90%',
                clockwise: false,
                startAngle: '90',
                endAngle: '-269.9999',
                splitNumber: 50,
                detail: {
                    offsetCenter: [0, 0],
                    formatter: ' ',
                },
                pointer: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: [
                            [
                                0,
                                new echarts.graphic.RadialGradient(1, 1, 1, [
                                    {
                                        offset: 0,
                                        color: colorArr[colorIndex][0],
                                    },
                                    {
                                        offset: 1,
                                        color: colorArr[colorIndex][1],
                                    },
                                ]),
                            ],
                            [value / (prop.basePercent || 100), 'transparent'],
                            [
                                1,
                                new echarts.graphic.RadialGradient(0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: colorArr[colorIndex][0],
                                    },
                                    {
                                        offset: 1,
                                        color: colorArr[colorIndex][1],
                                    },
                                ]),
                            ],
                        ],
                        width: 10,
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
            },
            // 外层环
            {
                name: '外层环',
                type: 'pie',
                radius: ['94%', '100%'],
                hoverAnimation: false,
                clockWise: false,
                itemStyle: {
                    normal: {
                        color: borderColor[colorIndex],
                    },
                },
                label: {
                    show: false,
                },
                data: [100],
                z: 2,
            },
            // 内层阴影环
            {
                type: 'pie',
                name: '内层环',
                radius: ['68%', '90%'],
                hoverAnimation: false,
                clockWise: false,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                            {
                                offset: 0,
                                color: 'rgba(255, 255, 255,.2)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(255, 255, 255,.4)',
                            },
                        ]),
                    },
                },
                label: {
                    show: false,
                },
                data: [100],
                z: 1,
            },
        ],
    };

    return (
        <ReactEcharts
            option={option}
            notMerge
            lazyUpdate
            style={{ height: '100px', width: '100px' }}
        />
    );
}

效果图