const XData = ['A同学', 'B同学', 'C同学', 'D同学', 'E同学'] const YData = [90, 80, 70, 45, 30] const rankData = { 90: 1, 80: 2, 70: 3, 45: 4, 30: 5 } option = { tooltip: { trigger: 'axis', backgroundColor: '#fff', axisPointer: { type: 'shadow' // 可选为：'line' | 'shadow' }, padding: 0, formatter: (params) => { console.log(params) // 自定义 tooltip，这里返回 div 内容随意改造，打印看下 params 拿自己想要的数据 return `

-> ${params[0].axisValueLabel}

排名

${rankData[params[0].value]}

` }, textStyle: { color: 'rgba(0, 0, 0, .8)' } }, xAxis: { type: 'category', splitLine: { show: false }, axisLine: { lineStyle: { color: 'rgba(0, 0, 0, .5)' } }, axisTick: { lineStyle: { color: 'rgba(0, 0, 0, .5)' } }, data: XData }, yAxis: { type: 'value', splitNumber: 2, axisLine: { show: false, lineStyle: { color: 'rgba(0, 0, 0, .5)', } }, axisTick: { show: false, }, axisLabel: { fontSize: 16, // 分数与排名怎么对应？试了一个曲线还挺像，具体情况根据项目自定义 formatter 函数 formatter: function (value, index) { return Math.ceil((100 - value) * (100 - value) / 700); } } }, series: [ { name: '分数', type: 'bar', barWidth: 25, itemStyle: { color: 'rgba(42, 130, 228, 1)' }, data: YData } ] };

Echarts在线免费图表