<?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>