TEAMModelOS/TEAMModelOS/ClientApp/src/components/student-web/ClassRecord/ExamQu.vue

<template>
    <div class="qu-score">
        <div class="qu-score-count" :id="`class-score-count-${id}`"></div>
        <p class="legend-info">
            <!-- <span>{{ $t('studentWeb.exam.chart.legendSimple.legend1') }}</span> -->
            <span>{{ $t('studentWeb.exam.chart.legendSimple.legend2') }}
                <span style="color: #00AD6C;">√</span>
            </span>
            <span>{{ $t('studentWeb.exam.chart.legendSimple.legend3') }}
                <span style="color: #FF5508;">×</span>
            </span>
        </p>
    </div>
</template>
<script>
import elementResizeDetectorMaker from "element-resize-detector"
export default {
    props: {
        quData: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        let _this = this
        return {
            isShowRate: true,
            progressPie: undefined,
            stuCount: 0,
            option: {},
            id: "",
        }
    },
    created() {
        this.id = this.$jsFn.getBtwRandom(0, 100000000)
    },
    mounted() {
        this.progressPie = this.$echarts.init(document.getElementById(`class-score-count-${this.id}`), 'macarons')
        this.progressPie.setOption(this.option)
        let erd11 = elementResizeDetectorMaker()
        erd11.listenTo(document.getElementById(`class-score-count-${this.id}`), () => {
            this.$nextTick(() => {
                //监听到事件后执行的业务逻辑
                this.progressPie.resize()
            })
        })
    },
    watch: {
        quData: {
            handler(n, o) {
                console.log(n);
                let _this = this
                this.$nextTick(() => {
                    if (this.quData.length) _this.stuCount = this.quData[0].correct + this.quData[0].wrong
                    this.option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{b} : {c}' + this.$t('unit.text7')
                        },
                        title: {
                            "text": this.$t('learnActivity.simple.quCorrectRate'),
                            "left": "center",
                            "top": 0,
                            "textStyle": {
                                fontSize: 15,
                                color: "#333"
                            }
                        },
                        legend: {
                            /* itemStyle: {
                                opacity: 0
                            }, */
                            /* formatter: (params) => {
                                return `√表示答对`
                            }, */
                            bottom: 0,
                        },
                        tooltip: {
                            formatter: (params) => {
                                return `${_this.$t('learnActivity.simple.rac')} ${params.data.value.toFixed(0)}%(${_this.quData[params.dataIndex].correct}${_this.$t('unit.text7')})`
                            }
                        },
                        grid: {
                            // width: "100%",
                            left: 50,
                            right: 50
                        },
                        xAxis: {
                            show: true,
                            // name:'题号',
                            nameLocation: 'end',
                            type: 'category',
                            data: [],
                            axisLine: {
                                lineStyle: {
                                    color: "#AAA"
                                }
                            },
                            axisLabel: {
                                rotate: 0,
                                /* formatter: (params) => {
                                    return  `${params}\n${_this.quData[params-1].type ? '{typea|√}' : '{typeb|×}'}`
                                },
                                rich: {
                                    typea: {
                                        color: '#00AD6C',
                                        fontSize: 20,
                                        // height: 24,
                                        // padding: [0, 5, 0, 5],
                                        align: 'center'
                                    },
                                    typeb: {
                                        color: '#FF5508',
                                        fontSize: 20,
                                        // height: 24,
                                        // padding: [0, 5, 0, 5],
                                        align: 'center'
                                    },
                                    count: {
                                        color: '#333',
                                        height: 24,
                                        // padding: [0, 5, 0, 5],
                                        // align: 'right'
                                    },
                                }, */
                            }
                        },
                        yAxis: {
                            // name:'正确率',
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: "#AAA"
                                }
                            },
                        },
                        series: [
                            {
                                data: [],
                                type: 'bar',
                                barMinWidth: 30,
                                barMaxWidth: 30,
                                label: {
                                    show: true,
                                    position: 'top',
                                    formatter: (params) => {
                                        //统计人数的算法
                                        // if (_this.stuCount > 0) {
                                        //     return `${(params.data * 100 / _this.stuCount).toFixed(1)}%`
                                        // } else {
                                        //     return params.data
                                        // }
                                        // 统计正确率的算法
                                        return _this.isShowRate ? `${params.data.type ? '{typea|√}' : '{typeb|×}'}\n{count|${params.data.value.toFixed(0)}%}` : ''
                                    },
                                    rich: {
                                        typea: {
                                            color: '#00AD6C',
                                            fontSize: 20,
                                            // height: 24,
                                            // padding: [0, 5, 0, 5],
                                            align: 'center'
                                        },
                                        typeb: {
                                            color: '#FF5508',
                                            fontSize: 20,
                                            // height: 24,
                                            // padding: [0, 5, 0, 5],
                                            align: 'center'
                                        },
                                        count: {
                                            color: '#333',
                                            height: 24,
                                            // padding: [0, 5, 0, 5],
                                            // align: 'right'
                                        },
                                    },
                                },
                                itemStyle: {
                                    normal: {
                                        color: function (params) {
                                            const colorList = ['#ed4014', '#ff9900', '#19be6b']
                                            //统计人数的算法
                                            // if (_this.stuCount >= 0) {
                                            //     let rate = params.data * 100 / _this.stuCount
                                            //     console.log(params, rate)
                                            //     if (rate >= 70) {
                                            //         return colorList[2]
                                            //     } else if (rate > 50) {
                                            //         return colorList[1]
                                            //     } else {
                                            //         return colorList[0]
                                            //     }
                                            // } else {
                                            //     return colorList[2]
                                            // }
                                            // 统计正确率的算法
                                            if (params.data.value >= 70) {
                                                return colorList[2]
                                            } else if (params.data.value > 50) {
                                                return colorList[1]
                                            } else {
                                                return colorList[0]
                                            }

                                        }
                                    }
                                },
                                stillShowZeroSum: true,
                            },
                        ]
                    }
                    if (!this.progressPie) {
                        this.progressPie = this.$echarts.init(document.getElementById(`class-score-count-${this.id}`), 'macarons')
                    }
                    this.option.series[0].data = this.quData.map(item => {
                        return {
                            value: item.correct * 100 / this.stuCount,
                            type: item.type
                        }
                    })
                    /* this.option.series[0].data = [
                        {
                            value: this.quData.map(item => item.correct * 100 / this.stuCount)
                        },
                        {
                            value: this.quData.map(item => {return item.type})
                        }
                    ] */
                    // this.option.series[0].data = this.quData.map(item => item.correct * 100 / this.stuCount) //计算正确率
                    this.option.xAxis.data = this.quData.map(item => item.quLabel)
                    // if (this.quData.length) this.option.yAxis.max = this.quData[0].correct + this.quData[0].wrong
                    if (this.quData.length) this.option.yAxis.max = 100 //计算比例不算人数
                    if (this.quData.length > 8) {
                        this.option.dataZoom = [
                            {
                                show: true,
                                height: 8,
                                xAxisIndex: [
                                    0
                                ],
                                bottom: 10,
                                endValue: 30,
                                startValue: 0,
                                handleIcon: 'M512 497.821538m-418.264615 0a418.264615 418.264615 0 1 0 836.52923 0 418.264615 418.264615 0 1 0-836.52923 0Z',
                                handleSize: '100%',
                                handleStyle: {
                                    color: '#d3dee5'

                                },
                                textStyle: {
                                    color: '#fff'
                                },
                                borderRadius: '5px',
                                maxValue: 30,
                            },
                            {
                                type: 'inside',
                                show: true,
                                height: 15,
                                endValue: 30,
                                startValue: 0,
                                maxValue: 30,
                            }
                        ]
                    } else {
                        this.option.dataZoom = []
                    }
                    this.progressPie.setOption(this.option, true)
                    /* this.progressPie.on('datazoom', (params) => {
                        let start = params.batch[0]?.start
                        let end = params.batch[0]?.end
                        if (end - start > 30) {
                            this.isShowRate = false
                        } else {
                            this.isShowRate = true
                        }
                    }) */
                })
            },
            deep: true,
            immediate: true
        },
    }
}
</script>
<style scoped lang="less">
.qu-score {
    padding: 15px 20px 0 20px;
    width: 440px;
    height: 250px;
}
.qu-score-count {
    width: 100%;
    height: 100%;
}
.legend-info {
    text-align: center;
    font-weight: bold;

    & > span:not(:last-child) {
        margin-right: 10px;
    }
}
</style>