zhxy-desk/pages/studentRanked/components/chart.js

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 seriesData = []
	let areaStyleColor = []
    let axisLabelRich = {
        text: {
        	width: 40,
            fontSize : 16,
        	marginLeft: '40px'
        }
    };
	data.forEach((item, index) => {
		// yLabel.push(item.student.student_name)
		seriesData.push(Math.abs(item.score_total))
        
        axisLabelRich[index] = {
            height: 40, // 图片高度
            width: 40, // 图片宽度 
            backgroundColor: {
                image: item.student.student_cartoon_photo, // 图片路径  
            }
        }
        
        if (item.score_total < 0) {
            areaStyleColor.push('rgba(231,79,176,0.2)')
        } else {
            areaStyleColor.push('rgba(0,0,0,0)')
        }
	})

	return {
		grid: {
			top: 0,
			bottom: 0,
			left: 140,
			right: '10%'
		},
		xAxis: {
			max: 'dataMax'
		},
		yAxis: {
			type: 'category',
			boundaryGap: true,
			splitArea: {
				show: true,
				interval: 0,
				areaStyle: {
					color: areaStyleColor
				},
			},
			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 : axisLabelRich
				// rich: {
				// 	// img1: {
				// 	// 	height: 30, // 图片高度  
				// 	// 	width: 30, // 图片宽度 

				// 	// 	backgroundColor: {
				// 	// 		image: '', // 图片路径  
				// 	// 		// 如果你使用的是模块化的方式（如 Vue），你可能需要使用 require 或 import 来引入图片  
				// 	// 		// 例如：image: require('@/assets/image.png')  
				// 	// 	}
				// 	// },
				// 	text: {
				// 		width: 40,
    //                     fontSize : 16,
				// 		marginLeft: '40px'
				// 	}
				// }
			}
		},
		series: [{

			itemStyle: {
				color: function(param) {
					return countryColors[(countryColors.length + param.dataIndex) % countryColors
							.length] ||
						'#5470c6';
				},

				height: 40
			},
	
			type: 'bar',
			data: seriesData,
			label: {
				show: true,
				position: 'right',
				valueAnimation: true,
				
			}
		}],
		legend: {},
		animationDuration: 1000,
		animationDurationUpdate: 1000,
		animationEasing: 'linear',
		animationEasingUpdate: 'linear',
		 
	};


}