<?xml version="1.0" encoding="UTF-8"?> <!-- $Date: 2018/9/4 微件-客户数量统计 WIDGET-BP-COUNT --> <a:screen xmlns:a="http://www.leaf-framework.org/application"> <a:init-procedure/> <a:view template="default" package="leaf.ui.std"> <!--单独微件测试用--> <!--<script src="${/request/@context_path}/leafresource/js/attach/g2.min.js"></script>--> <style> html,body{ background-color:#eee; width:264px; height:264px; margin: 0; padding: 0; } .widget_bp_count{ box-sizing:border-box; width:264px; height:264px; background-color:#fff; position:relative; border:1px solid #F0F0F3; cursor:default; } .widget_bp_count .widget_label{ position:absolute; width:40px; height:4px; top:0; left:16px; background-color: #FFD95B; } .widget_bp_count .row1{ position:relative; height:22px; padding:16px 13px 8px 16px; border-bottom:1px solid #F0F0F3; } .widget_bp_count .row1 .left{ line-height:22px; font-family: PingFangSC-Medium; font-size: 14px; color: rgba(75,80,90,0.85); } .widget_bp_count .row1 .right{ position:absolute; right:13px; bottom:8px; font-family: PingFangSC-Regular; font-size: 12px; color: rgba(75,80,90,0.75); } .widget_bp_count .row1 .right #this_month_new{ margin-left:5px; font-family: Baskerville-SemiBoldItalic; font-size: 12px; color: #4866CC; } .widget_bp_count .row2{ height:20px; margin:8px auto; text-align:center; font-family: PingFangSC-Regular; font-size: 14px; color: rgba(75,80,90,0.75); } .widget_bp_count .row2 #total_bp_amount{ font-family: Baskerville-SemiBoldItalic; font-size: 14px; color: #FFC200; margin-left:5px; } .widget_bp_count .row3 .g-guide .center_label{ text-align:center; width:10em; } .widget_bp_count .row3 .g-guide .center_label .type{ font-family: PingFangSC-Regular; font-size: 13.87px; color: rgba(75,80,90,0.85); line-height: 21.67px; margin:0; } .widget_bp_count .row3 .g-guide .center_label .count{ font-family: PingFangSC-Regular; font-size: 16.25px; color: #4B505A; line-height: 17.31px; margin:0; } </style> <script><![CDATA[ function on_bp_type_count_ds_load(ds){ var records=ds.data; var chartData=[]; if(records!==null && records.length>0){ records.forEach(function(i){ chartData.push(i.data); }); } // 关闭 G2 的体验改进计划打点请求 G2.track(false); var bp_type_count_chart = new G2.Chart({ container: 'bp_type_count_chart', width: 262, height: 180, animate: false, padding: 5 }); bp_type_count_chart.source(chartData); bp_type_count_chart.coord('theta', { radius: 0.75, innerRadius: 0.74 }); bp_type_count_chart.tooltip({ showTitle: false, itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>' }); bp_type_count_chart.guide().html({ position: ['50%', '50%'], html: '<div class="center_label"><p class="type">' + chartData[0].type + '</p><p class="count">' + chartData[0].count + '</p></div>' }); bp_type_count_chart.legend(false); var interval = bp_type_count_chart.intervalStack() .position('count') .color('type', ['#00D093', '#5A7FFF','#A5BAFF',' #AFB6BC',' #5B637B','#FFC200']) .tooltip('type*count', function (type, count) { return { name: type, value: count }; }).style({ lineWidth: 1, stroke: '#fff' }); bp_type_count_chart.render(); interval.setSelected(chartData[0]); bp_type_count_chart.on('interval:click', function(ev){ var curData = ev.data._origin; jQuery(".widget_bp_count .center_label .type").text(curData.type); jQuery(".widget_bp_count .center_label .count").text(curData.count); }); }; function on_bp_total_count_ds_load(ds){ var this_month_total = ds.data[0].data["this_month_total"] || 0; jQuery(".widget_bp_count #this_month_new").text(this_month_total); var total_bp_amount = ds.data[0].data["total"] || 0; jQuery(".widget_bp_count #total_bp_amount").text(total_bp_amount); } ]]></script> <a:dataSets> <a:dataSet id="bp_category_count_ds" autoQuery="true" fetchAll="true" model="bp.bp_type_count"> <a:fields> <a:field name="type"/> <a:field name="count"/> </a:fields> <a:events> <a:event name="load" handler="on_bp_type_count_ds_load"/> </a:events> </a:dataSet> <a:dataSet id="bp_total_count_ds" autoQuery="true" fetchAll="true" model="bp.bp_total_count"> <a:fields> <a:field name="total"/> <a:field name="this_month_total"/> </a:fields> <a:events> <a:event name="load" handler="on_bp_total_count_ds_load"/> </a:events> </a:dataSet> </a:dataSets> <div class="widget_bp_count"> <span class="widget_label"> </span> <div class="row1"> <span class="left">客户数量统计</span> <span class="right"> <span>本月新增客户:</span> <span id="this_month_new"></span> </span> </div> <div class="row2"> <span>客户总数:</span> <span id="total_bp_amount"></span> </div> <div class="row3" id="bp_type_count_chart"> </div> </div> <a:screenBody style="display:none"> </a:screenBody> </a:view> </a:screen>