callNumberBarchart: function() {
var mySize = document.getElementById('call-number-bar');
mySize.style.width = 350 + 'px';
mySize.style.height = 260 + 'px';
var myCallNumberBarchart = echarts.init(mySize);
var xdata = this.pubTalkReport.callNumberInfoList.map(v => v.nickname);
var seriesData = this.pubTalkReport.callNumberInfoList.map(v => v.callNumber);
var option = {
xAxis: {
type: 'category',
data: xdata,
axisLabel: {
show: true,
interval: 0,
textStyle: {
color: 'rgba(0, 0, 0, 0.5)',
fontSize: 12
},
formatter: function(params) {
var newParamsName = "";
var tempParamsName = "";
var paramsNameNumber = params.length;
var provideNumber = 2;
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = "";
var start = p * provideNumber;
var end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = params.substring(start, paramsNameNumber);
} else {
tempStr = params.substring(start, end) + "\n";
}
tempParamsName += tempStr;
}
} else {
tempParamsName = params;
}
if (tempParamsName.length > 9) {
newParamsName = tempParamsName.substring(0, 10) + '...';
} else {
newParamsName = tempParamsName;
}
return newParamsName;
}
}
},
yAxis: {
type: 'value',
min: 0,
max: function(value) {
return Math.ceil(value.max) + 1
},
minInterval: 1
},
series: [{
data: seriesData,
type: 'bar',
itemStyle: {
color: '#FF9523',
barBorderRadius: [5, 5, 0, 0],
},
label: {
show: true,
position: 'top',
color: '#FE931F',
fontSize: '14px',
formatter: (params) => {
return params.value[params.encode.x[0]];
}
},
barWidth: 25
}]
};
option && myCallNumberBarchart.setOption(option);
window.addEventListener('resize', function() {
myCallNumberBarchart.resize();
})
},
<style>
#call-number-bar {
position: relative;
top: -110rpx;
left: 18rpx;
z-index: 100;
}
</style>
把柱状图横过来
xAxis:[{
type:'value'
}],
yAxis:[{
type:'category'
}],