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

<template>
    <el-drawer size='480px' title="排行榜" :visible.sync="show" direction="rtl">
        <view id="chart-bar" :style="{height:height}" class="">

        </view>
    </el-drawer>
</template>

<script>
    import * as echarts from "echarts";
    import {
        chartBar
    } from './chart.js'
    export default {
        data() {
            return {
                show: false,
                height : 0,
            }
        },
        props: {
            chooseClassId: {
                type: Number | String,
                default: ""
            },
        },
        computed: {},
        methods: {
            open() {
                this.show = true;

                this.$api.sendRequest({
                    url: '/mobile/studentTab/getStudentMonthRank',
                    method: "post",
                    data: {
                        class_id: this.chooseClassId,
                    },
                    success: res => {
                        let dom = document.getElementById('chart-bar')
                        this.height = `${res.data.length * 60}px`
                        this.$nextTick(() => {
                            this.chart = echarts.init(dom);
                            const myChart = this.chart;
                            myChart.clear();
                            // res.data.forEach((item, index) => {
                            //     // option.yAxis.axisLabel.rich[index] = {
                            //     //     height: 40, // 图片高度
                            //     //     width: 40, // 图片宽度 
                            //     //     backgroundColor: {
                            //     //         image: item.student.student_cartoon_photo, // 图片路径  
                            //     //     }
                            //     // }
                            //     if (item.score_total < 0) {
                            //         option.yAxis.splitArea.areaStyle.color.push('rgba(231,79,176,0.2)')
                            //     } else {
                            //         option.yAxis.splitArea.areaStyle.color.push('rgba(0,0,0,0)')
                            //     }
                            // })
                            myChart.setOption(chartBar(res.data));
                        })
                    }
                })
            }
        }
    }
</script>

<style>

</style>