echarts图表x轴字数没显示全,导致丢失

34 篇文章 1 订阅
15 篇文章 0 订阅

看图,有问题的

echarts01

解决之后,倾斜显示全部内容,也可以显示两行文字内容

echarts

局部代码

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();// 初始化图表组件
});
微信扫码订阅
UP更新不错过~
关注
  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

Э时间行者于我

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值