echarts柱状图的使用
功能包括：自定义tooltip显示，自定义标注，
let myCharts=this.$echarts.init(document.getElementById('ranking'));
myCharts.setOption({//设置鼠标移入显示提示窗tooltip: {trigger:'axis',**自定义tooltip**formatter(params){//以下scoret,rank,value是根据xAxis中的bottomData的结构获取的return `<div style="color:dodgerblue;">分数：${params[0].data.scoret}</div><div style="color:dodgerblue;">分位次：${params[0].data.rank}</div><div style="color:dodgerblue;">同分人数：${params[0].data.value}</div>`;},backgroundColor:'#ffffff'，axisPointer: { // 坐标轴指示器，坐标轴触发有效type: 'line' // 默认为直线，可选为：'line' | 'shadow'},},xAxis: {type: 'category',splitLine: { // grid 分割线设置show: true,lineStyle: {width: 1,type: 'dashed',color: ['rgba(238,238,238,1)']}},data: bottomData,},yAxis: {type: 'value',axisLabel: {formatter:'{value}人' //自定义y轴刻度值}},series: [{data:personDataCountd,type:'bar',markPoint: {data:[/*自定义标注，xAxis传x轴下标，yAxis传Y轴对应的值*/{name:'最大值',value:'YOU',xAxis:xIndex,yAxis:yIndex}]},itemStyle: {normal: {color: 'rgba(0,170,255,1)',label:{//默认在柱状图顶部显示y轴的值，也可使用formatter方法自定义show:true,position:'top',textStyle: { //数值样式color: 'green',fontSize: 12,}}},},}
]
)}
//关键代码
result.data.dataList.forEach((valS,index)=>{
//判断数组中的值若与输入的分数相同则获取当前数组的xAxis的下标，yAxis的对应的值if(valS.score===this.scoreNums){//获取x轴下标this.xIndex=index;this.yIndex=valS.num;}this.bottomDataScore.push(valS.rank);//设置tooltip的显示值，其中num的对象必须为value因为默认需要在x轴显示其刻度this.personDataCount.push({scoret:valS.score,value:valS.num,rank:valS.rank});
})
`
效果如下：
You为markpoint的自定义标注，白框为tooltip的自定义提示窗
