在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