1.比较效果图两个坐标轴的值。如果左侧大于右侧,则会在左侧直方图上方提示“性能良好”。2、尽量考虑tooltip是单实例模式,一次只能显示一个,所以不能使用tooltip。请考虑使用markPoint。查询markPoint下数组的格式:markPoint:{data:[{name:'doWell',xAxis:7,yAxis:18},]},xAxis:为x轴坐标,yAxis为y轴坐标value因为可能显示的提示框有多个,所以我们获取到相邻的两个直方图的数据后需要对其进行处理。假设左边的数据是this.data1,右边的数据是this.data2constnewArr=[]this.data1.map((item,idx)=>{if(item>this.data2[idx]){newArr.push({name:'well',xAxis:idx,yAxis:item})}})然后就可以在series的左边显示直方图了addmarkPointmarkPoint:{//data:[//{name:'well',value:'goodperformance',xAxis:0,yAxis:60},//]data:newArr,symbolOffset:[this.calFontSize(0.2),'-50%'],//调整提示position//markPoint支持导入图片作为提示框,同时支持base64和svgsymbols:'image://'+require('@/assets/img/classReport/markPoint.svg'),//symbolSize:[this.calFontSize(0.85),this.calFontSize(0.4)]//设置字号8540适配}},自定义字体适配函数calFontSize(res){constclientWidth=window.innerWidth||文档.documentElement.clientWidth||document.body.clientWidth如果(!clientWidth)returnconstfontSize=100*(clientWidth/1366)returnres*fontSize}markPoint官方文档:https://echarts.apache.org/zh/option.html#series-line.markPoint
