zhxy-desk/pages/studentRanked/components/rank-list.vue

<template>
    <el-drawer size='480px' :visible.sync="show" direction="rtl" destroy-on-close>
        <view id="chart-bar" ref="chartBar" v-loading="loading" :style="{height:height}" class=""></view>
        <view slot="title">
            <text class="ui-mr20">排行榜<!-- {{yearMonth}} --></text>
            <el-date-picker v-model="yearMonth" value-format="yyyyMM" type="month" placeholder="选择月" @change="change"></el-date-picker>
        </view>
    </el-drawer>
</template>

<script>
    import { Loading } from 'element-ui';
    

    import * as echarts from "echarts";
    import {
        chartBar
    } from './chart.js'
    export default {
        data() {
            return {
                show: false,
                loading : false,
                height : 0,
                yearMonth : '',
            }
        },
        props: {
            chooseClassId: {
                type: Number | String,
                default: ""
            },
            cartoonHeadImg : {
                default : true,
            },
        },
        computed: {},
        methods: {
            change(){
                this.getData();
            },
            open() {
                this.show = true;
                this.$nextTick(() => {
                    this.getData();
                })
            },
            getData(){
                this.loading = true;
                // this.loadingInstance = Loading.service({
                //     target : this.$refs.chartBar.$el
                // });
                
                this.$api.sendRequest({
                    url: '/mobile/studentTab/getStudentMonthRank',
                    method: "post",
                    data: {
                        class_id: this.chooseClassId,
                        year_month : this.yearMonth
                    },
                    success: res => {
                        // this.loadingInstance.close();
                        this.loading = false;
                        this.height = `${res.data.length * 60}px`
                        this.$nextTick(() => {
                            // console.log(this.$refs.chartBar.$el);
                            const dom = this.$refs.chartBar.$el;
                            this.chart = echarts.init(dom);
                            this.chart.clear();
                            this.chart.setOption(chartBar(res.data, this.cartoonHeadImg));
                        })
                    }
                })
            }
        }
    }
</script>

<style>

</style>