Echarts实战案例代码(7):柱图实现显示多组数据label标签的解决方案
< 返回列表时间: 2020-07-18来源:OSCHINA

一、创建数组: var dataName = [ "A" , "B" , "C" , "D" , "E" ] ; var datalabel = [ 100 , 2 , 3 , 12 , 13 ] ; var data = [ 18203 , 23489 , 29034 , 104970 , 131744 ] ;
二、设置option var option = { tooltip : { trigger : 'axis' , axisPointer : { type : 'shadow' } } , grid : { left : '3%' , right : '4%' , bottom : '3%' , containLabel : true } , xAxis : { type : 'value' , boundaryGap : [ 0 , 0.01 ] } , yAxis : { type : 'category' , data : dataName , axisLabel : { interval : 0 , color : '#666' , align : 'right' , fontSize : 13 , } } , series : [ { name : '漏刻有时' , type : 'bar' , itemStyle : { normal : { barBorderRadius : 5 , } , } , label : { show : true , position : "right" , formatter : function ( params ) { console . log ( params . dataIndex ) ; return '总金额:' + data [ params . dataIndex ] + '元\n\n总数量:' + datalabel [ params . dataIndex ] + '个' } } , data : data } , ] } ;
三、重点解读: label : { show : true , position : "right" , formatter : function ( params ) { //console.log(params.dataIndex); return '总金额:' + data [ params . dataIndex ] + '元\n\n总数量:' + datalabel [ params . dataIndex ] + '个' } }
Done!
热门排行