TEAMModelOS/TEAMModelOS/ClientApp/src/components/smartclassdashboard/RingPie.vue

<template>
    <div :id="id" style="height: 100%;width:100%;"></div>
</template>

<script>
export default {
    data() {
        return {
            mychat: '',
            total: 0,
            heightlightIndex: 0,
            data: []
        }
    },
    props: {
        id: {
            type: String
        },
        pieData: {
            type: Object,
            default: function() {
                return {
                    '1': 0, // 一年級
                    '2': 0, // 二年級
                    '3': 0,
                    '4': 0,
                    '5': 0
                }
            }
        },
        defaultActive: {
            type: Boolean,
            default: function() {
                return false
            }
        },
        singleColor: {
            type: Boolean,
            default: function() {
                return false
            }
        },
        title: {
            type: String
        },
        tooltip: {
            type: Boolean,
            default: function() {
                return false
            }
        }
    },
    mounted() {
        this.drawLine()
    },
    created() {
    },
    watch: {
        pieData() {
            this.drawLine()
        }
    },
    methods: {
        drawLine() {
            let _this = this
            this.data = []
            Object.keys(this.pieData).forEach(function(key) {
                _this.data.push({ 'name': key, 'value': _this.pieData[key] })
            })
            this.data.forEach(item => {
                _this.total += item.value
            })
            // 基于准备好的dom，初始化echarts实例
            this.myChart = this.$echarts.init(document.getElementById(this.id))
            let color = ['#FF6B6A', '#FF9FF4', '#48DBFC', '#1CD0A1', '#FDC958', '#FFAD76', '#b682f8'] // 大於2
            let color2 = ['#FF6B6A', '#48DBFC'] // 小於2
            if (Object.keys(this.pieData).length <= 2) {
                color = color2
            }
            this.myChart.setOption({
                title: {
                    show: !!_this.title,
                    text: _this.title ? _this.title : '',
                    left: 'center',
                    top: 'middle',
                    textStyle: {
                        color: '#fafafa',
                        fontWeight: 100
                    }
                },
                color: _this.singleColor ? 'rgba(228, 233, 220, 0.9)' : color,
                tooltip: {
                    show: _this.tooltip,
                    trigger: 'item'
                    // formatter: function(p){
                    //     // 故意不填可用來觸發HighLight
                    // }
                },
                series: [
                    {
                        type: 'pie',
                        hoverOffset: 5,
                        radius: _this.singleColor ? ['30%', '70%'] : ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: _this.data,
                        itemStyle: _this.singleColor ? {
                            emphasis: {
                                color: '#1CD0A1'
                            }
                        } : ''
                    }
                ]
            })
            // mouseover觸發項
            this.myChart.on('mouseover', function(params) {
                if (_this.data[_this.heightlightIndex].name != params.name) {
                    _this.myChart.dispatchAction({
                        type: 'downplay',
                        dataIndex: _this.heightlightIndex
                    })
                }
                params.name = _this.resName(params.name)
                _this.$emit('highLightInfo', params)
            })
            if (this.defaultActive) {
                if (this.data.length == 0) return false
                // 預設先給第一筆初始值
                let now = this.data[0].value
                let name = this.resName(this.data[0].name)
                let params = { 'value': this.data[0].value, 'name': name, 'percent': Number((now / this.total) * 100).toFixed(2) }
                this.$emit('extraInfo', params)
                this.$emit('highLightInfo', params)
                // 預設第一個
                this.myChart.dispatchAction({
                    type: 'highlight',
                    dataIndex: _this.heightlightIndex
                })
            }
        },
        // 供外部呼叫用
        heightlight: function(dName) {
            let _this = this
            if (this.data[this.heightlightIndex].name != dName) {
                this.myChart.dispatchAction({
                    type: 'downplay',
                    dataIndex: _this.heightlightIndex
                })
            }

            this.myChart.dispatchAction({
                type: 'highlight',
                name: dName
            })
            let now = 0
            this.data.forEach(item => {
                if (item.name == dName) {
                    now = item.value
                }
            })
            let params = { 'percent': Number((now / this.total) * 100).toFixed(2) }

            this.$emit('extraInfo', params)
        },
        downplay: function(dname) {
            this.myChart.dispatchAction({
                type: 'downplay',
                name: dname
            })
        },
        resName: function(name) {
            switch (name) {
                case 'Orther':
                    return this.$t('classMgmt.Other')
                    break
                case 'UnKnown':
                    return this.$t('classMgmt.Other')
                    break
                case 'smartClass':
                    return this.$t('classMgmt.smartClass')
                    break
                case 'sokratesClass':
                    return this.$t('classMgmt.sokratesClass')
                    break
                default:
                    return name
                    break
            }
        }
    }
}

</script>

<style>
</style>