801 lines
31 KiB
Plaintext
801 lines
31 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="KPI.aspx.cs" Inherits="FineUIPro.Web.KPI.KPI" %>
|
|||
|
|
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head runat="server">
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|||
|
|
<title>KPI</title>
|
|||
|
|
<link href="../res/css/common.css" rel="stylesheet" type="text/css" />
|
|||
|
|
<script src="../Scripts/jquery-3.6.4.js"></script>
|
|||
|
|
<script src="../Scripts/layer/layer.js"></script>
|
|||
|
|
<script src="../Scripts/echarts/echarts.js"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<form id="form1" runat="server">
|
|||
|
|
<f:PageManager ID="PageManager1" runat="server" AutoSizePanelID="Panel1" />
|
|||
|
|
<f:Panel ID="Panel1" runat="server" Layout="VBox" EnableCollapse="false" ShowBorder="false" ShowHeader="false">
|
|||
|
|
<Toolbars>
|
|||
|
|
<f:Toolbar ID="Toolbar1" runat="server">
|
|||
|
|
<Items>
|
|||
|
|
<f:DatePicker runat="server" Label="Time Range" LabelAlign="Right" Required="true" BlockMD="5" DateFormatString="yyyy-MM" ID="StartTime" DisplayType="Month"></f:DatePicker>
|
|||
|
|
<f:DatePicker ID="EndTime" Required="true" Readonly="false" BlockMD="5" DateFormatString="yyyy-MM" CompareOperator="GreaterThan" runat="server" DisplayType="Month" ShowTodayButton="false"></f:DatePicker>
|
|||
|
|
<f:Button ID="btnSubmit" runat="server" BlockMD="2" ValidateForms="SimpleForm1" Text="Submit" OnClientClick="return btnSubmit()">
|
|||
|
|
</f:Button>
|
|||
|
|
<f:Button ID="btnExport" BoxConfigAlign="Center" runat="server" Text="Export" ToolTip="Export Excel" Icon="DoorOut" EnableAjax="false" DisableControlBeforePostBack="false" OnClick="btnExport_Click" EnablePress="true" Pressed="false">
|
|||
|
|
</f:Button>
|
|||
|
|
<f:ToolbarFill ID="ToolbarFill1" runat="server"></f:ToolbarFill>
|
|||
|
|
</Items>
|
|||
|
|
</f:Toolbar>
|
|||
|
|
</Toolbars>
|
|||
|
|
<Items>
|
|||
|
|
<f:TabStrip ID="TabStrip1" ShowBorder="true" TabPosition="Top"
|
|||
|
|
EnableTabCloseMenu="false" ActiveTabIndex="0" runat="server" BodyPadding="10px">
|
|||
|
|
<Tabs>
|
|||
|
|
<f:Tab Title="KPI Line" BodyPadding="1px" runat="server">
|
|||
|
|
<Items>
|
|||
|
|
<f:ContentPanel runat="server" ShowHeader="false" ShowBorder="false">
|
|||
|
|
<div id="kpi4" style="width: 100%; height: 600px;"></div>
|
|||
|
|
</f:ContentPanel>
|
|||
|
|
</Items>
|
|||
|
|
</f:Tab>
|
|||
|
|
<f:Tab Title="KPI Scatter" BodyPadding="1px" runat="server">
|
|||
|
|
<Items>
|
|||
|
|
<f:ContentPanel runat="server" ShowHeader="false" ShowBorder="false">
|
|||
|
|
<div id="kpi5" style="width: auto; height: 600px;"></div>
|
|||
|
|
</f:ContentPanel>
|
|||
|
|
</Items>
|
|||
|
|
</f:Tab>
|
|||
|
|
<f:Tab Title="User KPI" BodyPadding="1px" runat="server">
|
|||
|
|
<Items>
|
|||
|
|
<f:ContentPanel runat="server" ShowHeader="false" ShowBorder="false">
|
|||
|
|
<div id="kpi6" style="width: auto; height: 600px;"></div>
|
|||
|
|
</f:ContentPanel>
|
|||
|
|
</Items>
|
|||
|
|
</f:Tab>
|
|||
|
|
<f:Tab Title="Sample Analyse" BodyPadding="1px" runat="server">
|
|||
|
|
<Items>
|
|||
|
|
<f:ContentPanel runat="server" ShowHeader="false" ShowBorder="false">
|
|||
|
|
<div id="kpi7" style="width: auto; height: 600px;"></div>
|
|||
|
|
</f:ContentPanel>
|
|||
|
|
</Items>
|
|||
|
|
</f:Tab>
|
|||
|
|
<f:Tab Title="Contractor/Dis KPI" BodyPadding="1px" runat="server">
|
|||
|
|
<Items>
|
|||
|
|
<f:ContentPanel runat="server" ShowHeader="false" ShowBorder="false">
|
|||
|
|
<div id="kpi8" style="width: auto; height: 600px;"></div>
|
|||
|
|
</f:ContentPanel>
|
|||
|
|
</Items>
|
|||
|
|
</f:Tab>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<f:Tab Title="User Proportion" BodyPadding="1px" runat="server">
|
|||
|
|
<Items>
|
|||
|
|
<f:ContentPanel runat="server" ShowHeader="false" ShowBorder="false">
|
|||
|
|
<div id="kpi9" style="width: auto; height: 600px;"></div>
|
|||
|
|
<div style="text-align: center">
|
|||
|
|
Department:
|
|||
|
|
<asp:DropDownList ID="ddlDropDepList" runat="server" onchange="DepChange(this.value)">
|
|||
|
|
<asp:ListItem Text="ALL" Selected="true" Value="0"></asp:ListItem>
|
|||
|
|
<asp:ListItem Text="CTA" Value="1"></asp:ListItem>
|
|||
|
|
<asp:ListItem Text="CTE" Value="2"></asp:ListItem>
|
|||
|
|
<asp:ListItem Text="CTM" Value="3"></asp:ListItem>
|
|||
|
|
</asp:DropDownList>
|
|||
|
|
</div>
|
|||
|
|
</f:ContentPanel>
|
|||
|
|
</Items>
|
|||
|
|
</f:Tab>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<f:Tab Title="Dis Deduction KPI" BodyPadding="1px" runat="server">
|
|||
|
|
<Items>
|
|||
|
|
<f:ContentPanel runat="server" ShowHeader="false" ShowBorder="false">
|
|||
|
|
<div id="other" style="width: auto; height: 600px;"></div>
|
|||
|
|
</f:ContentPanel>
|
|||
|
|
</Items>
|
|||
|
|
</f:Tab>
|
|||
|
|
</Tabs>
|
|||
|
|
</f:TabStrip>
|
|||
|
|
</Items>
|
|||
|
|
</f:Panel>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
function DepChange(obj) {
|
|||
|
|
var types = obj == 0 ? "5" : "5" + obj;
|
|||
|
|
var StartId = '<%= StartTime.ClientID %>';
|
|||
|
|
var EndId = '<%= EndTime.ClientID %>';
|
|||
|
|
//KPI9
|
|||
|
|
var kpi9legendDate = "";
|
|||
|
|
var kpi9xAxis = "";
|
|||
|
|
var kpi9seriesDate = "";
|
|||
|
|
var kpi9DateEnd = "";
|
|||
|
|
|
|||
|
|
$.ajax({
|
|||
|
|
type: "POST",
|
|||
|
|
dataType: "text",
|
|||
|
|
url: "../common/main.ashx",
|
|||
|
|
data: { "action": "kpisearchdep", "startTime": (F(StartId) == null || F(StartId) == undefined) ? "" : F(StartId).gollO1, "endTime": (F(EndId) == null || F(EndId) == undefined) ? "" : F(EndId).ollO1, "kpitype": types },
|
|||
|
|
async: false,
|
|||
|
|
success: function (result) {
|
|||
|
|
var data = data = jQuery.parseJSON(result);
|
|||
|
|
//kpi9
|
|||
|
|
kpi9legendDate = data.Kpi9json.split('||')[0];
|
|||
|
|
kpi9xAxis = data.Kpi9json.split('||')[1];
|
|||
|
|
kpi9DateEnd = data.Kpi9json.split('||')[2];
|
|||
|
|
kpi9seriesDate = data.kpi9series;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
Kpi9(kpi9legendDate, kpi9xAxis, kpi9seriesDate, kpi9DateEnd);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function btnSubmit() {
|
|||
|
|
var StartId = '<%= StartTime.ClientID %>';
|
|||
|
|
var EndId = '<%= EndTime.ClientID %>';
|
|||
|
|
//KPI4
|
|||
|
|
var kpi4xAxis = "";
|
|||
|
|
var kpi4serieshze = "";
|
|||
|
|
var kpi4serieshzl = "";
|
|||
|
|
var kpi4DateEnd = "";
|
|||
|
|
//KPI5
|
|||
|
|
var kpi5series = "";
|
|||
|
|
//KPI6
|
|||
|
|
var kpi6xAxis = "";
|
|||
|
|
var kpi6seriesSsr = "";
|
|||
|
|
var kpi6serieshzl = "";
|
|||
|
|
var kpi6DateEnd = "";
|
|||
|
|
//KPI7
|
|||
|
|
var kpi7xAxis = "";
|
|||
|
|
var kpi7seriesSsr = "";
|
|||
|
|
var kpi7Count = "";
|
|||
|
|
var kpi7DateEnd = "";
|
|||
|
|
var kpi7titleName = "";
|
|||
|
|
//KPI8
|
|||
|
|
var kpi8xAxis = "";
|
|||
|
|
var kpi8ssrCost = "";
|
|||
|
|
var kpi8DateEnd = "";
|
|||
|
|
var kpi8titleName = "";
|
|||
|
|
//KPI9
|
|||
|
|
var kpi9legendDate = "";
|
|||
|
|
var kpi9xAxis = "";
|
|||
|
|
var kpi9seriesDate = "";
|
|||
|
|
var kpi9DateEnd = "";
|
|||
|
|
//KPIOther
|
|||
|
|
var kpioxAxis = "";
|
|||
|
|
var kpioserieshze = "";
|
|||
|
|
var kpioserieshzl = "";
|
|||
|
|
var kpioDateEnd = "";
|
|||
|
|
$.ajax({
|
|||
|
|
type: "POST",
|
|||
|
|
dataType: "text",
|
|||
|
|
url: "../common/main.ashx",
|
|||
|
|
data: { "action": "kpi", "startTime": (F(StartId) == null || F(StartId) == undefined) ? "" : F(StartId).o0o10, "endTime": (F(EndId) == null || F(EndId) == undefined) ? "" : F(EndId).o0o10 },
|
|||
|
|
async: false,
|
|||
|
|
success: function (result) {
|
|||
|
|
var data = data = jQuery.parseJSON(result);
|
|||
|
|
//kpi4
|
|||
|
|
kpi4xAxis = data.Kpi4json.split('||')[0];
|
|||
|
|
kpi4serieshze = data.Kpi4json.split('||')[1];
|
|||
|
|
kpi4serieshzl = data.Kpi4json.split('||')[2];
|
|||
|
|
kpi4DateEnd = data.Kpi4json.split('||')[3];
|
|||
|
|
//kpi5
|
|||
|
|
kpi5series = data.Kpi5json;
|
|||
|
|
//kpi6
|
|||
|
|
kpi6xAxis = data.Kpi6json.split('||')[0];
|
|||
|
|
kpi6seriesSsr = data.Kpi6json.split('||')[1];
|
|||
|
|
kpi6serieshzl = data.Kpi6json.split('||')[2];
|
|||
|
|
kpi6DateEnd = data.Kpi6json.split('||')[3];
|
|||
|
|
//kpi7
|
|||
|
|
kpi7xAxis = data.Kpi7json.split('||')[0];
|
|||
|
|
kpi7seriesSsr = data.Kpi7json.split('||')[1];
|
|||
|
|
kpi7Count = data.Kpi7json.split('||')[2];
|
|||
|
|
kpi7DateEnd = data.Kpi7json.split('||')[3];
|
|||
|
|
kpi7titleName = data.Kpi7json.split('||')[4];
|
|||
|
|
//kpi8
|
|||
|
|
kpi8xAxis = data.Kpi8json.split('||')[0];
|
|||
|
|
kpi8ssrCost = data.Kpi8json.split('||')[1];
|
|||
|
|
kpi8DateEnd = data.Kpi8json.split('||')[2];
|
|||
|
|
kpi8titleName = data.Kpi8json.split('||')[3];
|
|||
|
|
//kpi9
|
|||
|
|
kpi9legendDate = data.Kpi9json.split('||')[0];
|
|||
|
|
kpi9xAxis = data.Kpi9json.split('||')[1];
|
|||
|
|
kpi9DateEnd = data.Kpi9json.split('||')[2];
|
|||
|
|
kpi9seriesDate = data.kpi9series;
|
|||
|
|
//kpio
|
|||
|
|
kpioxAxis = data.Kpiojson.split('||')[0];
|
|||
|
|
kpioserieshze = data.Kpiojson.split('||')[1];
|
|||
|
|
kpioserieshzl = data.Kpiojson.split('||')[2];
|
|||
|
|
kpioDateEnd = data.Kpiojson.split('||')[3];
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
Kpi4(kpi4xAxis, kpi4serieshze, kpi4serieshzl, kpi4DateEnd);
|
|||
|
|
Kpi5(kpi5series);
|
|||
|
|
KPI6(kpi6xAxis, kpi6seriesSsr, kpi6serieshzl, kpi6DateEnd);
|
|||
|
|
KPI7(kpi7xAxis, kpi7seriesSsr, kpi7Count, kpi7DateEnd, kpi7titleName);
|
|||
|
|
KPI8(kpi8xAxis, kpi8ssrCost, kpi8DateEnd, kpi8titleName);
|
|||
|
|
Kpi9(kpi9legendDate, kpi9xAxis, kpi9seriesDate, kpi9DateEnd);
|
|||
|
|
Kpio(kpioxAxis, kpioserieshze, kpioserieshzl, kpioDateEnd);
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
//KPI4
|
|||
|
|
function Kpi4(kpi4xAxis, kpi4serieshze, kpi4serieshzl, kpi4DateEnd) {
|
|||
|
|
$("#kpi4").css('width', $("#Panel1_TabStrip1_ctl00").width());
|
|||
|
|
var KPI4 = echarts.init(document.getElementById("kpi4"));
|
|||
|
|
var optionKpi4 = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '15%',
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['Deduction Cost(RMB)', 'Deduction Rate'],
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
data: kpi4xAxis.split(','),
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
alignWithLabel: true
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: -90
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name: 'Deduction Cost(RMB)',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name: 'Deduction Rate',
|
|||
|
|
max: 100,
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter: '{value} %'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
show: true,
|
|||
|
|
start: 0,
|
|||
|
|
end: parseInt(kpi4DateEnd)
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: 'Deduction Cost(RMB)',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: kpi4serieshze.split(','),
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#94AF0a'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Deduction Rate',
|
|||
|
|
type: 'line',
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: true, //开启显示
|
|||
|
|
formatter: '{c}%',
|
|||
|
|
position: 'top', //在上方显示
|
|||
|
|
textStyle: { //数值样式
|
|||
|
|
color: 'black',
|
|||
|
|
fontSize: 12,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxisIndex: 1,
|
|||
|
|
data: kpi4serieshzl.split(',')
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
KPI4.setOption(optionKpi4);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//KPI5
|
|||
|
|
function Kpi5(kpi5series) {
|
|||
|
|
var series = [];
|
|||
|
|
var kpi5hze = kpi5series.split('||')[0];
|
|||
|
|
var kpi5hzl = kpi5series.split('||')[1];
|
|||
|
|
var kpi5FoNo = kpi5series.split('||')[2];
|
|||
|
|
var kpi5titleName = kpi5series.split('||')[3];
|
|||
|
|
for (var i = 0; i < kpi5hze.split(',').length; i++) {
|
|||
|
|
var arr = [];
|
|||
|
|
arr.push(parseFloat(kpi5hzl.split(',')[i]), parseFloat(kpi5hze.split(',')[i]));
|
|||
|
|
series.push(arr);
|
|||
|
|
}
|
|||
|
|
$("#kpi5").css('width', $("#kpi4").width());
|
|||
|
|
var KPI5 = echarts.init(document.getElementById("kpi5"));
|
|||
|
|
var optionKpi5 = {
|
|||
|
|
tooltip: {
|
|||
|
|
/*返回需要的信息*/
|
|||
|
|
formatter: function (param) {
|
|||
|
|
var value = param.value;
|
|||
|
|
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px;">' + kpi5FoNo.split(',')[param.dataIndex] + '[' + value[0] + ',' + value[1] + ']' + '</div>';
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
left: 'center',
|
|||
|
|
text: kpi5titleName,
|
|||
|
|
top: '5%',
|
|||
|
|
textStyle: {
|
|||
|
|
//头部字体大小
|
|||
|
|
fontSize: 15
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: {
|
|||
|
|
scale: true,
|
|||
|
|
name: 'Deduction Rate（%）',
|
|||
|
|
position: 'left',//位置靠左
|
|||
|
|
nameLocation: 'middle', //位置居中
|
|||
|
|
nameGap: 40, //与y轴距离
|
|||
|
|
nameRotate: 0, //角度
|
|||
|
|
nameTextStyle: {
|
|||
|
|
fontSize: 16,
|
|||
|
|
fontWeight: 'bolder'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
scale: true,
|
|||
|
|
name: 'Deduction Cost（RMB）',
|
|||
|
|
position: 'left',//位置靠左
|
|||
|
|
nameLocation: 'middle', //位置居中
|
|||
|
|
nameGap: 80, //与y轴距离
|
|||
|
|
nameRotate: 90, //角度
|
|||
|
|
nameTextStyle: {
|
|||
|
|
fontSize: 16,
|
|||
|
|
fontWeight: 'bolder'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series: [{
|
|||
|
|
type: 'effectScatter',
|
|||
|
|
symbolSize: 20
|
|||
|
|
}, {
|
|||
|
|
type: 'scatter',
|
|||
|
|
data: series,
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
KPI5.setOption(optionKpi5);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//KPI6
|
|||
|
|
function KPI6(kpi6xAxis, kpi6seriesSsr, kpi6serieshzl, kpi6DateEnd) {
|
|||
|
|
$("#kpi6").css('width', $("#kpi4").width());
|
|||
|
|
var KPI6 = echarts.init(document.getElementById("kpi6"));
|
|||
|
|
var optionKpi6 = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['Deduction Cost(RMB)', 'Deduction Rate']
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '15%',
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
data: kpi6xAxis.split(','),
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
alignWithLabel: true
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: -90
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name: 'Deduction Cost(RMB)'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name: 'Deduction Rate',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter: '{value} %'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
show: true,
|
|||
|
|
start: 0,
|
|||
|
|
end: parseInt(kpi6DateEnd)
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: 'Deduction Cost(RMB)',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: kpi6seriesSsr.split(','),
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#94AF0a'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Deduction Rate',
|
|||
|
|
type: 'line',
|
|||
|
|
yAxisIndex: 1,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: true, //开启显示
|
|||
|
|
formatter: '{c}%',
|
|||
|
|
position: 'top', //在上方显示
|
|||
|
|
textStyle: { //数值样式
|
|||
|
|
color: 'black',
|
|||
|
|
fontSize: 12,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: kpi6serieshzl.split(',')
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
KPI6.setOption(optionKpi6);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//KPI7
|
|||
|
|
function KPI7(kpi7xAxis, kpi7seriesSsr, kpi7Count, kpi7DateEnd, kpi7titleName) {
|
|||
|
|
$("#kpi7").css('width', $("#kpi4").width());
|
|||
|
|
var KPI7 = echarts.init(document.getElementById("kpi7"));
|
|||
|
|
var optionKpi7 = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['SSR Cost', 'SSR Count']
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '15%',
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
left: 'center',
|
|||
|
|
text: kpi7titleName,
|
|||
|
|
top: '5%',
|
|||
|
|
textStyle: {
|
|||
|
|
//头部字体大小
|
|||
|
|
fontSize: 14
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
data: kpi7xAxis.split(','),
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
alignWithLabel: true
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: -90
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name: 'SSR Cost'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name: 'SSR Count',
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter: '{value}'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
show: true,
|
|||
|
|
start: 0,
|
|||
|
|
end: parseInt(kpi7DateEnd)
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: 'SSR Cost',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: kpi7seriesSsr.split(','),
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#94AF0a'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'SSR Count',
|
|||
|
|
type: 'line',
|
|||
|
|
yAxisIndex: 1,
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: true, //开启显示
|
|||
|
|
position: 'top', //在上方显示
|
|||
|
|
textStyle: { //数值样式
|
|||
|
|
color: 'black',
|
|||
|
|
fontSize: 12,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: kpi7Count.split(',')
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
KPI7.setOption(optionKpi7);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//KPI8
|
|||
|
|
function KPI8(kpi8xAxis, kpi8ssrCost, kpi8DateEnd, kpi8titleName) {
|
|||
|
|
$("#kpi8").css('width', $("#kpi4").width());
|
|||
|
|
var KPI8 = echarts.init(document.getElementById("kpi8"));
|
|||
|
|
var optionKpi8 = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
left: 'center',
|
|||
|
|
text: kpi8titleName,
|
|||
|
|
top: '5%',
|
|||
|
|
textStyle: {
|
|||
|
|
//头部字体大小
|
|||
|
|
fontSize: 14
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
data: kpi8xAxis.split(','),
|
|||
|
|
axisTick: {
|
|||
|
|
alignWithLabel: true
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: -20
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'value'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
show: true,
|
|||
|
|
start: 0,
|
|||
|
|
end: parseInt(kpi8DateEnd)
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: 'Cost（KRMB）',
|
|||
|
|
type: 'bar',
|
|||
|
|
barWidth: '60%',
|
|||
|
|
data: kpi8ssrCost.split(','),
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#94AF0a',
|
|||
|
|
label: {
|
|||
|
|
show: true, //开启显示
|
|||
|
|
formatter: '{c}k',
|
|||
|
|
position: 'top', //在上方显示
|
|||
|
|
textStyle: { //数值样式
|
|||
|
|
color: 'black',
|
|||
|
|
fontSize: 12,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
KPI8.setOption(optionKpi8);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//KPI9
|
|||
|
|
function Kpi9(kpi9legendDate, kpi9xAxis, kpi9seriesDate, kpi9DateEnd) {
|
|||
|
|
$("#kpi9").css('width', $("#kpi4").width());
|
|||
|
|
var KPI9 = echarts.init(document.getElementById("kpi9"));
|
|||
|
|
var optionKpi9 = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
|
|||
|
|
formatter: function (params) {
|
|||
|
|
var str = '';
|
|||
|
|
var j = 1;
|
|||
|
|
for (var i = 0; i < params.length; i++) {
|
|||
|
|
|
|||
|
|
if (j % 2 == 0) {
|
|||
|
|
var tar = params[i];
|
|||
|
|
str += (tar.seriesName + ':' + tar.value + '%<br/>');
|
|||
|
|
} else {
|
|||
|
|
var tar = params[i];
|
|||
|
|
str += (tar.seriesName + ':' + tar.value + '%，');
|
|||
|
|
}
|
|||
|
|
j++;
|
|||
|
|
}
|
|||
|
|
return params[0].name + '<br/>' + str;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: kpi9legendDate.split(',')
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '3%',
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
left: 'center',
|
|||
|
|
text: 'Discipline Proportion of User',
|
|||
|
|
top: '5%',
|
|||
|
|
textStyle: {
|
|||
|
|
//头部字体大小
|
|||
|
|
fontSize: 14
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
xAxis: [{
|
|||
|
|
type: 'category',
|
|||
|
|
data: kpi9xAxis.split(','),
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
alignWithLabel: true
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: -90
|
|||
|
|
},
|
|||
|
|
name: '部门'
|
|||
|
|
}],
|
|||
|
|
yAxis: [{
|
|||
|
|
type: 'value',
|
|||
|
|
name: '占比',
|
|||
|
|
max: 100
|
|||
|
|
}],
|
|||
|
|
series: kpi9seriesDate,
|
|||
|
|
dataZoom: [{
|
|||
|
|
show: true,
|
|||
|
|
start: 0,
|
|||
|
|
end: parseInt(kpi9DateEnd)
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
show: false,
|
|||
|
|
yAxisIndex: 0,
|
|||
|
|
filterMode: 'empty',
|
|||
|
|
width: 30,
|
|||
|
|
height: '70%',
|
|||
|
|
showDataShadow: true,
|
|||
|
|
left: '93%'
|
|||
|
|
}]
|
|||
|
|
}
|
|||
|
|
KPI9.setOption(optionKpi9);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
//KPIo
|
|||
|
|
function Kpio(kpioxAxis, kpioserieshze, kpioserieshzl, kpioDateEnd) {
|
|||
|
|
$("#other").css('width', $("#kpi4").width());
|
|||
|
|
var KPIo = echarts.init(document.getElementById("other"));
|
|||
|
|
var optionKpio = {
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis'
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '15%',
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
data: ['Deduction Cost(RMB)', 'Deduction Rate(%)'],
|
|||
|
|
},
|
|||
|
|
title: {
|
|||
|
|
left: 'center',
|
|||
|
|
text: 'Dis Deduction',
|
|||
|
|
top: '5%'
|
|||
|
|
},
|
|||
|
|
xAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'category',
|
|||
|
|
data: kpioxAxis.split(','),
|
|||
|
|
axisPointer: {
|
|||
|
|
type: 'shadow'
|
|||
|
|
},
|
|||
|
|
axisTick: {
|
|||
|
|
alignWithLabel: true
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
interval: 0,
|
|||
|
|
rotate: -90
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis: [
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name: 'Deduction Cost(RMB)',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
type: 'value',
|
|||
|
|
name: 'Deduction Rate(%)',
|
|||
|
|
max: 100,
|
|||
|
|
axisLabel: {
|
|||
|
|
formatter: '{value} %'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
dataZoom: [
|
|||
|
|
{
|
|||
|
|
show: true,
|
|||
|
|
start: 0,
|
|||
|
|
end: parseInt(kpioDateEnd)
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: 'Deduction Cost(RMB)',
|
|||
|
|
type: 'bar',
|
|||
|
|
data: kpioserieshze.split(','),
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: '#94AF0a'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Deduction Rate(%)',
|
|||
|
|
type: 'line',
|
|||
|
|
yAxisIndex: 1,
|
|||
|
|
data: kpioserieshzl.split(','),
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
label: {
|
|||
|
|
show: true, //开启显示
|
|||
|
|
formatter: '{c}%',
|
|||
|
|
position: 'top', //在上方显示
|
|||
|
|
textStyle: { //数值样式
|
|||
|
|
color: 'black',
|
|||
|
|
fontSize: 12,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
KPIo.setOption(optionKpio);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|