<template>
    <div class="content">
        <div class="class-table">
            <div id="table"></div>
        </div>
        <div class="class-pie">
            <div id="pie"></div>
        </div>
        <div class="class-chart">
            <div id="chart"></div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                timer:''
            }
        },
        methods: {
            setChart() {
                let myChart = this.$echarts.init(document.getElementById('chart'));
                var scale = 0.7;
                var echartData = [{
                    value: 21,
                    name: '问卷调查'
                }, {
                    value: 38,
                    name: '评量测验'
                }, {
                    value: 35,
                    name: '自主学习'
                }, {
                    value: 31,
                    name: '作业活动'
                }, {
                    value: 28,
                    name: '投票活动'
                }]
                var rich = {
                    yellow: {
                        color: "#3bc7ff",
                        fontSize: 14 * scale,
                        padding: [8, 0],
                        align: 'center'
                    },
                    total: {
                        color: "#A2C7F3",
                        fontSize: 35 * scale,
                        align: 'center'
                    },
                    white: {
                        color: "#a2c7f3",
                        align: 'center',
                        fontSize: 16 * scale,
                        padding: [8, 0]
                    },
                    blue: {
                        color: '#3bc7ff',
                        fontSize: 18 * scale,
                        align: 'center'
                    },
                    hr: {
                        borderColor: '#a2c7f3',
                        width: '100%',
                        borderWidth: 1,
                        height: 0,
                    }
                }
                let option = {
                    backgroundColor: '#191919',
                    title: {
                        text: '活动数量统计',
                        left: 'center',
                        top: '-1%',
                        padding: [10, 0],
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,
                            //fontWeight: '800',
                            align: 'center'
                        }
                    },
                    legend: {
                        selectedMode: false,
                        formatter: function (name) {
                            var total = 100; //各科正确率总和
                            var averagePercent; //综合正确率
                            // echartData.forEach(function(value, index, array) {
                            //     total += value.value;
                            // });
                            return '{total|' + total + '}{white|}';
                        },
                        data: [echartData[0].name],
                        left: 'center',
                        top: 'center',
                        icon: 'none',
                        align: 'center',
                        textStyle: {
                            color: "#fff",
                            fontSize: 14 * scale,
                            rich: rich
                        },
                    },
                    series: [{
                        type: 'pie',
                        radius: ['35%', '60%'],
                        hoverAnimation: false,
                        color: ['#fc962c', '#d83472', '#0F9AF8', '#2B63D5', '#2039C3', '#2ECACE', '#6F81DA'],
                        label: {
                            normal: {
                                formatter: function (params, ticket, callback) {
                                    var total = 0; //考生总数量
                                    var percent = 0; //考生占比
                                    echartData.forEach(function (value, index, array) {
                                        total += value.value;
                                    });
                                    percent = ((params.value / total) * 100).toFixed(1);
                                    return '{white|' + params.name + '}\n{hr|}\n{yellow|' + params.value + '/}{blue|' + percent + '%}';
                                },
                                rich: rich
                            },
                        },
                        labelLine: {
                            normal: {
                                length: 25 * scale,
                                length2: 10,
                                lineStyle: {
                                    color: '#3e3e3e'
                                }
                            }
                        },
                        data: echartData
                    }]
                }
                myChart.setOption(option)
            },
            setPie() {
                let color = ['#FF8700', '#ffc300', '#00e473', '#009DFF', '#0034ff'];
                let chartData = [{
                    name: "评量测验",
                    value: 80083
                },
                {
                    name: "自主学习",
                    value: 53974
                },
                {
                    name: "作业活动",
                    value: 35400
                },
                {
                    name: "投票活动",
                    value: 61021
                },
                {
                    name: "问卷调查",
                    value: 70654
                }
                ];
                let arrName = [];
                let arrValue = [];
                let sum = 0;
                let pieSeries = [],
                    lineYAxis = [];
                // 数据处理
                chartData.forEach((v, i) => {
                    arrName.push(v.name);
                    arrValue.push(v.value);
                    sum = sum + v.value;
                })
                chartData.forEach((v, i) => {
                    pieSeries.push({
                        type: 'pie',
                        clockWise: false,
                        hoverAnimation: false,
                        radius: [75 - i * 15 + '%', 67 - i * 15 + '%'],
                        center: ["50%", "50%", "30%", "40%"],
                        label: {
                            show: false
                        },
                        data: [{
                            value: v.value,
                            name: v.name
                        }, {
                            value: sum - v.value,
                            name: '',
                            itemStyle: {
                                color: "rgba(0,0,0,0)"
                            }
                        }]
                    });
                    pieSeries.push({
                        name: '',
                        type: 'pie',
                        silent: true,
                        z: 1,
                        clockWise: false, //顺时加载
                        hoverAnimation: false, //鼠标移入变大
                        radius: [75 - i * 15 + '%', 67 - i * 15 + '%'],
                        center: ["50%", "50%"],
                        label: {
                            show: false
                        },
                        data: [{
                            value: 7.5,
                            itemStyle: {
                                color: "#404040"
                            }
                        }, {
                            value: 2.5,
                            name: '',
                            itemStyle: {
                                color: "rgba(0,0,0,0)"
                            }
                        }]
                    });
                    v.percent = (v.value / sum * 100).toFixed(1) + "%";
                    lineYAxis.push({
                        value: i,
                        textStyle: {
                            rich: {
                                circle: {
                                    color: color[i],
                                    padding: [5, 5]
                                }
                            }
                        }
                    });
                })
                let myPie = this.$echarts.init(document.getElementById('pie'))
                let option = {
                    backgroundColor: '#191919',
                    color: color,
                    title: {
                        text: '活动完成率',
                        left: 'center',
                        top: '-1%',
                        padding: [10, 0],
                        textStyle: {
                            color: '#fff',
                            fontSize: 14 ,
                            //fontWeight: '800',
                            align: 'center'
                        }
                    },
                    grid: {
                        top: '12%',
                        bottom: '54%',
                        left: "50%",
                        containLabel: false
                    },
                    yAxis: [{
                        type: 'category',
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            formatter: function (params) {
                                let item = chartData[params];
                                return '{line|}{circle|●}{name|' + item.name + '}'
                            },
                            interval: 0,
                            inside: true,
                            textStyle: {
                                color: "#333",
                                fontSize: 12,
                                rich: {
                                    line: {
                                        width: 10,
                                        height: 10,
                                        //backgroundColor: { image: dashedPic }
                                    },
                                    name: {
                                        color: '#666',
                                        fontSize: 14,
                                    },
                                    bd: {
                                        color: '#ccc',
                                        padding: [5, 5],
                                        fontSize: 14,
                                    },
                                    percent: {
                                        color: '#333',
                                        fontSize: 14,
                                    },
                                    value: {
                                        color: '#333',
                                        fontSize: 16,
                                        fontWeight: 500,
                                        padding: [0, 0, 0, 20]
                                    },
                                    unit: {
                                        fontSize: 14
                                    }
                                }
                            },
                            show: true
                        },
                        data: lineYAxis
                    }],
                    xAxis: [{
                        show: false
                    }],
                    series: pieSeries
                }
                myPie.setOption(option)
            },
            setTable() {
                let myTable = this.$echarts.init(document.getElementById('table'));
                let option = {
                    backgroundColor: '#191919',
                    title: {
                        text: '学习活动数据统计',
                        textStyle: {
                            align: 'center',
                            color: '#fff',
                            fontSize: 14,
                        },
                        top: '1%',
                        left: 'center',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            lineStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(0, 255, 233,0)'
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(255, 255, 255,1)',
                                    }, {
                                        offset: 1,
                                        color: 'rgba(0, 255, 233,0)'
                                    }],
                                    global: false
                                }
                            },
                        },
                    },
                    grid: {
                        top: '15%',
                        left: '5%',
                        right: '5%',
                        bottom: '10%',
                        // containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        axisLine: {
                            show: true
                        },
                        splitArea: {
                            // show: true,
                            color: '#f00',
                            lineStyle: {
                                color: '#f00'
                            },
                        },
                        axisLabel: {
                            color: '#fff'
                        },
                        splitLine: {
                            show: false
                        },
                        boundaryGap: false,
                        data: ['一月', '二月', '三月', '四月', '五月', '六月'],

                    }],

                    yAxis: [{
                        type: 'value',
                        min: 0,
                        // max: 140,
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)'
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: false,
                            margin: 20,
                            textStyle: {
                                color: '#d1e6eb',

                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    }],
                    series: [
                        {
                        name: '注册总量',
                        type: 'line',
                        // smooth: true, //是否平滑
                        showAllSymbol: true,
                        // symbol: 'image://./static/images/guang-circle.png',
                        symbol: 'circle',
                        symbolSize: 25,
                        lineStyle: {
                            normal: {
                                color: "#6c50f3",
                                shadowColor: 'rgba(0, 0, 0, .3)',
                                shadowBlur: 0,
                                shadowOffsetY: 5,
                                shadowOffsetX: 5,
                            },
                        },
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#6c50f3',
                            }
                        },
                        itemStyle: {
                            color: "#6c50f3",
                            borderColor: "#fff",
                            borderWidth: 3,
                            shadowColor: 'rgba(0, 0, 0, .3)',
                            shadowBlur: 0,
                            shadowOffsetY: 2,
                            shadowOffsetX: 2,
                        },
                        tooltip: {
                            show: false
                        },
                        areaStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(108,80,243,0.3)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(108,80,243,0)'
                                }
                                ], false),
                                shadowColor: 'rgba(108,80,243, 0.9)',
                                shadowBlur: 20
                            }
                        },
                        data: [502, 205, 332, 281, 398, 214,]
                        },
                        {
                            name: '注册总量',
                            type: 'line',
                            // smooth: true, //是否平滑
                            showAllSymbol: true,
                            // symbol: 'image://./static/images/guang-circle.png',
                            symbol: 'circle',
                            symbolSize: 10,
                            lineStyle: {
                                normal: {
                                    color: "#6c50f3",
                                    shadowColor: 'rgba(0, 0, 0, .3)',
                                    shadowBlur: 0,
                                    shadowOffsetY: 5,
                                    shadowOffsetX: 5,
                                },
                            },
                            label: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    color: '#6c50f3',
                                }
                            },
                            itemStyle: {
                                color: "#6c50f3",
                                borderColor: "#fff",
                                borderWidth: 3,
                                shadowColor: 'rgba(0, 0, 0, .3)',
                                shadowBlur: 0,
                                shadowOffsetY: 2,
                                shadowOffsetX: 2,
                            },
                            tooltip: {
                                show: false
                            },
                            areaStyle: {
                                normal: {
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(0,202,149,0.3)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(0,202,149,0)'
                                    }
                                    ], false),
                                    shadowColor: 'rgba(0,202,149, 0.9)',
                                    shadowBlur: 20
                                }
                            },
                            data: [400, 158, 378, 200, 325, 114,]
                        },
                    ]
                };
                myTable.setOption(option)
                myTable.on('mouseover', function (params) {
                    myTable.setOption({
                        series: {
                            name: params.seriesName,
                            symbolSize: 12,
                            lineStyle: {
                                width: 5
                            }
                        }
                    })
                });
                myTable.on('mouseout', function (params) {
                    myTable.setOption({
                        series: {
                            name: params.seriesName,
                            symbolSize: 2,
                            lineStyle: {
                                width: 1.5
                            }
                        }
                    })
                })
            }
        },
        mounted() {
            setTimeout(() => {
                this.setTable()
                this.setPie()
                this.setChart()
            }, 200)

            // 监听窗口echart自适应浏览器变化大小
            //window.addEventListener('resize', () => {
            //        this.table.resize()
            //        this.pie.resize()
            //        this.chart.resize()
            //    console.log('16541654416516')
            //})
           
            //window.addEventListener('resize', () => {
            //    this.$echarts.init(document.getElementById('table')).resize()
            //    this.$echarts.init(document.getElementById('pie')).resize()
            //    this.$echarts.init(document.getElementById('chart')).resize()
            //    console.log('11111111111111111')
            //})
        }
    }
</script>
<style scoped>
    .content {
        width: 100%;
        height: 100%;
        margin-top:-10px;
    }


    .class-chart {
        width: 30%;
        height:300px;
        /*border: 1px solid green;*/
    }

    .class-pie {
        width: 30%;
        height: 300px;
    }

    .class-table {
        width: 35%;
        height:300px;
        margin-left:10px;
       
    }

    #table {
        width:100%;
        height:100%;
    }   
    #pie {
        width:100%;
        height:100%;
    }
    #chart{
        width:100%;
        height:100%;
    }
</style>