pbl-teacher-table/src/components/pages/dataBoardSies/school/teacherInfo/index.vue

<template>
    <div class="data_body">
        <div style="width: 100%; height: 100%">
            <div id="charts_canvas" class="echart" style="width: 100%; height: 100%; "></div>
        </div>
    </div>
</template>
  
<script>
export default {
    props: {
        courseArray: {
            type: Array,
        },
    },
    data() {
        return {
            chartObj: null,
            ooption: {
                hours: [],
                days: [],
                data: [],
            },
            option: {
                tooltip: {
                    position: 'top',
                    formatter: function (params) {
                        // console.log(params);
                        return params.marker + params.name + ' ' + params.data[1];//params.seriesName + '<br>' + params.

                    }
                },
                title: [],
                singleAxis: [],
                series: []
            },
        };
    },
    methods: {
        // setChart(option) {
        //     // 雷达图显示的标签
        //     let newPromise = new Promise((resolve) => {
        //         resolve();
        //     });
        //     //然后异步执行echarts的初始化函数
        //     newPromise.then(() => {
        //         const chartObj = this.$echarts.init(
        //             //劳动课程
        //             this.$el.querySelector("#charts_canvas")
        //         );
        //         const hours = option.hours
        //         // [
        //         //     // '语文', '数学', '英语', '科学', '体育', '音乐', '美术',
        //         //     // '劳动', '其他',
        //         // ];
        //         // prettier-ignore
        //         const days = option.days
        //         // [
        //         //     // '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
        //         // ];
        //         // prettier-ignore
        //         const data = option.data
        //         // [
        //         //     // [0, 0, 2], [0, 1, 1], [0, 2, 3], [0, 3, 0], [0, 4, 5], [0, 5, 5], [0, 6, 7], [0, 7, 8], [0, 8, 1],
        //         //     // [1, 0, 5], [1, 1, 1], [1, 2, 2], [1, 3, 0], [1, 4, 5], [1, 5, 7], [1, 6, 7], [1, 7, 8], [1, 8, 6],
        //         //     // [2, 0, 5], [2, 1, 2], [2, 2, 0], [2, 3, 2], [2, 4, 1], [2, 5, 5], [2, 6, 4], [2, 7, 4], [2, 8, 1],
        //         //     // [3, 0, 1], [3, 1, 1], [3, 2, 1], [3, 3, 0], [3, 4, 5], [3, 5, 2], [3, 6, 7], [3, 7, 8], [3, 8, 5],
        //         //     // [4, 0, 5], [4, 1, 3], [4, 2, 0], [4, 3, 3], [4, 4, 4], [4, 5, 2], [4, 6, 3], [4, 7, 5], [4, 8, 1],
        //         //     // [5, 0, 5], [5, 1, 1], [5, 2, 0], [5, 3, 0], [5, 4, 5], [5, 5, 5], [5, 6, 7], [5, 7, 8], [5, 8, 3],
        //         // ];
        //         const title = [];
        //         const singleAxis = [];
        //         const series = [];
        //         days.forEach(function (day, idx) {
        //             title.push({
        //                 textBaseline: 'middle',
        //                 top: ((idx + 0.5) * 90) / days.length + '%',
        //                 text: day,
        //                 textStyle: {
        //                     fontSize: 12,
        //                 },
        //             });
        //             singleAxis.push({
        //                 left: 70,
        //                 type: 'category',
        //                 boundaryGap: false,
        //                 data: hours,
        //                 top: (idx * 90) / days.length + 5 + '%',
        //                 height: 90 / days.length - 10 + '%'
        //             });
        //             series.push({
        //                 singleAxisIndex: idx,
        //                 coordinateSystem: 'singleAxis',
        //                 type: 'scatter',
        //                 data: [],
        //                 symbolSize: function (dataItem) {
        //                     return dataItem[1] * 3;
        //                 }
        //             });
        //         });
        //         data.forEach(function (dataItem) {
        //             series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
        //         });
        //         chartObj.off('click')
        //         let _this = this
        //         chartObj.on('click', function (param) {  
        //             //param参数包含的内容有： 
        //             //param.name：X轴的值 
        //             //param.data：Y轴的值 
        //             //param.value：Y轴的值 
        //             //param.type：点击事件均为click 
        //             //param.seriesName：legend的名称 
        //             //param.seriesIndex：系列序号（series中当前图形是第几个图形第几个） 
        //             //param.dataIndex：数值序列（X轴上当前点是第几个点）
        //             //alert(param.seriesName);  //legend的名称
        //             console.log(param);  //X轴的值
        //             _this.$emit('openCourse',param.componentIndex,param.data[0])
        //         });

        //         this.option.title = title
        //         this.option.singleAxis = singleAxis
        //         this.option.series = series
        //         // 初始化雷达图
        //         this.chartObj = chartObj;
        //         this.chartObj.setOption(this.option);
        //     });
        // },
        setChart(option) {
            // 雷达图显示的标签
            let newPromise = new Promise((resolve) => {
                resolve();
            });
            //然后异步执行echarts的初始化函数
            newPromise.then(() => {
                const chartObj = this.$echarts.init(
                    //劳动课程
                    this.$el.querySelector("#charts_canvas")
                );
                const hours = 
                [
                    '1班', '2班', '3班', '4班', '5班', '6班', '7班',
                    '8班'
                ];
                // prettier-ignore
                const days = 
                [
                    '一年级', '二年级', '三年级', '四年级', '五年级', '六年级'
                ];
                // prettier-ignore
                const data = 
                [
                    [0, 0, 8], [0, 1, 3], [0, 2, 3], [0, 3, 2], [0, 4, 4], [0, 5, 5], [0, 6, 0], [0, 7, 0],
                    [1, 0, 18], [1, 1, 29], [1, 2, 21], [1, 3, 37], [1, 4, 38], [1, 5, 41], [1, 6, 0], [1, 7, 0],
                    [2, 0, 46], [2, 1, 43], [2, 2, 31], [2, 3, 44], [2, 4, 43], [2, 5, 38], [2, 6, 0], [2, 7, 0],
                    [3, 0, 43], [3, 1, 37], [3, 2, 25], [3, 3, 40], [3, 4, 35], [3, 5, 26], [3, 6, 0], [3, 7, 0],
                    [4, 0, 38], [4, 1, 37], [4, 2, 25], [4, 3, 0], [4, 4, 0], [4, 5, 0], [4, 6, 0], [4, 7, 0],
                    [5, 0, 24], [5, 1, 0], [5, 2, 3], [5, 3, 0], [5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0],
                ];
                const title = [];
                const singleAxis = [];
                const series = [];
                days.forEach(function (day, idx) {
                    title.push({
                        textBaseline: 'middle',
                        top: ((idx + 0.5) * 90) / days.length + '%',
                        text: day,
                        textStyle: {
                            fontSize: 12,
                        },
                    });
                    singleAxis.push({
                        left: 70,
                        type: 'category',
                        boundaryGap: false,
                        data: hours,
                        top: (idx * 90) / days.length + 5 + '%',
                        height: 90 / days.length - 10 + '%'
                    });
                    series.push({
                        singleAxisIndex: idx,
                        coordinateSystem: 'singleAxis',
                        type: 'scatter',
                        data: [],
                        symbolSize: function (dataItem) {
                            return dataItem[1] * 1.5;
                        }
                    });
                });
                data.forEach(function (dataItem) {
                    series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
                });
                this.option.title = title
                this.option.singleAxis = singleAxis
                this.option.series = series
                // 初始化雷达图
                this.chartObj = chartObj;
                this.chartObj.setOption(this.option);
            });
        },
        setJson(array) {
            this.setChart(this.ooption);
            if (array != undefined && array.length > 0) {
                this.ooption = {
                    hours: [],
                    days: [],
                    data: [],
                }
                let _grade = []
                let _subject = []
                let data = []

                array.forEach(function (item, idx) {
                    _grade.push(item.name)
                })

                array[0].subject.forEach(function (item, idx) {
                    _subject.push(item.name)
                })
                array.forEach(function (item, idx) {
                    item.subject.forEach(function (item2, idx2) {
                        data.push([idx, idx2, item2.course])
                    })
                })
                this.ooption.hours = _subject
                this.ooption.days = _grade
                this.ooption.data = data
                if (!this.chartObj) {
                    this.setChart(this.ooption);
                } else {
                    const hours = this.ooption.hours;
                    // prettier-ignore
                    const days = this.ooption.days;
                    // prettier-ignore
                    const data = this.ooption.data;
                    const title = [];
                    const singleAxis = [];
                    const series = [];
                    days.forEach(function (day, idx) {
                        title.push({
                            textBaseline: 'middle',
                            top: ((idx + 0.5) * 90) / days.length + '%',
                            text: day,
                            textStyle: {
                                fontSize: 12,
                            },
                        });
                        singleAxis.push({
                            left: 70,
                            type: 'category',
                            boundaryGap: false,
                            data: hours,
                            top: (idx * 90) / days.length + 5 + '%',
                            height: 90 / days.length - 10 + '%'
                        });
                        series.push({
                            singleAxisIndex: idx,
                            coordinateSystem: 'singleAxis',
                            type: 'scatter',
                            data: [],
                            symbolSize: function (dataItem) {
                                return dataItem[1] * 3;
                            }
                        });
                    });
                    data.forEach(function (dataItem) {
                        series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
                    });

                    this.option.title = title
                    this.option.singleAxis = singleAxis
                    this.option.series = series
                    this.chartObj.setOption(this.option);
                }
            }
        }
    },
    watch: {
        courseArray: {
            immediate: true,
            deep: true,
            handler(newValue, oldValue) {
                // newValue = newValue.filter(item => {
                //     return ['一年级','二年级','三年级','四年级','五年级','六年级','七年级'].indexOf(item.name) !== -1
                // })
                this.setJson(newValue)
                this.$forceUpdate();
            },
        },
    },
    mounted() {
        // this.courseArray = this.courseArray.filter(item => {
        //     return ['一年级','二年级','三年级','四年级','五年级','六年级','七年级'].indexOf(item.name) !== -1
        // })

        this.setJson(this.courseArray)
        var _this = this;
        window.addEventListener("resize", () => {
            if (_this.chartObj) {
                _this.chartObj.resize();
            }
        });
    },
};
</script>
  
<style scoped>
.data_body {
    height: 100%;
    position: relative;
    border-radius: 5px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0;
    width: 95%;
    background: #fff;
}
</style>