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

<template>
    <div class="data_body">
        <div style="width: 100%; height: 100%" :style="{ minWidth: ooption.hours.length * 75 + 'px' }">
            <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',
                    confine: true,
                    formatter: function (params) {
                        // console.log(params);
                        return params.marker + params.name + ' ' + params.data[2];//params.seriesName + '<br>' + params.

                    }
                },
                grid: {
                    top: '5%',
                    left: 0,
                    bottom: '5%',
                    right: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    boundaryGap: false,
                    splitLine: {
                        show: true
                    },
                    axisLine: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'category',
                    data: [],
                    axisLine: {
                        show: false
                    }
                },
                series: [
                    {
                        name: 'Punch Card',
                        type: 'scatter',
                        symbolSize: function (val) {
                            return val[2] * 3;
                        },
                        data: [],
                        animationDelay: function (idx) {
                            return idx * 5;
                        },
                        itemStyle: {
                            color: function(params) {
                            // 根据行索引设置不同的颜色
                            var row = params.value[1];
                            var colorList = ['hsl(170, 80%, 75%)', 'hsl(300, 99%, 70%)', 'hsl(139, 93%, 60%)', 'hsl(56, 73%, 69%)', 'hsl(352, 98%, 69%)', 'hsl(288, 76%, 66%)', 'hsl(167, 89%, 60%)', 'hsl(83, 81%, 74%)', 'hsl(359, 84%, 66%)', 'hsl(208, 96%, 66%)', 'hsl(259, 82%, 62%)', 'hsl(224, 95%, 64%)', 'hsl(119, 89%, 71%)', 'hsl(35, 75%, 70%)', 'hsl(48, 73%, 76%)', 'hsl(10, 73%, 69%)', 'hsl(112, 88%, 71%)', 'hsl(90, 87%, 61%)', 'hsl(37, 83%, 66%)', 'hsl(192, 86%, 72%)'];
                            return colorList[row % colorList.length];
                            }
                        }
                    }
                ]
                // 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]]);
                // });
                this.option.xAxis.data = hours
                this.option.yAxis.data = days
                this.option.series[0].data = data.map(function (item) {
                    return [item[1], item[0], item[2]];
                })
                // 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.xAxis.data = hours
                    this.option.yAxis.data = days
                    this.option.series[0].data = data.map(function (item) {
                        return [item[1], item[0], item[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;
    overflow: auto;
}
</style>