效果

用到的插件 建议最新版

    <script src="js/echarts.min.js"></script>
    <script src="js/echarts-liquidfill.js"></script>
    
    

代码

    var myChart = echarts.init(document.getElementById('main'));
    var ratioColor = ['#ffc897', '#f8ab5f']; //波浪内颜色
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '',
            textStyle: {
                fontWeight: 'normal',
                fontSize: 1,
                color: 'rgba(255, 105, 10, 1)'
            }
        },
        series: [{
            type: 'liquidFill',
            radius: '100%',
            center: ['50%', '50%'],
            data: [0.5, 0.5], // data个数代表波浪数
            color: ratioColor,
            label: {
                show: true,
                fontSize: 14,
                position: ['50%', '50%'],
                color: 'rgba(254, 253, 244, 1.00)',
                insideColor: 'rgba(244, 120, 34, 1.00)',
                formatter: '{total|' + '4' + '}' + '{total2|' + '/10' + '}' + '\n\r\n\r' + '{active|每日得分}',
                rich: {
                    total: {
                        fontSize: 37,
                        fontFamily: "微软雅黑",
                    }, total2: {
                        fontSize: 25,
                        fontFamily: "微软雅黑",
                    },
                    active: {
                        fontFamily: "微软雅黑",
                        fontSize: 14,
                    },
                }
            },
            backgroundStyle: {
                borderWidth: 1,
                color: '#ff9800'
            },
            outline: {
                show: false,
            }
        },
            {
                "type": "pie",
                "center": ["50%", "50%"],
                "radius": ["98%", "100%"],
                "hoverAnimation": true,
                "data": [{
                    "name": "",
                    "value": 500,
                    labelLine: {
                        show: false
                    },
                    itemStyle: {
                        color: '#fffbf8'
                    },
                },
                    { //画中间的图标
                        "name": "",
                        "value": 4,
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            color: '#ffffff',
                            "normal": {
                                "color": "#fffbf8",
                                "borderColor": "#fffbf8",
                                "borderWidth": 5,
                                borderRadius: '100%'
                            },
                        },
                        label: {
                            borderRadius: '100%'
                        },
                        emphasis: {
                            labelLine: {
                                show: false
                            },
                            itemStyle: {
                                color: 'red'
                            },
                        }

                    },
                    { // 解决圆点过大后续部分显示明显的问题
                        "name": "",
                        "value": 4.5,
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            color: 'rgba(255, 105, 10, 1)'
                        },
                        emphasis: {
                            labelLine: {
                                show: false
                            },
                            itemStyle: {
                                color: 'rgba(255, 105, 10, 1)'
                            },
                        }
                    },
                    {
                        "name": "",
                        "value": 88,
                        itemStyle: {
                            color: 'none'
                        },
                        "label": {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        emphasis: {
                            labelLine: {
                                show: false
                            },
                            itemStyle: {
                                color: 'none'
                            },
                        }
                    }
                ]
            }
        ]
    };

    myChart.setOption(option);