您的位置:首页 > 其它

echars 自定义tooltip中显示格式和柱状图上(series)数据显示格式

2017-04-20 10:26 393 查看
function histPicAmountTop10(data) {
var myChart = echarts.init($("#histPic_AmountTop10")[0], 'macarons');
var yAsis_data = data.productList;
var legend_data = [ '' ];
var original_values_1 = data.amountList;
/*var original_values_1 = [ 1382176644.7, 1398996797.4, 1539511460.9,
1572076456.4, 1956910717.5, 2168072844.8, 2241938007.9,
2585285149.7, 3795310450, 5754743584.7 ];*/
var colors_1 = [ '#7030a0', '#002060', '#0070c0', '#00b0f0', '#f79646',
'#4bacc6', '#8064a2', '#9bbb59', '#c0504d', '#4f81bd' ];

var sum = 0 ; //Top10金额的总和
var amoList = [] ;    //Top10金额的占比
var amoListPers = [] ;//Top10金额的占比(%)
for (var i = 0; i < original_values_1.length; i++) {
sum  += parse
4000
Float(original_values_1[i]);
}
//计算Top10金额的占比
for (var i = 0; i < original_values_1.length; i++) {
var the_value = parseFloat(original_values_1[i]) / sum ;
amoList.push(the_value);
}
//计算Top10金额的占比保留两位小数
for (var i = 0; i < original_values_1.length; i++) {
the_value = toDecimal2(amoList[i] * 100) ;
amoListPers.push(the_value);
}
//alert(amoListPers);

//将Top金额保留4位小数(这里计算主要是为了给提示款和柱状上的金额赋值)
var values_2 = [];
if(original_values_1 == ''){
values_2.push('');
}else{
for (var i = 0; i < original_values_1.length; i++) {
the_value = toDecimal4(original_values_1[i] / 100000000);
values_2.push(the_value);
}
}

//将Top颜色、金额、金额占比都赋值到values_1对象中
var values_1 = [];
if(values_2 == ''){
values_1.push('');
}else{
for (var i = 0; i < values_2.length; i++) {
values_1.push({
value : values_2[i],
amoListPers : amoListPers[i],
values_2 : values_2[i],
itemStyle : {
normal : {
color : colors_1[i]
}
}
});
}
}

//数据视图里面的数据
var data_view = [];
if(original_values_1 == ''){
data_view.push('');
}else{
for (var i = 0; i < original_values_1.length; i++) {
the_value = toDecimal4(original_values_1[i] / 100000000);
//the_value = (Math.round(original_values_1[i] / 100000000*10000) / 10000);
data_view.push(the_value);
}
}

// 指定图表的配置项和数据
option = {
title : {
text : '贷款金额TOP10产品',
left : 'center',
textStyle : {
color :'#008ACD',
fontWeight :'lighter'
}
},
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
//formatter : '{b}: {c0}亿元 ({c1}%)'
//自定义弹框中数据的显示格式
formatter: function (params) {
var res =  params[0].name;
res +=': ' + params[0].data.values_2 + '亿元' + '('+params[0].data.amoListPers+'%'+')';
return res;
}
},
toolbox : {
show : true,
orient : 'vertical',
left : 'right',
top : 'center',
feature : {
dataView : {
show : true,
title : '数据视图',
readOnly: true,
lang : ['数据视图', '关闭', '刷新'],
optionToContent: function(opt) {
var table = '<div style="display: block; color: rgb(0, 0, 0); width: 100%; overflow: hidden; height: 320px; border-style:solid;border-width:1.6px ;border-color: rgb(51, 51, 51);"'
+'><table><tbody><tr>'
+ '<td  style="width:350px" > Top10产品</td>'
+ '<td  style="width:180px">金额(亿元)  </td>'
+ '<td>占比(%)  </td>';

for (var i = 0, l = yAsis_data.length-1; i <= l; l--) {
table += '<tr>'
+ '<td>' + yAsis_data[l] + '</td>'
+ '<td>' + data_view[l] +'</td>'
+ '<td>' + amoListPers[l] +'</td>'
+ '</tr>';
}
table += '</tbody></table></div>';
return table;
}
},
saveAsImage : {}
}
},
legend : {
left : 'center',
bottom : 'bottom',
data : legend_data
},
grid : {
left : '28%',
right :'12%'
},
xAxis : [ {
name : '金额(亿元)',
type : 'value',
splitLine : {
show : false
}
} ],
yAxis : [ {
type : 'category',
//name : '产品名称',
splitLine : {
show : false
},
data : yAsis_data
} ],
series : [ {
name : legend_data[0],
type : 'bar',
barWidth : 18,

label : {
normal : {
show : true,
//formatter : '{b}: {c0}亿元 ',
//自定义柱子上的数据显示格式
formatter: function (params) {
var res ;
res = params.data.values_2 + '亿元' + '('+params.data.amoListPers+'%'+')';
return res;
},
position : 'right'
}
},
data : values_1
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//获得echars图的URL 用于下载
toImgURL[7] ='hhh08'+ myChart.getDataURL('png');
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐