修改排行榜图标

common/js/http.js

@@ -58,10 +58,10 @@ export default {
 			//开发环境读配置
 			if(Config.isLocal==2){
 				// Config.baseUrl='http://125.124.170.221:8000'
-				Config.baseUrl='http://zhxy.com'
+				// Config.baseUrl='http://zhxy.com'
 			}else{
-				Config.baseUrl='http://zhxy.com'
-				// Config.baseUrl='http://125.124.170.221:8000'
+				// Config.baseUrl='http://zhxy.com'
+				Config.baseUrl='http://125.124.170.221:8000'
 			}
 		}
 		

pages/studentRanked/components/chart.js

@@ -0,0 +1,103 @@
+import * as echarts from "echarts";
+
+export function chartBar(data) {
+	let countryColors = [
+		'rgba(224,96,93)',
+		'rgba(231,168,79)',
+		'rgba(163,201,90)',
+		'rgba(90,201,148)',
+		'rgba(69,239,209)',
+		'rgba(69,160,239)',
+		'rgba(69,73,239)',
+		'rgba(231,79,176)',
+		'rgba(224,93,142)',
+		'rgba(155,90,201)',
+
+	]
+	let yLabel = []
+	let value = []
+	data.forEach(item => {
+		yLabel.push(item.student.student_name)
+		value.push(Math.abs(item.score_total))
+	})
+
+	return {
+		grid: {
+			top: 0,
+			bottom: 0,
+			left: '20%',
+			right: '10%'
+		},
+		xAxis: {
+			max: 'dataMax'
+		},
+		yAxis: {
+			type: 'category',
+			boundaryGap: true,
+			splitArea: {
+				show: true,
+				interval: 0,
+				areaStyle: {
+					color: []
+				},
+			},
+			inverse: true,
+			animationDuration: 1000,
+			animationDurationUpdate: 1000,
+			axisLabel: {
+				show: true,
+				formatter: function(value, index) {
+
+					// 根据你的需求调整 formatter 函数  
+					// 这里只是一个简单的示例，假设你想在所有 Y 轴 label 前都添加一个图片  
+					return `{${index}|   }     {text|${data[index].student.student_name} }   `;
+				},
+				rich: {
+					img1: {
+						height: 20, // 图片高度  
+						width: 20, // 图片宽度 
+
+						backgroundColor: {
+							image: '', // 图片路径  
+							// 如果你使用的是模块化的方式（如 Vue），你可能需要使用 require 或 import 来引入图片  
+							// 例如：image: require('@/assets/image.png')  
+						}
+					},
+					text: {
+						width: 30,
+						marginLeft: '40px'
+					}
+				}
+			}
+		},
+		series: [{
+
+			itemStyle: {
+				color: function(param) {
+					return countryColors[(countryColors.length + param.dataIndex) % countryColors
+							.length] ||
+						'#5470c6';
+				},
+
+				height: 40
+			},
+	
+			type: 'bar',
+			data: value,
+			label: {
+				show: true,
+				position: 'right',
+				valueAnimation: true,
+				
+			}
+		}],
+		legend: {},
+		animationDuration: 1000,
+		animationDurationUpdate: 1000,
+		animationEasing: 'linear',
+		animationEasingUpdate: 'linear',
+		 
+	};
+
+
+}

pages/studentRanked/components/rank-list.vue

@@ -1,45 +1,90 @@
 <template>
-    <el-drawer title="排行榜" :visible.sync="show" direction="rtl">
-        <view style="text-align: center;" class="">
-            开发中....!
-        </view>
-    </el-drawer>
+	<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>
-    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 => {
-                        
-                    }
-                })
-            }
-        }
-    }
+	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>