echarts 数据转换成千位符，坐标轴文字折行显示

相信大家都做过大屏，我理解的大屏大部分都是一些图表和地图及数据列表等，今天刚收尾了大屏的项目，现在总结下在开发大屏的时候遇到的echarts一些细节的问题。

echarts 数据转换成千位符

项目中遇到的第一个问题就是要把堆叠柱形图上的数据加上千位符。

series:[
	{
		label: {
				normal: {
					show: true,
					position: 'inside',//数据显示位置，默认显示在中间
					textStyle: {
						color: '#fff', //数据文字颜色
						fontSize: 15 //数据文字大小
					},
					formatter: function(p) {
						let value = ''
						if (p.value > 0) {
							value = p.value
							if (value > 999) {
								// 数值加千分号
								let parts = value.toString().split('.')
								parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',')
								value = parts.join('.')
							}
						}
						return value
					}
				}
			},
	}
]

这样就可以实现数据千位符了。

echarts 坐标轴文字折行

项目中遇到的第二个问题就是要把坐标轴文字可以折行，不要倾斜文字角度。

xAxis: {
		type: 'category',
		//boundaryGap: false, //去除图表四周留白
		axisTick: { //x轴刻度尺  
			show: false,
			alignWithLabel:true
		},
		axisLine: { 
			show: true,
			lineStyle: {//x轴线条颜色
				color: '#374186',
				width: 0.5
			}
		},
		axisLabel: {
			show: true,
			//rotate: 40, //文字倾斜度
			textStyle: {
				color: '#b1bcff', //更改坐标轴文字颜色
				fontSize: 15,//更改坐标轴文字大小
				//align: 'center' //坐标轴文字位置
			},
			interval: 0,  
				 formatter:function(value)  
				 {  
					 var ret = "";//拼接加\n返回的类目项  
					 var maxLength = 5;//每项显示文字个数  
					 var valLength = value.length;//X轴类目项的文字个数  
					 var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
					 if (rowN > 1)//如果类目项的文字大于3,  
					 {  
						 for (var i = 0; i < rowN; i++) {  
							 var temp = "";//每次截取的字符串  
							 var start = i * maxLength;//开始截取的位置  
							 var end = start + maxLength;//结束截取的位置  
							 //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
							 temp = value.substring(start, end) + "\n";  
							 ret += temp; //凭借最终的字符串  
						 }  
						 return ret;  
					 }  
					 else {  
						 return value;  
					 }  
				 } 
		},
		data: ['取消票申请', '撤销网点', '银行卡变更', '异常票申请', '信息变更', '撤销终端','新增终端','终端停机']
	},