eaharts中的柱形图的数据格式统一的做法

在echarts中如果柱状图的显示的数字不一致时,就是要美观好看,就这样去做
在这里插入图片描述

在这里插入图片描述
获取的价格分为两种格式,一种获取的时候就带有"."小数点2位,一种是直接整数的形式展示,但是也要就是千位符的截取,上面讲解的是带有小数点的,下面是没有小数点的。

var options5 = {
						title: {
				            text: '中标价格区间偏好分析',
				            x : 'center',
				           // textAlign:'center',
// 				            padding: [
// 			                     10,  // 上
// 			                     0, // 右
// 			                     0,  // 下
// 			                     300, // 左
// 			                ],
			                textStyle: {
			               		color: '#000000'
			               	},
				        },
				        toolbox: {
					        show : true,
					        x:'850',//下载的字体显示不全
					        feature : {
					            dataView : {show: false, readOnly: false},
					            magicType : {show: true, type: ['line', 'bar']},
					           // restore : {show: true},
					            saveAsImage : {show: true}
					        }
					    },
						tooltip : {
							trigger : 'axis',
							axisPointer : { // 坐标轴指示器,坐标轴触发有效
								type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
							}
						},
						/* legend : {
							data : [ '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎' ]
						}, */
						grid : {
							left : '1%',
							right : '10%',
							bottom : '3%',
							containLabel : true
						},
						xAxis : {
							type : 'category',
							//x:'450',
							name : '单位:万元',
							data : [ '' ],
							axisLine:{
		                        lineStyle:{
		                            color:'#AE5DA0',
		                            width:1,//这里是为了突出显示加上的
		                        }
		                    }
						},
						yAxis : {
							type : 'value',
							name : '单位:次',
							splitLine: {
							    lineStyle: {
							        // 使用深浅的间隔色
							        color: ['#AE5DA0']
							    }
							},
							nameTextStyle: {
								color: ['#AE5DA0']
								},
							axisLine:{
		                        lineStyle:{
		                            color:'#AE5DA0',
		                            width:1,//这里是为了突出显示加上的
		                        }
		                    }
 
 
 
							
						},
						series : [ {
								name : '中标次数',
								type : 'bar',
								stack : '总量',
								label : {
									normal : {
										show : true,
										position: 'top',
										 formatter:function(a,b,c){
												var result = [ ], counter = 0;
												var num_array = a.data.toFixed(2).split('.');
												var num = num_array[0];
												var newstr = '';
											    for (var i = num.length - 1; i >= 0; i--) {
											        counter++;
											        result.unshift(num[i]);
											        if (!(counter % 3) && i != 0) { result.unshift(','); }
											    }
											    return result.join('');
											    if(num_array.length>1){
											    	newstr = result.join('');
											    	newstr += '.'+num_array[1];
											    	return newstr;
											    }else{
											     	return result.join('');
											    }
										  	}, 
									}
								},
								data : [ '' ],
								color:['#AE5DA0'],
								itemStyle: {
									normal: {
									barBorderRadius: 5,
									}
								},
								barWidth: 30
							}
						]
					};

注:关键点在var num_array = a.data.toFixed(2).split(’.’);上,其中
a.data.toFixed(2)是给数据加上小数点并给数据添加小数点后两位数。

————————————————
版权声明:本文为CSDN博主「开着拖拉机的梦想家」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/wu920604/article/details/53410706

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值