var fun={
init:function () {
fun.weekLineEchartsdata();
fun.weekRankEchartsdata();
fun.weekCirlceEchartsdata();
fun.weekCreateTableData();
},
//收入折线图
weekLineEchartsdata:function () {
var incomeecharts = echarts.init(document.getElementById('weekly-linechart'));
var incomeoption = {
color:['#5fe98f'],
tooltip: {
trigger: 'item',
backgroundColor: '#5fe98f',
// extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
borderColor:'#5fe98f',
padding:0,
textStyle:{
color:'#fff',
fontSize:'14px',
fontFamily:'微软雅黑'
},
// extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
formatter:function (params) {
var str ='';
//console.log(params)
// str +=''+params.data+'元
';
str +='4元
';
return str;
},
extraCssText:'border-radius:20px!important;'
},
// legend: {
// top: '0',
// right: '24',
//
// },
grid: {
top: '13%',
left: '2%',
right: '4%',
bottom: '2%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data:['05/21','05/22','05/23','05/24','05/25','05/26','05/27'],
axisLabel: {
interval:0,
show: true,
textStyle: {
color: 'rgba(0,0,0,0.5)',
fontSize:'12px',
fontFamily:'微软雅黑'
}
},
// splitNumber:10,
// minInterval:2,
axisTick: {
show: false,
},
axisLine: {
show: false
},
splitLine:{
lineStyle:{
color:'#f0f0f2',
}
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: 'rgba(0,0,0,0.5)',
fontSize:'12px',
fontFamily:'微软雅黑'
}
},
axisTick: {
show: false,
},
axisLine: {
show: false
},
splitLine:{
lineStyle:{
color:'#f0f0f2',
}
}
},
series: [
{
name: '近7日收入折线图',
type: 'line',
data:[53,26,57,33,67,88,345],
symbol:'circle',
symbolSize:10,
itemStyle : {
normal : {
lineStyle:{
color:'#f0f0f2',
}
}
},
areaStyle: {
normal: {
color: '#effdf4'
}
},
lineStyle: {
normal: {
color:'#5fe98f',
width:2,
}
}
},
]
};
incomeecharts.setOption(incomeoption, true);
//自适应
window.onresize = function(){
incomeecharts.resize();
};
},
//收入排行条形图
weekRankEchartsdata:function () {
var rankecharts = echarts.init(document.getElementById('weekly-rankechart'));
var rankoption = {
tooltip: {
trigger: 'axis',
show:false,
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '0%',
left: '2%',
right: '4%',
bottom: '2%',
containLabel: true
},
xAxis: {
type: 'value',
scale: false,
show:false,
splitLine:{
show:false
}
// boundaryGap: [0, 0.01]
},
yAxis: {
scale: true,
axisTick: {
show: false,
},
axisLine: {
show: false
},
splitLine:{
show:false
},
type: 'category',
data: ["扬中", "南京", "广州", "天津", "无锡", "常德", "赤峰", "北京昌平区文化中心", "北京东城区文化中心", "北京西城区文化中心"],
axisLabel: {
interval:0,
show: true,
textStyle: {
color: 'rgba(0,0,0,0.6)',
fontSize:'12px',
fontFamily:'微软雅黑'
}
},
},
series: [
{
name: '收入',
type: 'bar',
itemStyle: {
normal:{
color: function (params){
var colorList = ["#a5dff3", "#5dc2c3", "#fd714b", "#50c0f5", "#2bb97f", "#5ed8a6", "#50c0f5", "#fdc94d", "#5fe98f", "#1e95cd"];
return colorList[params.dataIndex];
}
},
},
label:{
position:'right',
show:true,
formatter:'{c}元',
color: 'rgba(0,0,0,.6)',
fontSize:'12px',
fontFamily: '微软雅黑'
},
data: [12333, 13893, 23823, 32937, 43893, 53293,63232, 73209, 73509,80982]
},
]
};
rankecharts.setOption(rankoption, true);
//自适应
window.onresize = function(){
rankecharts.resize();
};
},
//在线支付占比
weekCirlceEchartsdata:function () {
var dcsbChart = echarts.init(document.getElementById('weekly-zfzbechart'));
var dcsboption = {
title: {
text: '80%',
textStyle:{
color:'#000',
fontSize:'18',
align:'center',
fontFamily:'微软雅黑'
},
top:'115',
left:'center'
},
legendHoverLink: false,
series: [
{
name:'',
type:'pie',
radius:'80%',
center:['50%','50%'],
legendHoverLink: false,
avoidLabelOverlap: false,
startAngle :180,
hoverAnimation:false,
label:{normal: {show: false}},
data:[
{value:50, name:'',itemStyle:{normal:{color:'#edf7fb'},emphasis:{color:'#edf7fb'}}, label:{normal: {show: false}}},
{value:50, name:'',itemStyle:{normal:{color:'#edf7fb'},emphasis:{color:'#edf7fb'}}, label:{normal: {show: false}}}
]
},
{
name:'支付占比',
type:'pie',
radius: ['88%', '98%'],
center:['50%','50%'],
legendHoverLink: false,
avoidLabelOverlap: false,
hoverAnimation:false,
// hoverOffset:0,
startAngle :180,
color:['#5fe98f','#d5d8d8'],
label: {
normal: {
show: false,
position: 'inside',
formatter:'{c}%'
},
emphasis: {
show: false,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:2, name:'20~25岁',itemStyle:{normal:{color:'#5fe98f'},emphasis:{color:'#5fe98f'}}, label:{normal: {show: false}}},
{value:2, name:'25~30岁',itemStyle:{normal:{color:'#d5d8d8'},emphasis:{color:'#d5d8d8'}}, label:{normal: {show: false}}},
]
}
]
};
dcsbChart.setOption(dcsboption, true);
},
//table参数
getQueryParam:function () {
},
//表格数据
weekCreateTableData: function () {
$('#weeklytable').bootstrapTable('destroy').bootstrapTable({
striped: true,//表格显示条纹
pagination: true, //启动分页
pageNumber: 1, //当前第几页
pageSize: 10, //每页显示的记录数
pageList: [10, 15, 20], //记录数可选列表
sidePagination: 'server',//表示服务端分页
queryParamsType: 'limit',
// sortable: true, //是否启用排序
// sortOrder: "asc",
method: 'POST',//请求方法
paginationPreText: '<',
paginationNextText: '>',
ajax: tableLoadRequest,//自定义ajax加载数据
// uniqueId:'id',
columns: [
{field: 'plName', title: '车场名称', width: '20%', align: "left"},
{
field: 'advFee',
title: ' 应收',
width: '15%',
align: "left",
formatter: fun.moneyFormatter
},
{
field: 'actFee',
title: ' 实收',
width: '15%',
align: "left",
formatter: fun.moneyFormatter
},
{
field: 'actFee',
title: ' 免费开闸次数',
width: '15%',
align: "left",
// formatter: fun.moneyFormatter
},
{
field: 'actFee',
title: ' 免费开闸占比',
width: '15%',
align: "left",
// formatter: fun.moneyFormatter
},
]
});
},
//金额处理
moneyFormatter: function (value) {
// console.log(typeof value)
if (value == 0 || value == undefined || value == null) {
return 0;
} else {
return (value / 100).toFixed(2);
}
},
};
fun.init();
/**
* 默认table 函数
* 自定义table AJAX请求
* @param {Object} params
*/
function tableLoadRequest(params) {
/* var req = fun.getQueryParam();
//设置请求参数
var pageNum = (params.data.offset / params.data.limit) + 1;
//条件查询
req.baseRequest = {
pageNum: pageNum,
pageSize: params.data.limit
};
req.sysCode = sysComm.sysCode;
var opt = {
method: 'post',
url: dataUrl.util.queryIncomeStatisticForPark(),
data: JSON.stringify(req),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (res) {
console.log(res);
if (res.code == '8888') {
params.success(res.data);
}
}
};
sysAjax(opt);*/
}