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 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',
		 
	};


}