dz-app/pages/topic-center/paper-objective/components/accuracy-chart.vue

<template>
    <mx-echarts :option="option" canvas-id="accuracy-chart"/>
</template>

<script>
export default {
    name: "accuracy-chart",
    props: {
        value: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            option: null
        }
    },
    watch: {
        value: function () {
            this.updateOption()
        }
    },
    mounted() {
        this.updateOption()
    },
    methods: {
        updateOption() {
            const gaugeData = [{
                value: this.value,
                name: '正确率',
                title: {
                    offsetCenter: ['0%', '-22%'],
                    fontSize: 14,
                },
                detail: {
                    valueAnimation: true,
                    offsetCenter: ['0%', '16%'],
                    fontSize: 28,
                    borderWidth: 0,
                    color: '#333',
                    formatter: function (val) {
                        if ([null, undefined, NaN].includes(val)) return '暂无'
                        return val + '%'
                    }
                }
            }];
            this.option = {
                series: [{
                    type: 'gauge',
                    radius: '70%',
                    startAngle: 90,
                    endAngle: -270,
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: ![null, undefined, NaN].includes(this.value),
                        overlap: false,
                        roundCap: true,
                        clip: false,
                        itemStyle: {
                            color: {
                                type: 'radial',
                                x: 0,
                                y: 0,
                                r: 1.2,
                                colorStops: [{
                                    offset: 0,
                                    color: '#67B9F5'
                                }, {
                                    offset: 1,
                                    color: '#4F87FC'
                                }],
                            }
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            width: 16
                        }
                    },
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                    },
                    data: gaugeData
                }]
            }
        }
    }
}
</script>

<style scoped>

</style>