<?xml version="1.0" encoding="UTF-8"?> <!-- $Author: $Date: 2018/8/2 $Revision: 1.0 微件-资产统计-租赁性质 --> <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 { width: 840px; height: 264px; margin: 0; padding: 0; color: #000; } .widget_asset_count { box-sizing: border-box; width: 840px; height: 264px; padding: 0; background-color: #fff; position: relative; border: 1px solid #F0F0F3; cursor: default; } .widget_asset_count .widget_label { position: absolute; width: 40px; height: 4px; top: 0; left: 16px; background-color: #5A7FFF; } .widget_asset_count .row1 { position: relative; padding: 16px 0 8px 16px; font-family: PingFangSC-Medium; font-size: 14px; color: rgba(75, 80, 90, 0.85); letter-spacing: 0; border-bottom: 1px solid #F0F0F3; } .widget_asset_count .row2 { box-sizing: border-box; height: 218px; } .widget_asset_count .row2 .left { float: left; } .widget_asset_count .row2 .right { float: left; padding-top: 48px; width: 594px; } .widget_asset_count .row2 .right .title { height: 42px; line-height: 42px; border-bottom: 1px solid #D8D8D8; font-family: PingFangSC-Regular; font-size: 17px; color: rgba(0, 0, 0, 0.45); } .widget_asset_count .row2 .right .title span { margin-right: 60px; } .widget_asset_count .row2 .right .bodyList { margin-top: 40px; } .widget_asset_count .row2 .right .bodyList .li { font-family: PingFangSC-Regular; font-size: 17px; color: rgba(0, 0, 0, 0.45); height: 24px; line-height: 24px; } .widget_asset_count .row2 .right .bodyList .li i { display: inline-block; width: 8px; height: 8px; border-radius: 4px; margin-right: 15px; } .widget_asset_count .row2 .right .bodyList .li span { margin-right: 30px; } .widget_asset_count .row2 .right .bodyList .li span:last-child { margin-right: 40px; } .widget_asset_count .row2 .clearFloat { clear: both; height: 0; line-height: 0; font-size: 0 } </style> <script><![CDATA[ jQuery(document).ready(function () { var chartData = [{ item: '融资租赁', per: 78 }, { item: '经营租赁', per: 22 }]; // 关闭 G2 的体验改进计划打点请求 G2.track(false); var widget_asset_count_chart = new G2.Chart({ container: 'widget_asset_count_chart', width: 206, height: 218, animate: false, padding: 10 }); widget_asset_count_chart.source(chartData); widget_asset_count_chart.coord('theta', { radius: 0.75, innerRadius: 0.72 }); widget_asset_count_chart.tooltip({ showTitle: false, itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>' }); widget_asset_count_chart.guide().html({ position: ['50%', '50%'], html: '<div style="font-size: 14px;color: rgba(75,80,90,0.85);text-align:center;width: 10em;"><p>融资租赁</p><p>' + chartData[0]['per'] + '</p></div>', alignX: 'middle', alignY: 'middle' }); widget_asset_count_chart.legend(false); var interval = widget_asset_count_chart.intervalStack() .position('per') .color('item', ['#5A7FFF', '#FF8665']) .tooltip('item*per', function (item, per) { return { name: item, value: per }; }).style({ lineWidth: 1, stroke: '#fff' }); widget_asset_count_chart.render(); }); ]]></script> <a:dataSets> <a:dataSet id="con_asset_count_ds" autoQuery="true" pageSize="5" model="ast.AST511.con_asset_count"> <a:fields> <a:field name="contract_number"/> </a:fields> </a:dataSet> </a:dataSets> <div class="widget_asset_count"> <span class="widget_label"> </span> <div class="row1">资产统计</div> <div class="row2"> <div class="left" id="widget_asset_count_chart"></div> <div class="right"> <div class="title"> <span>租赁性质</span> <span>占比</span> <span>币种</span> </div> <div class="bodyList"> <span class="li"> <i style="background: #7292FF"/> <span>融资租赁</span> <span>99.90%</span> <span>人民币</span> </span> <span class="li"> <i style="background: #FF8665;"/> <span>经营租赁</span> <span>0.01%</span> <span>人民币</span> </span> </div> </div> <div class="clearFloat"></div> </div> </div> <a:screenBody style="display:none"></a:screenBody> </a:view> </a:screen>