pbl-teacher-table/src/components/pages/dataBoardNew/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);
            });
        },
        setJson(array) {
            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) {
                this.setJson(newValue)
                this.$forceUpdate();
            },
        },
    },
    mounted() {
        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>