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.7.1.min.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>
|