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'); }
相关文章推荐
- Java导出Excel设置大数据不被科学计数法显示、自定义日期格式
- Flex柱状图(包含线性图)自定义显示tooltip
- springMVC高级部分(数据校验,数据错误回显(自定义格式错误显示),拦截器,异常处理,文件上传,文件下载,springmvc运行流程以及springmvc和struts2对比)
- JSP页面显示 Date 和 Double数据类型类时自定义显示格式
- echarts柱状图、折线图求合,通过formatter回调函数自定义tooltip展示格式
- Echars柱状图异步加载数据以及X轴纵向显示实例
- 一步一步学android之控件篇——ListView自定义显示数据格式
- WPF 在页面中按照自定义格式显示DateTime数据
- 把数据库里的数据用Excel文件的格式显示在浏览器中
- 《Ext详解与实践》节选:自定义单元格的显示格式
- 如何在GridView将数字显示成金额格式或自定义格式?
- 《Ext详解与实践》节选:自定义单元格的显示格式
- 如何把从数据库读出来的数据以excel格式显示到网页?
- C#中使用GDI+实现饼状图和柱状图跟数据库联接显示数据的方法
- winform中将数据以文本的格式导出到excel中(以文本导出表示如果数据为0001则在excel中也显示为0001,而不被excel自动转换为1)
- 《Ext详解与实践》节选:自定义单元格的显示格式
- 《Ext详解与实践》节选:自定义单元格的显示格式
- GRIDVIEW绑定数据,显示“我是···”格式
- 来自MSDN的一个Sample:如何自定义 Windows 窗体 DataGridView 控件中的数据格式设置
- DataGrid中数据显示格式