<?xml version="1.0" encoding="UTF-8"?> <!-- $Author: Calvin $Date: 2018年03月23日15:38:09 $Revision: 1.0 $Purpose: Echarts报表 --> <a:screen xmlns:s="leaf.plugin.script" xmlns:a="http://www.leaf-framework.org/application"> <a:view> <div id="main" style="width: 1300px;height:630px;"/> <script src="${/request/@context_path}/javascripts/echarts-all.js" type="text/javascript"/> <script type="text/javascript"><![CDATA[ Leaf.onReady(function() { // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main'), 'dark'); var myChart2 = echarts.init(document.getElementById('main2'), 'macarons'); // 过渡--------------------- myChart.showLoading({ text: '正在努力的读取数据中...' }); var data_rpt112 = []; var province_data = []; var sum_amount_data = []; var sum_count_data = []; var data_n = []; var param = {}; var param_province = {}; var param_sum_amount = {}; var param_sum_count = {}; var records = $('contract_result_map_ds').getAll(); for (var i = 0;i < records.length;i++) { param = { 'name': records[i].get('province_id_n'), 'value': records[i].get('sum_amount') }; param_province = { 'value': records[i].get('province_id_n') }; param_sum_amount = { 'value': records[i].get('sum_amount') }; param_sum_count = { 'value': records[i].get('sum_count') }; data_rpt112.push(param); province_data.push(param_province); sum_amount_data.push(param_sum_amount); sum_count_data.push(param_sum_count); if (records[i].get('province_id_n') == '北京' || records[i].get('province_id_n') == '上海' || records[i].get('province_id_n') == '广东') { data_n.push(param); } } option = { title: { text: '资产所在区域情况分布图(万元)', subtext: '数据来自融资租赁系统' }, tooltip: { trigger: 'item' }, legend: { x: 'right', selectedMode: true, data: ['北京', '上海', '广东'] }, dataRange: { orient: 'horizontal', min: 0, max: 55000, text: ['高', '低'], // 文本,默认为数值文本 splitNumber: 0, calculable: true }, toolbox: { show: true, orient: 'vertical', x: 'right', y: 'center', feature: { mark: { show: true }, restore: { show: true }, dataView: { show: true, readOnly: false } } }, series: [{ name: '资产所在区域情况分布图', type: 'map', mapType: 'china', mapLocation: { x: 'left' }, selectedMode: 'multiple', itemStyle: { normal: { label: { show: true } }, emphasis: { label: { show: true } } }, data: data_rpt112 }, { name: '资产所在区域情况分布图', type: 'pie', roseType: 'area', tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, center: [document.getElementById('main').offsetWidth - 250, 225], radius: [30, 120], data: data_n }], animation: true }; option2 = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, legend: { data: ['融资额', '合同数量'] }, xAxis: [{ type: 'category', data: province_data, axisPointer: { type: 'shadow' } }], yAxis: [{ type: 'value', name: '金额(万元)', min: 0, max: 100000, interval: 5000, axisLabel: { formatter: '{value} 万元' } }, { type: 'value', name: '数量', min: 0, max: 100, interval: 2, axisLabel: { formatter: '{value} 个' } }], calculable: true, series: [{ name: '融资额', type: 'bar', data: sum_amount_data }, { name: '合同数量', type: 'line', yAxisIndex: 1, data: sum_count_data }] }; myChart.on('mapSelected', function(param) { var selected = param.selected; var mapSeries = option.series[0]; var data = []; var legendData = []; var name; for (var p = 0, len = mapSeries.data.length;p < len;p++) { name = mapSeries.data[p].name; // mapSeries.data[p].selected = selected[name]; if (selected[name]) { data.push({ name: name, value: mapSeries.data[p].value }); legendData.push(name); } } option.legend.data = legendData; option.series[1].data = data; myChart.setOption(option, true); }); myChart.hideLoading(); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); myChart2.setOption(option2); }); function queryFunction() { $('prj_segment_result_ds').query($('prj_segment_result_ds').currentPage); } function renderer1() { return this.percentage.toFixed(2) + ' %'; } function renderer2() { var name = this.point.name; var tonum = this.percentage.toFixed(2); return '<b>' + this.point.name + '</b>:' + this.percentage.toFixed(2) + ' %'; } function toThousands(num) { var result = [], counter = 0; num = (num || 0).toString().split(''); for (var i = num.length - 1;i >= 0;i--) { counter++; result.unshift(num[i]); if (!(counter % 3) && i != 0) { result.unshift(','); } } return result.join(''); } function count(records, name) { if (name == 'ratio') { return "<b>100%</b>"; } else { var sum = 0; for (var i = 0;i < records.length;i++) { sum += Number(records[i].get(name)); } return '<b>' + toThousands(Number(sum).toFixed(2)) + '</b>'; } } function sumTitle() { return "<b>总计</b>"; } function toBlod(value, record, name) { return "<b>" + value + "</b>"; } function formatNumber(value, record, name) { if (value == 0) { return ''; } return Number(value).toFixed(2); } function formatter1() { return (this.value) + '万元'; } ]]></script> <a:dataSets> <a:dataSet id="contract_result_map_ds" autoQuery="true" fetchAll="true" loadData="true" model="rpt.RPT1060.con_contract_map_query"> <a:fields> <a:field name="province_id_n" prompt="地区"/> <a:field name="sum_amount" datatype="double" prompt="融资额(万元)" type="column"/> <a:field name="sum_count" prompt="合同数量" type="line"/> </a:fields> </a:dataSet> </a:dataSets> <a:hBox> <div id="main2" style="width: 800px;height:500px;"/> <a:table bindTarget="contract_result_map_ds" width="500"> <a:toolBar> <a:button type="excel"/> </a:toolBar> <a:columns> <a:column name="province_id_n" footerRenderer="sumTitle" renderer="toBlod"/> <a:column name="sum_amount" align="right" footerRenderer="count" renderer="Leaf.formatMoney"/> <a:column name="sum_count" align="right" footerRenderer="count"/> </a:columns> </a:table> </a:hBox> </a:view> </a:screen>