|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
|
|
<head>
|
|
|
<meta charset="utf-8" />
|
|
|
<title></title>
|
|
|
<link rel="stylesheet" href="../Content/css/bootstrap.min.css" />
|
|
|
<link rel="stylesheet" href="../Content/css/bootstrap-table.min.css" />
|
|
|
<link href="../Content/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
|
|
|
<link rel="stylesheet" type="text/css" href="../Content/css/radiocss/build.css">
|
|
|
|
|
|
<script src="../Content/js/jquery-3.3.1.min.js"></script>
|
|
|
<script src="../Content/js/bootstrap.min.js"></script>
|
|
|
<script src="../Content/js/bootstrap-table.min.js"></script>
|
|
|
<script type="text/javascript" src="../Content/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
|
|
|
<script type="text/javascript" src="../Content/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
|
|
|
<script src="../Content/js/echarts.min.js"></script>
|
|
|
<style>
|
|
|
|
|
|
body, html {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
font-family: "Microsoft YaHei";
|
|
|
overflow: hidden;
|
|
|
background-color: #F8F8F8;
|
|
|
}
|
|
|
|
|
|
hr {
|
|
|
margin: 0;
|
|
|
height: 1px;
|
|
|
background: rgba(211,211,211,1);
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*标题栏*/
|
|
|
.c_Title {
|
|
|
width: 100%;
|
|
|
height: 40px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.c_Title .c_Title_text {
|
|
|
font-size: 20px;
|
|
|
font-weight: 400;
|
|
|
line-height: 40px;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 查询块 */
|
|
|
.c_ActionBar {
|
|
|
color: #444444;
|
|
|
font-size: 16px;
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
.c_ActionBar .c_ActionBar_row {
|
|
|
height: 40px;
|
|
|
padding: 10px;
|
|
|
float: left;
|
|
|
}
|
|
|
|
|
|
.c_ActionBar .c_query_btn {
|
|
|
background-color: #00C7BA;
|
|
|
color: #FFFFFF;
|
|
|
font-size: 15px;
|
|
|
width: 90px;
|
|
|
}
|
|
|
|
|
|
.c_ActionBar label {
|
|
|
font-weight: 400;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/*主内容*/
|
|
|
.c_Main {
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
padding: 8px;
|
|
|
padding-bottom: 190px;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* table块 */
|
|
|
.c_div_left {
|
|
|
max-height: 95%;
|
|
|
width: 50%;
|
|
|
float: left;
|
|
|
border-radius: 5px;
|
|
|
border: solid 1px #D3D3D3;
|
|
|
}
|
|
|
|
|
|
.c_div_left table {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.c_div_left .c_total {
|
|
|
width: 100%;
|
|
|
height: 40px;
|
|
|
}
|
|
|
/*图形报表块*/
|
|
|
.c_div_right {
|
|
|
height: 100%;
|
|
|
width: 50%;
|
|
|
overflow: hidden;
|
|
|
float: right;
|
|
|
}
|
|
|
|
|
|
.datespecitem {
|
|
|
background-color: #F8F8F8;
|
|
|
border:1px solid #D0D0D0;
|
|
|
}
|
|
|
.thisactive {
|
|
|
color: #FFFFFF;
|
|
|
background-color: #00C7BA;
|
|
|
border-color: #00C7BA;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body oncontextmenu="return false;" onselectstart="return false;">
|
|
|
|
|
|
<!--标头-->
|
|
|
<div class="c_Title">
|
|
|
<label class="c_Title_text ">收银汇总</label>
|
|
|
<img class="Close" src="../images/Report/X@2x.png" height="15" width="15" style="float:right; margin:13px 20px 0 0;" />
|
|
|
</div>
|
|
|
<hr />
|
|
|
|
|
|
|
|
|
<!--操作栏-->
|
|
|
<div class="navbar c_ActionBar">
|
|
|
<div class="navbar-form">
|
|
|
<label style="margin-right:10px;">起止日期 :</label>
|
|
|
<div class="input-group date form_datetime" style="width:210px; border-radius:6px;" data-date="1979-09-16 05:25" data-date-format="yyyy-MM-dd HH:mm" timezone="GMT+8" data-link-field="startdate">
|
|
|
<input class="form-control startdate " size="16" style="background-color:#E7EAF1;border:0; " type="text" value="" readonly>
|
|
|
<span class="input-group-addon" style="background-color:#E7EAF1; border:0;"><span class="glyphicon glyphicon-calendar"></span></span>
|
|
|
</div>
|
|
|
<input type="hidden" id="startdate" value="" />
|
|
|
<div class="input-group date form_datetime" style="width:210px;" data-date="1979-09-16 05:25" data-date-format="yyyy-MM-dd HH:mm" data-link-field="enddate">
|
|
|
<input class="form-control enddate" type="text" style="background-color:#E7EAF1; border:0;" size="16" value="" readonly>
|
|
|
<span class="input-group-addon" style="background-color:#E7EAF1; border:0;">
|
|
|
<span class="glyphicon glyphicon-calendar"></span>
|
|
|
</span>
|
|
|
</div>
|
|
|
<input type="hidden" id="enddate" value="" />
|
|
|
<input class="form-control textworkerNo" type="text" placeholder="收银员编号" />
|
|
|
<a class="btn btn-group c_query_btn Query" style="font-size:16px;">查询</a>
|
|
|
</div>
|
|
|
<hr />
|
|
|
<div class="navbar-form" style="margin-left:10px;">
|
|
|
<button type="button" style="font-size:16px;" class="btn btn-group datespecitem">今天</button>
|
|
|
<button type="button" style="font-size:16px;" class="btn btn-group datespecitem">昨天</button>
|
|
|
<button type="button" style="font-size:16px;" class="btn btn-group datespecitem">前一天</button>
|
|
|
<button type="button" style="font-size:16px;" class="btn btn-group datespecitem">本周</button>
|
|
|
<button type="button" style="font-size:16px;" class="btn btn-group datespecitem">上周</button>
|
|
|
<button type="button" style="font-size:16px;" class="btn btn-group datespecitem">本月</button>
|
|
|
<button type="button" style="font-size:16px;" class="btn btn-group datespecitem">上月</button>
|
|
|
|
|
|
<label style="margin-left:90px;">是否实收：</label>
|
|
|
<div class="radio radio-success radioIncomeFlag" name="全部">
|
|
|
<input id="IncomeFlag1" type="radio" name="IncomeFlag" value="全部" checked="checked" /><label for="IncomeFlag1" class="c_IncomeFlag">全部</label>
|
|
|
</div>
|
|
|
<div class="radio radio-success radioIncomeFlag" name="实收">
|
|
|
<input id="IncomeFlag2" type="radio" name="IncomeFlag" value="实收" /><label for="IncomeFlag2" class="c_IncomeFlag">实收</label>
|
|
|
</div>
|
|
|
<div class="radio radio-success radioIncomeFlag" name="虚收">
|
|
|
<input id="IncomeFlag3" name="IncomeFlag" type="radio" value="虚收" /><label for="IncomeFlag3" class="c_IncomeFlag">虚收</label>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<hr />
|
|
|
<div class="navbar-form ">
|
|
|
<label style="margin-right:10px;">营业模式 :</label>
|
|
|
<div class="radio radio-success radioordertype" name="全部">
|
|
|
<input id="1" type="radio" name="ordertype" value="全部" checked="checked" /><label for="1" class="c_ordertype_text">全部</label>
|
|
|
</div>
|
|
|
<div class="radio radio-success radioordertype" name="堂食">
|
|
|
<input id="2" name="ordertype" type="radio" value="堂食" /><label for="2" class="c_ordertype_text">堂食</label>
|
|
|
</div>
|
|
|
<div class="radio radio-success radioordertype" name="外带">
|
|
|
<input id="3" name="ordertype" type="radio" value="外带" /><label for="3" class="c_ordertype_text">外带</label>
|
|
|
</div>
|
|
|
<div class="radio radio-success radioordertype" name="电话外卖">
|
|
|
<input id="4" name="ordertype" type="radio" value="电话外卖" /><label for="4" class="c_ordertype_text">电话外卖</label>
|
|
|
</div>
|
|
|
<div class="radio radio-success radioordertype" name="美团外卖">
|
|
|
<input id="5" name="ordertype" type="radio" value="美团外卖" /><label for="5" class="c_ordertype_text">美团外卖</label>
|
|
|
</div>
|
|
|
<div class="radio radio-success radioordertype" name="饿了么">
|
|
|
<input id="6" name="ordertype" type="radio" value="饿了么" /><label for="6" class="c_ordertype_text">饿了么</label>
|
|
|
</div>
|
|
|
<div class="radio radio-success radioordertype" name="百度外卖">
|
|
|
<input id="7" name="ordertype" type="radio" value="百度外卖" /><label for="7" class="c_ordertype_text">百度外卖</label>
|
|
|
</div>
|
|
|
<div class="radio radio-success radioordertype" name="微信点餐">
|
|
|
<input id="8" name="ordertype" type="radio" value="微信点餐" /><label for="8" class="c_ordertype_text">微信点餐</label>
|
|
|
</div>
|
|
|
<a class="btn btn-group navbar-right c_repairprint_btn" style="background-color:#10AFE3;color:rgb(255, 255, 255);width:90px; margin-left:5px;margin-right:5px; font-size:16px;">打印</a>
|
|
|
</div>
|
|
|
<hr />
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="c_Main">
|
|
|
<div class="c_div_left">
|
|
|
<table id="paygroup" data-response-handler="responseHandler" class="table list-table">
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th data-align="center" data-formatter="rowIndexFormat">行</th>
|
|
|
<th data-align="center" data-field="payTypeNo">支付方式编号</th>
|
|
|
<th data-field="payTypeName" data-align="center">支付方式</th>
|
|
|
<th data-field="paidAmount" data-align="center" data-formatter="Intformatting">实付金额</th>
|
|
|
<th data-field="changeAmount" data-align="center" data-formatter="Intformatting">找零金额</th>
|
|
|
<th data-field="overAmount" data-align="center" data-formatter="Intformatting">溢收金额</th>
|
|
|
<th data-field="incomeFlag" data-align="center" data-formatter="IncomeFlag" width="75">是否实收</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
</table>
|
|
|
|
|
|
<div class="c_total" style="padding:5px; border-top: 1px solid #D0D0D0; line-height: 2;">
|
|
|
<div style="margin-left:5px;height:100%; width:50px; float:left; font-weight:600;">合计：</div>
|
|
|
<div style="margin-left:46%;height:100%;width:10%;float:left; color:#FD7281" class="totalpaidAmount">0.00</div>
|
|
|
<div style="margin-left:3.5%;height:100%; width:10%;float:left; color:#FD7281" class="totalchangeAmount">0.00</div>
|
|
|
<div style="margin-left:3.5%;height:100%; width:10%;float:left; color:#FD7281" class="totaloverAmount">0.00</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="c_div_right">
|
|
|
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
|
|
<div id="strokecount" style="height:50%; width:100%;"></div>
|
|
|
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
|
|
<div id="totalmoney" style="height:50%; width:100%;"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
function Init(data) {
|
|
|
try {
|
|
|
var _tabledata = [];//table数据
|
|
|
|
|
|
var _strokecount = [];//饼状报表数据
|
|
|
var _totalmoney = [];//饼状报表数据
|
|
|
var _paytype = []; //饼状报表数据
|
|
|
var _Stroke = 0;
|
|
|
var _Money = 0;
|
|
|
var _totalpaidAmount = 0.00;
|
|
|
var _totalchangeAmount = 0.00;
|
|
|
var _totaloverAmount = 0.00;
|
|
|
var _data = eval(data);
|
|
|
for (var i = 0; i < _data.length; i++) {
|
|
|
if (_data[i].payTypeNo == '合计') {
|
|
|
continue;
|
|
|
}
|
|
|
//实收金额合计
|
|
|
_totalpaidAmount += parseInt(_data[i].paidAmount);
|
|
|
//溢收金额合计
|
|
|
_totaloverAmount += parseInt(_data[i].overAmount);
|
|
|
//找零金额合计
|
|
|
_totalchangeAmount += parseInt(_data[i].changeAmount);
|
|
|
|
|
|
_tabledata[_tabledata.length] = _data[i];
|
|
|
_Stroke += parseInt(_data[i].payCount);
|
|
|
_Money += parseInt(_data[i].paidAmount)
|
|
|
_strokecount[_strokecount.length] = { value: _data[i].payCount, name: _data[i].payTypeName };
|
|
|
_totalmoney[_totalmoney.length] = { value: _data[i].paidAmount, name: _data[i].payTypeName };
|
|
|
_paytype[_paytype.length] = { name: _data[i].payTypeName };
|
|
|
}
|
|
|
|
|
|
$('.totalpaidAmount').html("¥" + _totalpaidAmount.toFixed(2));
|
|
|
$('.totalchangeAmount').html("¥" + _totalchangeAmount.toFixed(2));
|
|
|
$('.totaloverAmount').html("¥" + _totalchangeAmount.toFixed(2));
|
|
|
|
|
|
StrokeCount(_strokecount, _paytype, _Stroke);
|
|
|
TotalMoney(_totalmoney, _paytype, _Money);
|
|
|
|
|
|
$('#paygroup').bootstrapTable("destroy");
|
|
|
var boottable = $('#paygroup');
|
|
|
//初始化 bootstrap-table
|
|
|
//=========================
|
|
|
boottable.bootstrapTable({
|
|
|
data: eval(_tabledata),
|
|
|
sidePagination: 'client',
|
|
|
pagination: false,
|
|
|
//clickToSelect: true,
|
|
|
//singleSelect: true,
|
|
|
// rowStyle: rowStyle,//通过自定义函数设置行样式
|
|
|
onClickRow: function (_data, rows, index) {
|
|
|
//选择行
|
|
|
},
|
|
|
formatNoMatches: function () {
|
|
|
return "";
|
|
|
}
|
|
|
})
|
|
|
$bootstrapTable = $('.c_div_left table').bootstrapTable();
|
|
|
// $bootstrapTable.css({ 'height': $('.c_div_left').height() - 50 });
|
|
|
$bootstrapTable.css({ 'width': $('.c_div_left').width() });
|
|
|
//$bootstrapTable.css({ 'margin-left': '-28px' });
|
|
|
$bootstrapTable.css({ 'border': '0' });
|
|
|
$('.c_div_left table thead tr th').css({ 'background-color': '#00C7BA' });
|
|
|
$('.c_div_left table thead tr th').css({ 'background-color': '#00C7BA' });
|
|
|
$('.c_div_left table thead tr th').css({ 'color': '#F3F8FB' });
|
|
|
$('.c_div_left table thead tr th').css({ 'text-align': 'center' });
|
|
|
$('.c_div_left table thead tr th').css({ 'border': '0' });
|
|
|
$('.c_div_left table thead tr th').css({ 'font-size': '12px' });
|
|
|
$('.c_div_left table thead tr th').css({ 'font-weight': '400' });
|
|
|
$('.c_div_left table tbody tr td').css({ 'border': '0' });
|
|
|
} catch (e) {
|
|
|
alert(e);
|
|
|
}
|
|
|
|
|
|
}
|
|
|
//初始化日期控件值
|
|
|
function InitialDate(data) {
|
|
|
var _data = JSON.parse(data);
|
|
|
$(".startdate").val(_data.startdate);
|
|
|
$(".enddate").val(_data.enddate);
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function rowIndexFormat(value, rows, index) {
|
|
|
return index + 1;
|
|
|
}
|
|
|
function Intformatting(value, rows, index) {
|
|
|
var _val = parseInt(value);
|
|
|
if (_val == null) {
|
|
|
return value;
|
|
|
} else {
|
|
|
return _val.toFixed(2)
|
|
|
}
|
|
|
}
|
|
|
function IncomeFlag(value, rows, index) {
|
|
|
if (value == "1") {
|
|
|
return "是";
|
|
|
} else {
|
|
|
return "否";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
//初始化日期控件
|
|
|
$('.form_datetime').datetimepicker({
|
|
|
language: 'zh-CN', //控件语言
|
|
|
weekStart: 1,//一周从哪一天开始，0（星期日）到6（星期六），默认从0开始 Integer类型
|
|
|
todayBtn: true,//开启选择今天的按钮,Boolean, “linked”类型 默认值：false’,如果此值为true 或 “linked”，则在日期时间选择器组件的底部显示一个 “Today” 按钮用以选择当前日期。
|
|
|
autoclose: true,//选择之后，自动关闭时间弹框 Boolean类型 默认值：false
|
|
|
todayHighlight: true,//今天日期高亮显示 如果为true, 高亮当前日期。Boolean类型 ,默认值：false
|
|
|
startView: 2,
|
|
|
forceParse: true,//强制性设置日期格式，转换成format格式 ，就是你输入的可能不正规，但是它胡强制尽量解析成你规定的格式（format）默认为：true
|
|
|
showMeridian: 1,
|
|
|
initialDate: new Date(),// 初始化日期时间,在打开时默认选当时的时间，显示在View中。默认值：new Date() Date or String类型
|
|
|
showMeridian: 0, //显示上午或下午
|
|
|
});
|
|
|
|
|
|
try {
|
|
|
net.Init();
|
|
|
} catch (e) {
|
|
|
alert(e);
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//点击查询
|
|
|
$('.Query').on('click', function () {
|
|
|
// $('.ordertype input:radio:checked').val();
|
|
|
var _enddate = $('#enddate').val();
|
|
|
var _startdate = $('#startdate').val();
|
|
|
var _workerNo = $('.textworkerNo').val();
|
|
|
|
|
|
net.Query(_enddate, _startdate, _workerNo, "全部", "");
|
|
|
})
|
|
|
|
|
|
//点击是否实收
|
|
|
$('.radioIncomeFlag').on('click', function () {
|
|
|
var _workerNo = $('.textworkerNo').val();
|
|
|
var _name = $(this).attr('name');
|
|
|
net.Query('', '', _workerNo, _name, "");
|
|
|
})
|
|
|
|
|
|
//选择营业模式
|
|
|
$('.radioordertype').on('click', function () {
|
|
|
var _workerNo = $('.textworkerNo').val();
|
|
|
var _type = $(this).attr("name");
|
|
|
net.Query('', '', _workerNo, "", _type);
|
|
|
})
|
|
|
|
|
|
//选中日期规格
|
|
|
$(".datespecitem").on('click', function () {
|
|
|
$(".datespecitem").removeClass("thisactive");
|
|
|
$(this).addClass("thisactive");
|
|
|
|
|
|
var _name = $(this).html();
|
|
|
})
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
function StrokeCount(data, name, val) {
|
|
|
var dom1 = document.getElementById("strokecount");
|
|
|
var _strokecount = echarts.init(dom1);
|
|
|
option = null;
|
|
|
option = {
|
|
|
tooltip: {},
|
|
|
title: {
|
|
|
text: '支付笔数',
|
|
|
subtext: ' ',
|
|
|
x: "54.5%"
|
|
|
},
|
|
|
legend: {
|
|
|
formatter: function (name) {
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
if (data[i].name == name) {
|
|
|
return name + " " + data[i].value + "笔";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
},
|
|
|
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
|
|
|
orient: 'vertical',
|
|
|
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
|
|
|
x: 'left',
|
|
|
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
|
|
|
y: 'center',
|
|
|
itemWidth: 40, // 设置图例图形的宽
|
|
|
itemHeight: 18, // 设置图例图形的高
|
|
|
textStyle: {
|
|
|
color: '#666' // 图例文字颜色
|
|
|
},
|
|
|
// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
|
|
|
itemGap: 10,
|
|
|
//backgroundColor: '#eee', // 设置整个图例区域背景颜色
|
|
|
data: name
|
|
|
},
|
|
|
color: ['#FD7281', '#FF7CCF', '#74D7A7', '#73B0FB', '#BF87FF', '#FF7E7E', '#75C0FF', '#00C7BA', '#74D7A7', '#73B0FB'], //环形颜色
|
|
|
graphic: { //图形中间文字
|
|
|
type: "text",
|
|
|
left: "54.5%",
|
|
|
top: "44%",
|
|
|
style: {
|
|
|
text: val + "\n支付笔数",
|
|
|
textAlign: "center",
|
|
|
fill: "#333333",
|
|
|
fontSize: 20
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '',
|
|
|
type: 'pie',
|
|
|
show: false,
|
|
|
radius: [60, 90], //饼图大小.
|
|
|
center: ['60%', '50%'],
|
|
|
label: {
|
|
|
normal: {
|
|
|
position: 'inner', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
|
|
|
// formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b}
|
|
|
// {a}指series.name {b}指series.data的name
|
|
|
// {c}指series.data的value {d}%指这一部分占总数的百分比
|
|
|
formatter: '{c}',
|
|
|
show: false
|
|
|
}
|
|
|
},
|
|
|
data: data
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
if (option && typeof option === "object") {
|
|
|
_strokecount.setOption(option, true);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function TotalMoney(data, name, val) {
|
|
|
var dom2 = document.getElementById("totalmoney");
|
|
|
var _totalmoney = echarts.init(dom2);
|
|
|
option2 = null;
|
|
|
option2 = {
|
|
|
tooltip: {
|
|
|
|
|
|
},//鼠标停留浮动
|
|
|
title: {
|
|
|
text: '支付金额',
|
|
|
subtext: ' ',
|
|
|
x:"54.5%"
|
|
|
},//标题
|
|
|
legend: {
|
|
|
formatter: function (name) {
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
|
if (data[i].name == name) {
|
|
|
return name + " ¥" + data[i].value;
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
|
|
|
orient: 'vertical',
|
|
|
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
|
|
|
x: 'left',
|
|
|
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
|
|
|
y: 'center',
|
|
|
itemWidth: 50, // 设置图例图形的宽
|
|
|
itemHeight: 18, // 设置图例图形的高
|
|
|
textStyle: {
|
|
|
color: '#666' // 图例文字颜色
|
|
|
},
|
|
|
// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
|
|
|
itemGap: 10,
|
|
|
//backgroundColor: '#eee', // 设置整个图例区域背景颜色
|
|
|
data: name
|
|
|
},//导航栏
|
|
|
color: ['#00C7BA', '#74D7A7', '#73B0FB', '#FD7281', '#BF87FF', '#FF7E7E', '#75C0FF', '#00C7BA', '#74D7A7', '#73B0FB'], //环形颜色
|
|
|
graphic: { //图形中间文字
|
|
|
type: "text",
|
|
|
left: "54.5%",
|
|
|
top: "44%",
|
|
|
style: {
|
|
|
text: "¥" + val + " \n收款金额",
|
|
|
textAlign: "center",
|
|
|
fill: "#333333",
|
|
|
fontSize: 20
|
|
|
}
|
|
|
},//饼状中间自定义内容
|
|
|
series: [
|
|
|
{
|
|
|
name: '',
|
|
|
type: 'pie',
|
|
|
show: false,
|
|
|
radius: [60, 90], //饼图大小.
|
|
|
center: ['60%', '50%'],
|
|
|
label: {
|
|
|
normal: {
|
|
|
position: 'inner', // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
|
|
|
// formatter: '{a} {b} : {c}个 ({d}%)' 设置标签显示内容 ，默认显示{b}
|
|
|
// {a}指series.name {b}指series.data的name
|
|
|
// {c}指series.data的value {d}%指这一部分占总数的百分比
|
|
|
formatter: '{c}',
|
|
|
show: false
|
|
|
}
|
|
|
},
|
|
|
data: data
|
|
|
}
|
|
|
]//饼状项内容
|
|
|
};
|
|
|
if (option2 && typeof option2 === "object") {
|
|
|
_totalmoney.setOption(option2, true);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |