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

<template>
	<el-drawer size='50%' title="排行榜" :visible.sync="show" direction="rtl">
		<view id="chart-bar" style="width: 100%;height: 100%;" class="">

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

<script>
	import * as echarts from "echarts";
	import {
		chartBar
	} from './chart.js'
	export default {
		data() {
			return {
				show: false,

			}
		},
		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')
						dom.style.height = `${res.data.length * 40}px`
						this.chart = echarts.init(dom);
						const myChart = this.chart;
						myChart.clear();
						let option = chartBar(res.data)
						res.data.forEach((item, index) => {
							option.yAxis.axisLabel.rich[index] = {
								height: 20, // 图片高度
								width: 20, // 图片宽度 
								backgroundColor: {
									image: item.student.student_cartoon_photo, // 图片路径  
									// 如果你使用的是模块化的方式（如 Vue），你可能需要使用 require 或 import 来引入图片  
									// 例如：image: require('@/assets/image.png')  
								}
							}
							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(option);
						// setTimeout(() => {
						// 	myChart.setOption({
						// 	  series: [
						// 	    {
						// 	      type: 'bar',
						// 	      data:[5000,6000,1000,4000,58000,8000]
						// 	    }
						// 	  ]
						// 	});
						// },2000)
						
					}
				})
			}
		}
	}
</script>

<style>

</style>