echart柱状图横向_echarts 横向柱状图TOP10

1.position 决定标签在图形的位置；

2.formatter中对数据进行处理，经过判断给相应的位置添加相应的样式信息，这一块要依赖rich，具体的用法参考echarts官网；

series: [{

data: data1,

type: 'bar',

barWidth:'20%',

barGap:'20%',

label:{

show:true,

position: [10,-13],

// formatter:'{b|{b}}{x| 数量 }{c}',

formatter: function(params) {

for (var i = 0,l = option.yAxis.data.length; i < l; i++) {

if (option.yAxis.data[i] == params.name) {

var val1 = params.name || 0;

var val2 = option.series[0].data[i] || 0;

if(option.yAxis.data.length>=1&&(i === option.yAxis.data.length - 1)){

return '{b|NO.'+(option.yAxis.data.length - i)+'}{x|' +' '+ val1 +' 数量 }' + val2;

}else if(option.yAxis.data.length>=2&&(i === option.yAxis.data.length - 2)){

return 'NO.'+(option.yAxis.data.length - i)+'{x|' +' '+ val1 + ' 数量 }' + val2;

}else if(option.yAxis.data.length>=3&&(i === option.yAxis.data.length - 3)){

return '{y|NO.'+(option.yAxis.data.length - i)+'}{x|' +' '+ val1 + ' 数量 }' + val2;

}

return '{x|NO.'+(option.yAxis.data.length - i)+'}{x|' +' '+ val1 + ' 数量 }' + val2;

}

}

},

rich: {

b: {

color: 'red'

},

y:{

color: 'yellow'

},

x: {

color: '#000'

},

},

align:'left',

},

}]