看图，有问题的
解决之后，倾斜显示全部内容，也可以显示两行文字内容
局部代码
xAxis: {
type: 'category',
axisLabel:{
// 有的如果只需要显示全部，不倾斜只设置 interval:0 就可以
interval: 0, // 如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
rotate: '45', // 刻度标签旋转的角度
lineHeight: 18, // 行高
formatter : function(params){ // ***重点就是这儿***
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = 10;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
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";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
}
},
data: data.data.map((item) => item.name)
},
全部
<div id="echartsCall_ranking2" style="width: 100%;height: 364px;"></div>
// 数据类型
let devNeedData =[
{name: "余三三", value: 13}, {name: "伊三三", value: 12}, {name: "李三三", value: 10.5},
{name: "杨三三黄三三黄三三黄三三黄三三", value: 11.5},{name: "丁三三", value: 10.5},{name: "李三三", value: 12},
{name: "黄三三", value: 9.5},{name: "刘X", value: 12.5},{name: "李X", value: 12},
{name: "郑三三", value: 7.5},{name: "盛三三", value: 13},{name: "林三三", value: 9.5},
{name: "黄三三", value: 13.5},{name: "黄三三", value: 11},{name: "刘三三", value: 12},
{name: "凌三三", value: 3.7}, {name: "任三三", value: 0.5}, {name: "彭X", value: 0.5}
]// 普通-柱状图
var chartFnc = {
init: function() {
this.initBar2('echartsCall_ranking2', {
title: {
text: '开发人员实际需求故事点',
left: '40%',
bottom: '0',
textStyle: {
fontSize: '14'
}
},
grid: {
left: '3%',
right: '5%',
bottom: '5%',
containLabel: true
},
markLine: {
data: [{ type: 'average', name: '平均值' }]
},
data: devNeedData
})
},
initBar2(id, data) {
var chartDom = document.getElementById(id)
var myChart = echarts.init(chartDom)
var option
option = {
title: data.title,
grid: data.grid || {},
xAxis: {
type: 'category',
axisLabel:{
// 有的如果只需要显示全部，不倾斜只设置 interval:0 就可以
interval: 0, // 如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
rotate: '45', // 刻度标签旋转的角度
lineHeight: 18, // 行高
formatter : function(params){ // ***重点就是这儿***
var newParamsName = "";// 最终拼接成的字符串
var paramsNameNumber = params.length;// 实际标签的个数
var provideNumber = 10;// 每行能显示的字的个数
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
/**
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
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";
}
newParamsName += tempStr;// 最终拼成的字符串
}
} else {
// 将旧标签的值赋给新标签
newParamsName = params;
}
//将最终的字符串返回
return newParamsName
}
},
data: data.data.map((item) => item.name)
},
yAxis: {
type: 'value'
},
series: [
{
data: data.data.map((item) => item.value),
type: 'bar',
// barMaxWidth: 20,//最大柱图宽度
label: {
show: true,
position: 'top'
},
markLine: data.markLine || {}
}
]
}
myChart.setOption(option);
},
chartFnc.init();// 初始化图表组件
});
