柱状图加进度条,
柱状图X轴文本展示不全换行问题
xAxis: {
type: 'category',
axisLabel: {
interval: 0, // 强制文字产生间隔
// rotate: 20, // 文字逆时针旋转45°
textStyle: {
// 文字样式
// color: 'black',
// fontSize: 16,
// fontFamily: 'Microsoft YaHei',
},
formatter: function (params) {
let newParamsName = ''; // 最终拼接成的字符串
let paramsNameNumber = params.length; // 实际标签的个数
let provideNumber = 7; // 每行能显示的字的个数
let rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话,需要显示几行,向上取整
/**
* 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
*/
// 条件等同于rowNumber>1
if (paramsNameNumber > provideNumber) {
/** 循环每一行,p表示行 */
for (let p = 0; p < rowNumber; p++) {
let tempStr = ''; // 表示每一次截取的字符串
let start = p * provideNumber; // 开始截取的位置
let 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;
},
},
},
dataZoom: {
show: true, // 为true 滚动条出现
realtime: true,
type: 'slider', // 有type这个属性,滚动条在最下面,也可以不行,写y:36,这表示距离顶端36px,一般就是在图上面。
height: 15, // 表示滚动条的高度,也就是粗细
start: 0, // 表示默认展示20%~80%这一段。
end: 10,
},