Skip to content

S
SuperMan
Commit 691c7fa2 authored by youjie's avatar youjie
Browse files
Options

no message

parent 4e28d303
Show whitespace changes
Inline Side-by-side
Showing with 924 additions and 145 deletions
src/components/FinancialModule/DataAnalysis/components/corporationChart.vue
View file @ 691c7fa2
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div style="margin-left: 20px;"> <div style="margin-left: 20px;">
<el-tag size="small" effect="dark" <el-tag size="small" effect="dark"
style="margin-right: 5px;cursor: pointer;" style="margin-right: 5px;cursor: pointer;"
:type="Current==item.ID?'danger':'info'" v-for="(item,index) in types" :key="item.ID" :type="Current==item.ID?'danger':'info'" v-for="(item,index) in BranchTitles" :key="item.ID"
@click="Current=item.ID,BranchChart()">{{item.Name}}</el-tag> @click="Current=item.ID,BranchChart()">{{item.Name}}</el-tag>
</div> </div>
...@@ -22,13 +22,15 @@ ...@@ -22,13 +22,15 @@
<script> <script>
export default { export default {
props:['StatisticalData'], props:['StatisticalData','msgData'],
data() { data() {
return { return {
MonthList: [],//月份列表 MonthList: [],//月份列表
BranchAnalysisData: [], BranchAnalysisData: [],
colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff', colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff',
'#E43939','#F79A2C','#FFF60B','#3DD948','#39CAE4','#2C31F1','#7A39E4','#E65FC1','#D0B478','#000000','#BABABA',], '#E43939','#F79A2C','#FFF60B','#3DD948','#39CAE4','#2C31F1','#7A39E4','#E65FC1','#D0B478','#BABABA',
'rgba(228,57,57,.7)','rgba(247,154,44,.7)','rgba(255,246,11,.7)','rgba(61,217,72,.7)','rgba(57,202,228,.7)','rgba(44,49,241,.7)','rgba(122,57,228,.7)'],
Stocklegend: {},
types:[ types:[
{Name: '收入',ID:1}, {Name: '收入',ID:1},
{Name: '收入占比 %',ID:2}, {Name: '收入占比 %',ID:2},
...@@ -38,6 +40,28 @@ export default { ...@@ -38,6 +40,28 @@ export default {
{Name: '实际利率 %',ID:6}, {Name: '实际利率 %',ID:6},
], ],
Current: 1, Current: 1,
BranchTitles:[
{Name: '收入',value:'JiPiao',ID:1},
{Name: '占比 %',value:'JiPiaoRate',ID:2},
{Name: '毛利',value:'RoomFee',ID:3},
{Name: '毛利率 %',value:'RommFeeRate',ID:4},
{Name: '实际利润',value:'CarFee',ID:5},
{Name: '实际利率 %',value:'CarFeeRate',ID:6},
{Name: '联运收入',value:'MealFee',ID:7},
{Name: '营业利润',value:'MealFeeRate',ID:8},
{Name: '管销费用',value:'TicketFee',ID:9},
{Name: '净利润',value:'TicketFeeRate',ID:10},
],
BranchDataObj: {
name: '',
type: 'line',
showSymbol: false,
smooth: true,
symbolSize: 1,
stack: 'Total',
data: []
},
BranchDatas: [],
} }
}, },
mounted() { mounted() {
...@@ -45,40 +69,70 @@ export default { ...@@ -45,40 +69,70 @@ export default {
}, },
methods: { methods: {
BranchChart(){ BranchChart(){
this.inBranchDatas()
let that = this let that = this
let titles = this.BranchAnalysisData.map(x=>{return x.Name}) let titles = this.BranchAnalysisData.map(x=>{return x.Name})
let datas = [] let datas = []
let Newobj={};
for(let index=0;index<this.BranchTitles.length;index++){
for(let i=0;i<this.MonthList.length;i++){
this.BranchAnalysisData.forEach((z,indexs)=>{
let element = z
let MonthDatas = []
MonthDatas = z.DetailList.filter(y=>{
return y.Month==this.MonthList[i]
})
this.BranchDatas[indexs].name = z.Name
if(this.Current==1) this.BranchDatas[indexs].data = this.BranchDatas[indexs].data.concat(MonthDatas[0].Income.toFixed(2))
if(this.Current==2) this.BranchDatas[indexs].data = this.BranchDatas[indexs].data.concat(MonthDatas[0].IncomeRate.toFixed(2))
if(this.Current==3) this.BranchDatas[indexs].data = this.BranchDatas[indexs].data.concat(MonthDatas[0].MaoLi.toFixed(2))
if(this.Current==4) this.BranchDatas[indexs].data = this.BranchDatas[indexs].data.concat(MonthDatas[0].MaoLiRate.toFixed(2))
if(this.Current==5) this.BranchDatas[indexs].data = this.BranchDatas[indexs].data.concat(MonthDatas[0].Profit.toFixed(2))
if(this.Current==6) this.BranchDatas[indexs].data = this.BranchDatas[indexs].data.concat(MonthDatas[0].ProfitRate.toFixed(2))
if(this.Current==7) this.BranchDatas[indexs].data = this.BranchDatas[indexs].data.concat(MonthDatas[0].TransportIncome.toFixed(2))
if(this.Current==8) this.BranchDatas[indexs].data = this.BranchDatas[indexs].data.concat(MonthDatas[0].FinalProfit.toFixed(2))
if(this.Current==9) this.BranchDatas[indexs].data = this.BranchDatas[indexs].data.concat(MonthDatas[0].GXFY.toFixed(2))
if(this.Current==10) this.BranchDatas[indexs].data = this.BranchDatas[indexs].data.concat(MonthDatas[0].JLR.toFixed(2))
// if(this.msgData.LossType!='0'){
// if(indexs>4){
// let name=element.Name;
// Newobj[name]=false;
// }
// }else {
// if(indexs>5){
// let name=element.Name;
// Newobj[name]=false;
// }
// }
if(indexs>5){
let name=element.Name;
Newobj[name]=false;
}
this.Stocklegend=Newobj;
})
}
}
datas = this.BranchDatas
let chartDom = document.getElementById('BranchAnalysisChart'); let chartDom = document.getElementById('BranchAnalysisChart');
let myChart = this.$echarts.init(chartDom); let myChart = this.$echarts.init(chartDom);
// echarts.init(chartDom, 'dark');
let option; let option;
option = { option = {
color:that.colorList, color:that.colorList,
tooltip: { tooltip: {
backgroundColor:'transparent',
trigger: 'axis', trigger: 'axis',
axisPointer: {
type: 'none',
label: {
// backgroundColor: '#6a7985'
}
},
position: function (point, params, dom, rect, size) { position: function (point, params, dom, rect, size) {
return [point[0]-50, point[1]-dom.offsetHeight]; return [point[0]-50, point[1]-dom.offsetHeight];
}, },
formatter: function(params) { axisPointer: {
var res = `<div style="background:${params.color};position:relative;padding:6px 10px;border-radius:8px;"> lineStyle: {
${params.seriesName}:${params.data} type: 'dashed',
<div style="position: absolute;bottom: -8px;left: 35%;width:0; color: "#ddd"
height:0; }
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid ${params.color};">
</div>
<div>`
return res;
} }
}, },
legend: { legend: {
...@@ -87,21 +141,16 @@ export default { ...@@ -87,21 +141,16 @@ export default {
type:'scroll', type:'scroll',
icon: "circle", icon: "circle",
padding: [5, 30, 20, 30] , padding: [5, 30, 20, 30] ,
type:'scroll', data: titles,
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] selected: that.Stocklegend,
}, },
grid: { grid: {
left: 15, // 默认10%，给24就挺合适的。 left: 15, // 默认10%，给24就挺合适的。
top: 30, // 默认60 top: 30, // 默认60
right: 15, // 默认10% right: 45, // 默认10%
bottom: 70, // 默认60 bottom: 70, // 默认60
containLabel: true containLabel: true
}, },
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis : [ xAxis : [
{ {
type : 'category', type : 'category',
...@@ -109,7 +158,6 @@ export default { ...@@ -109,7 +158,6 @@ export default {
data :this.MonthList, data :this.MonthList,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
// 设置x轴颜色
color: "transparent" color: "transparent"
} }
}, },
...@@ -117,8 +165,7 @@ export default { ...@@ -117,8 +165,7 @@ export default {
textStyle: { textStyle: {
color: "#333333" color: "#333333"
} }
}, }
} }
], ],
yAxis : [ yAxis : [
...@@ -126,7 +173,6 @@ export default { ...@@ -126,7 +173,6 @@ export default {
type : 'value', type : 'value',
axisLine: { axisLine: {
lineStyle: { lineStyle: {
// 设置x轴颜色
color: "transparent", color: "transparent",
width: 1, width: 1,
} }
...@@ -139,46 +185,21 @@ export default { ...@@ -139,46 +185,21 @@ export default {
splitLine:{ splitLine:{
show:true, show:true,
lineStyle:{ lineStyle:{
// type:'dashed' // type:'dashed',
color:'#EEEEEE', color:'#EEEEEE',
} }
} }
} }
], ],
series: [ series: datas
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}; };
myChart.setOption(option,true) myChart.setOption(option,true)
},
inBranchDatas() {
this.BranchDatas = []
for(let i=0;i<this.BranchAnalysisData.length;i++){
this.BranchDatas.push(JSON.parse(JSON.stringify(this.BranchDataObj)))
}
} }
}, },
watch: { watch: {
...@@ -244,12 +265,13 @@ export default { ...@@ -244,12 +265,13 @@ export default {
padding: 5px 0; padding: 5px 0;
} }
.titleBox{ .titleBox{
padding: 0 5px 5px 5px; padding: 10px 10px 0 10px;
} }
.row{ .row{
display: flex; display: flex;
} }
.echartsBox{ .echartsBox{
width: 100%; width: 100%;
background: #fff;
} }
</style> </style>
src/components/FinancialModule/DataAnalysis/components/lineChart.vue
View file @ 691c7fa2
...@@ -41,14 +41,15 @@ ...@@ -41,14 +41,15 @@
<script> <script>
export default { export default {
props:['StatisticalData'], props:['StatisticalData','msgData'],
data() { data() {
return { return {
MonthList: [],//月份列表 MonthList: [],//月份列表
LineAnalysisData: [],//各线路统计 LineAnalysisData: [],//各线路统计
CostAnalysisData: [],//各成本统计 CostAnalysisData: [],//各成本统计
colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff', colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff',
'#E43939','#F79A2C','#FFF60B','#3DD948','#39CAE4','#2C31F1','#7A39E4','#E65FC1','#D0B478','#000000','#BABABA',], '#E43939','#F79A2C','#FFF60B','#3DD948','#39CAE4','#2C31F1','#7A39E4','#E65FC1','#D0B478','#BABABA',
'rgba(228,57,57,.7)','rgba(247,154,44,.7)','rgba(255,246,11,.7)','rgba(61,217,72,.7)','rgba(57,202,228,.7)','rgba(44,49,241,.7)','rgba(122,57,228,.7)'],
Stocklegend: {}, Stocklegend: {},
types:[ types:[
{Name: '收入',ID:1}, {Name: '收入',ID:1},
...@@ -90,12 +91,13 @@ export default { ...@@ -90,12 +91,13 @@ export default {
name: '', name: '',
type:'bar', type:'bar',
itemStyle:{ itemStyle:{
barBorderRadius: 15, barBorderRadius: 5,
}, },
barWidth : 15, barWidth : 10,
data: [], data: [],
}, },
CostDatas: [] CostDatas: [],
CostStocklegend: {},
} }
}, },
mounted() { mounted() {
...@@ -107,6 +109,7 @@ export default { ...@@ -107,6 +109,7 @@ export default {
let that = this let that = this
let titles = this.costCurrent==1?this.costTitles.map(x=>{return x.Name}):this.incomeTitles.map(x=>{return x.Name}) let titles = this.costCurrent==1?this.costTitles.map(x=>{return x.Name}):this.incomeTitles.map(x=>{return x.Name})
let datas = [] let datas = []
let Newobj={};
for(let index=0;index<this.costTitles.length;index++){ for(let index=0;index<this.costTitles.length;index++){
for(let i=0;i<this.MonthList.length;i++){ for(let i=0;i<this.MonthList.length;i++){
let filter = this.CostAnalysisData.filter(z=>{return z.Month==this.MonthList[i]}) let filter = this.CostAnalysisData.filter(z=>{return z.Month==this.MonthList[i]})
...@@ -177,13 +180,18 @@ export default { ...@@ -177,13 +180,18 @@ export default {
}) })
} }
} }
if(this.msgData.LossType!='0'){
if(indexs>4){
let name=x.name;
Newobj[name]=false;
}
this.CostStocklegend=Newobj;
}else this.CostStocklegend = {}
}) })
} }
} }
} }
datas = this.CostDatas datas = this.CostDatas
console.log(datas,'------------')
let chartDom = document.getElementById('costStatisticsChart'); let chartDom = document.getElementById('costStatisticsChart');
let myChart = this.$echarts.init(chartDom); let myChart = this.$echarts.init(chartDom);
let option; let option;
...@@ -223,7 +231,7 @@ export default { ...@@ -223,7 +231,7 @@ export default {
padding: [5, 30, 20, 30] , padding: [5, 30, 20, 30] ,
type:'scroll', type:'scroll',
data: titles, data: titles,
// selected: that.Stocklegend selected: that.CostStocklegend
}, },
grid: { grid: {
left: 75, // 默认10%，给24就挺合适的。 left: 75, // 默认10%，给24就挺合适的。
...@@ -289,9 +297,9 @@ export default { ...@@ -289,9 +297,9 @@ export default {
name: element.Name, name: element.Name,
type:'bar', type:'bar',
itemStyle:{ itemStyle:{
barBorderRadius: 15, barBorderRadius: 5,
}, },
barWidth : 15, barWidth : 10,
// stack: 'Total', // stack: 'Total',
data: [], data: [],
} }
...@@ -304,10 +312,17 @@ export default { ...@@ -304,10 +312,17 @@ export default {
if(that.Current==6) obj.data.push(`${element.DetailList[j].ProfitRate.toFixed(2)}`) if(that.Current==6) obj.data.push(`${element.DetailList[j].ProfitRate.toFixed(2)}`)
} }
datas.push(obj) datas.push(obj)
if(this.msgData.LossType!='0'){
if(i>3){
let name=element.Name;
Newobj[name]=false;
}
}else{
if(i>5){ if(i>5){
let name=element.Name; let name=element.Name;
Newobj[name]=false; Newobj[name]=false;
} }
}
this.Stocklegend=Newobj; this.Stocklegend=Newobj;
} }
...@@ -468,12 +483,13 @@ export default { ...@@ -468,12 +483,13 @@ export default {
padding: 5px 0; padding: 5px 0;
} }
.titleBox{ .titleBox{
padding: 0 5px 5px 5px; padding: 10px 10px 0 10px;
} }
.row{ .row{
display: flex; display: flex;
} }
.echartsBox{ .echartsBox{
width: 100%; width: 100%;
background: #fff;
} }
</style> </style>
src/components/FinancialModule/DataAnalysis/components/packet.vue
View file @ 691c7fa2
...@@ -145,7 +145,7 @@ ...@@ -145,7 +145,7 @@
:label="title" v-for="(title,i) in MonthList" :key="i" :prop="`${i}`" :label="title" v-for="(title,i) in MonthList" :key="i" :prop="`${i}`"
min-width="120" align="center"> min-width="120" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
{{scope.row.MonthData[i].toFixed(2)}} {{scope.row.MonthData[i]}}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
......
src/components/FinancialModule/DataAnalysis/components/packetChart.vue
View file @ 691c7fa2
<template> <template>
<div style="margin-bottom: 20px;"> <div style="margin-bottom: 20px;">
<h3 class="text-center" style="margin-bottom: 5px;">出境日本线（已出团）</h3> <div class="echartsBox" v-show="show">
<div class="titleBox text-center row" style="margin-bottom: 5px;">
<h3>出境日本线（已出团）</h3>
<div style="margin-left: 20px;">
<h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">日本小包团（已出团）</h3> </div>
</div>
<div style="background: #fff;">
<div id="JapanOutChart"
:style="{width: '', height: '520px'}"></div>
</div>
</div>
<h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">日本常规团（已出团）</h3> <div class="echartsBox" v-show="show">
<div class="titleBox text-center row" style="margin-bottom: 5px;margin-top: 10px;">
<h3>日本小包团（已出团）</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="JapanPacketOutChart"
:style="{width: '', height: '520px'}"></div>
</div>
</div>
<div class="echartsBox" v-show="show">
<div class="titleBox text-center row" style="margin-bottom: 5px;margin-top: 10px;">
<h3>日本常规团（已出团）</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="JapanRoutineOutChart"
:style="{width: '', height: '520px'}"></div>
</div>
</div>
<h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">常规团毛利率分析（已出团）</h3> <div class="echartsBox">
<div class="titleBox text-center row" style="margin-bottom: 5px;margin-top: 10px;">
<h3>常规团毛利率分析（已出团）</h3>
<div style="margin-left: 20px;">
<el-tag size="small" effect="dark"
style="margin-right: 5px;cursor: pointer;"
:type="Current==item.ID?'danger':'info'" v-for="(item,index) in types" :key="item.ID"
@click="Current=item.ID,getJapanpRofitOutChart()">{{item.Name}}</el-tag>
</div>
</div>
<div style="background: #fff;">
<div id="JapanpRofitOutChart"
:style="{width: '', height: '520px'}"></div>
</div>
</div>
<h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">常规团实际利率分析（已出团）</h3> <div class="echartsBox">
<div class="titleBox text-center row" style="margin-bottom: 5px;margin-top: 10px;">
<h3>常规团实际利率分析（已出团）</h3>
<div style="margin-left: 20px;">
<el-tag size="small" effect="dark"
style="margin-right: 5px;cursor: pointer;"
:type="Current2==item.ID?'danger':'info'" v-for="(item,index) in types2" :key="item.ID"
@click="Current2=item.ID,getJapanRateOutChart()">{{item.Name}}</el-tag>
</div>
</div>
<div style="background: #fff;">
<div id="JapanRateOutChart"
:style="{width: '', height: '520px'}"></div>
</div>
</div>
<h3 class="text-center" style="margin-top: 15px;margin-bottom: 5px;">常规团房费分析（已出团）</h3> <div class="echartsBox">
<div class="titleBox text-center row" style="margin-bottom: 5px;margin-top: 10px;">
<h3>常规团房费分析（已出团）</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="JapanRoomFeeOutChart"
:style="{width: '', height: '520px'}"></div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import echarts from 'echarts'//引入echarts
export default { export default {
props:['StatisticalData'], props:['StatisticalData','msgData'],
data() { data() {
return { return {
MonthList: [],//月份列表 MonthList: [],//月份列表
...@@ -27,13 +100,21 @@ export default { ...@@ -27,13 +100,21 @@ export default {
MaoLiAnalysisData: [], MaoLiAnalysisData: [],
SJLLAnalysisData: [], SJLLAnalysisData: [],
RoomAnalysisData: [], RoomAnalysisData: [],
colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff',
'rgba(228,57,57,.9)','#F79A2C','#FFF60B','#3DD948','#39CAE4','rgba(44,49,241,.6)','rgba(122,57,228,.5)','#E65FC1','#D0B478','#BABABA',
'rgba(228,57,57,.7)','rgba(247,154,44,.7)','rgba(255,246,11,.7)','rgba(61,217,72,.7)','rgba(57,202,228,.7)','rgba(44,49,241,.7)','rgba(122,57,228,.7)'],
Current: 1,
types:[
{Name: '收入',ID:1},
{Name: '团数',ID:2},
],
Current2: 1,
types2:[
{Name: '收入',ID:1},
{Name: '团数',ID:2},
],
show: true,
} }
},
mounted() {
},
methods: {
}, },
watch: { watch: {
StatisticalData:{ StatisticalData:{
...@@ -45,58 +126,718 @@ export default { ...@@ -45,58 +126,718 @@ export default {
this.MaoLiAnalysisData = n.MaoLiAnalysisData this.MaoLiAnalysisData = n.MaoLiAnalysisData
this.SJLLAnalysisData = n.SJLLAnalysisData this.SJLLAnalysisData = n.SJLLAnalysisData
this.RoomAnalysisData = n.RoomAnalysisData this.RoomAnalysisData = n.RoomAnalysisData
this.getJapanOutChart()
this.getJapanPacketOutChart()
this.getJapanRoutineOutChart()
this.getJapanpRofitOutChart()
this.getJapanRateOutChart()
this.getJapanRoomFeeOutChart()
}, },
deep: true, deep: true,
immediate: false, immediate: false,
} }
}, },
mounted() {
},
methods: {
getJapanOutChart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.JapanAllData.forEach((x,indexs)=>{
let Name = `${x.Name.indexOf('率')==-1?x.Name:x.Name+'%'}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: false,
smooth: true,
symbolSize: 1,
data: x.MonthData // 绑定实时数据数组
}
datas.push(obj)
// if(indexs>8){
// let name=x.Name;
// Newobj[name]=false;
// }
// Stocklegend=Newobj;
})
let chartDom = document.getElementById('JapanOutChart','light');
let myChart = this.$echarts.init(chartDom);
let option
option = {
color:this.colorList,
legend: {
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [5, 30, 20, 30] ,
data: titles,
selected: Stocklegend
},
grid: {
left: 15, // 默认10%，给24就挺合适的。
top: 30, // 默认60
right: 45, // 默认10%
bottom: 70, // 默认60
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
nameTextStyle: {
fontWeight: 600,
fontSize: 18
},
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent"
}
},
axisLabel: {
textStyle: {
color: "#333333"
}
},
data: this.MonthList
},
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent",
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#969696"
}
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
}
},
series:datas
}
myChart.setOption(option,true) // echarts设置初始化选项
},
getJapanPacketOutChart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.JapanXBData.forEach((x,indexs)=>{
let Name = `${x.Name.indexOf('率')==-1?x.Name:x.Name+'%'}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: false,
smooth: true,
symbolSize: 1,
data: x.MonthData // 绑定实时数据数组
}
datas.push(obj)
// if(indexs>8){
// let name=x.Name;
// Newobj[name]=false;
// }
// Stocklegend=Newobj;
})
let chartDom = document.getElementById('JapanPacketOutChart','light');
let myChart = this.$echarts.init(chartDom);
let option
option = {
color:this.colorList,
legend: {
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [5, 30, 20, 30] ,
data: titles,
selected: Stocklegend
},
grid: {
left: 15, // 默认10%，给24就挺合适的。
top: 30, // 默认60
right: 45, // 默认10%
bottom: 70, // 默认60
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
nameTextStyle: {
fontWeight: 600,
fontSize: 18
},
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent"
}
},
axisLabel: {
textStyle: {
color: "#333333"
}
},
data: this.MonthList
},
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent",
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#969696"
}
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
}
},
series:datas
}
myChart.setOption(option,true) // echarts设置初始化选项
},
getJapanRoutineOutChart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.JapanSPData.forEach((x,indexs)=>{
let Name = `${x.Name.indexOf('率')==-1?x.Name:x.Name+'%'}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: false,
smooth: true,
symbolSize: 1,
data: x.MonthData // 绑定实时数据数组
}
datas.push(obj)
if(indexs>14){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('JapanRoutineOutChart','light');
let myChart = this.$echarts.init(chartDom);
let option
option = {
color:this.colorList,
legend: {
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [5, 30, 20, 30] ,
data: titles,
selected: Stocklegend
},
grid: {
left: 15, // 默认10%，给24就挺合适的。
top: 30, // 默认60
right: 45, // 默认10%
bottom: 70, // 默认60
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
nameTextStyle: {
fontWeight: 600,
fontSize: 18
},
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent"
}
},
axisLabel: {
textStyle: {
color: "#333333"
}
},
data: this.MonthList
},
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent",
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#969696"
}
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
}
},
series:datas
}
myChart.setOption(option,true) // echarts设置初始化选项
},
getJapanpRofitOutChart(){
let that = this
let titles = this.MaoLiAnalysisData.map(x=>{return x.Name})
let datas = []
let Stocklegend = {}
let Newobj={};
for (let i = 0; i < this.MaoLiAnalysisData.length; i++) {
const element = this.MaoLiAnalysisData[i];
let obj = {
name: element.Name,
type:'bar',
itemStyle:{
barBorderRadius: 5,
},
barWidth : 10,
// stack: 'Total',
data: [],
}
for(let j=0;j<element.MonthData.length;j++){
if(that.Current==1) obj.data.push(`${element.MonthData[j].Income.toFixed(2)}`)
if(that.Current==2) obj.data.push(`${element.MonthData[j].TravelNum}`)
}
datas.push(obj)
if(this.msgData.LossType!='0'){
if(i>3){
let name=element.Name;
Newobj[name]=false;
}
}else{
if(i>5){
let name=element.Name;
Newobj[name]=false;
}
}
Stocklegend=Newobj;
}
let chartDom = document.getElementById('JapanpRofitOutChart');
let myChart = this.$echarts.init(chartDom);
let option;
option = {
color:that.colorList,
tooltip : {
backgroundColor:'transparent',
trigger: 'item',
axisPointer: {
type: 'none',
label: {
// backgroundColor: '#6a7985'
}
},
position: function (point, params, dom, rect, size) {
return [point[0]-50, point[1]-dom.offsetHeight];
  },
formatter: function(params) {
var res = `<div style="background:${params.color};position:relative;padding:6px 10px;border-radius:8px;">
${params.seriesName}:${params.data}
<div style="position: absolute;bottom: -8px;left: 35%;width:0;
height:0;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid ${params.color};">
</div>
<div>`
return res;
}
},
legend: {
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [5, 30, 20, 30] ,
type:'scroll',
data: titles,
selected: Stocklegend
},
grid: {
left: 75, // 默认10%，给24就挺合适的。
top: 30, // 默认60
right: 15, // 默认10%
bottom: 70, // 默认60
},
xAxis : [
{
type : 'category',
data :this.MonthList,
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent"
}
},
axisLabel: {
textStyle: {
color: "#333333"
}
},
}
],
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent",
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#969696"
}
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
// dataZoom: [
// {
// type: 'inside'
// }
// ],
series:datas
};
myChart.setOption(option,true)
},
getJapanRateOutChart(){
let that = this
let titles = this.SJLLAnalysisData.map(x=>{return x.Name})
let datas = []
let Stocklegend = {}
let Newobj={};
for (let i = 0; i < this.SJLLAnalysisData.length; i++) {
const element = this.SJLLAnalysisData[i];
let obj = {
name: element.Name,
type:'bar',
itemStyle:{
barBorderRadius: 5,
},
barWidth : 10,
// stack: 'Total',
data: [],
}
for(let j=0;j<element.MonthData.length;j++){
if(that.Current2==1) obj.data.push(`${element.MonthData[j].Income.toFixed(2)}`)
if(that.Current2==2) obj.data.push(`${element.MonthData[j].TravelNum}`)
}
datas.push(obj)
if(this.msgData.LossType!='0'){
if(i>3){
let name=element.Name;
Newobj[name]=false;
}
}else{
if(i>5){
let name=element.Name;
Newobj[name]=false;
}
}
Stocklegend=Newobj;
}
let chartDom = document.getElementById('JapanRateOutChart');
let myChart = this.$echarts.init(chartDom);
let option;
option = {
color:that.colorList,
tooltip : {
backgroundColor:'transparent',
trigger: 'item',
axisPointer: {
type: 'none',
label: {
// backgroundColor: '#6a7985'
}
},
position: function (point, params, dom, rect, size) {
return [point[0]-50, point[1]-dom.offsetHeight];
  },
formatter: function(params) {
var res = `<div style="background:${params.color};position:relative;padding:6px 10px;border-radius:8px;">
${params.seriesName}:${params.data}
<div style="position: absolute;bottom: -8px;left: 35%;width:0;
height:0;
border-left:8px solid transparent;
border-right:8px solid transparent;
border-top:8px solid ${params.color};">
</div>
<div>`
return res;
}
},
legend: {
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [5, 30, 20, 30] ,
type:'scroll',
data: titles,
selected: Stocklegend
},
grid: {
left: 75, // 默认10%，给24就挺合适的。
top: 30, // 默认60
right: 15, // 默认10%
bottom: 70, // 默认60
},
xAxis : [
{
type : 'category',
data :this.MonthList,
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent"
}
},
axisLabel: {
textStyle: {
color: "#333333"
}
},
}
],
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent",
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#969696"
}
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
// dataZoom: [
// {
// type: 'inside'
// }
// ],
series:datas
};
myChart.setOption(option,true)
},
getJapanRoomFeeOutChart(){
let datas = []
let Stocklegend = {}
let Newobj = {}
this.RoomAnalysisData.forEach((x,indexs)=>{
let obj = {
name: x.Name,
type: 'line',
showSymbol: false,
smooth: true,
symbolSize: 1,
data: x.MonthData // 绑定实时数据数组
}
datas.push(obj)
if(indexs>8){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('JapanRoomFeeOutChart','light');
let myChart = this.$echarts.init(chartDom);
let option
option = {
color:this.colorList,
legend: {
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [5, 30, 20, 30] ,
data: this.RoomAnalysisData.map(x=>{return x.Name}),
selected: Stocklegend
},
grid: {
left: 15, // 默认10%，给24就挺合适的。
top: 30, // 默认60
right: 45, // 默认10%
bottom: 70, // 默认60
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
nameTextStyle: {
fontWeight: 600,
fontSize: 18
},
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent"
}
},
axisLabel: {
textStyle: {
color: "#333333"
}
},
data: this.MonthList
},
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent",
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#969696"
}
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
}
},
series:datas
}
myChart.setOption(option,true) // echarts设置初始化选项
},
}
} }
</script> </script>
<style scoped> <style scoped>
/deep/.LineAnalysisDataBJ3 tr th{
background: #F5F7FA; #myChart{
} width: 95%;
/deep/.el-table.LineAnalysisDataBJ tr:first-child th{ height: 400px;
background: #fff !important;
}
/deep/.el-table.LineAnalysisDataBJ tr:first-child th:first-child{
background: #F5F7FA !important;
}
/deep/.el-table.LineAnalysisDataBJ tr:nth-child(2) th:first-child{
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ tr td:first-child{
background: #F5F7FA !important;
}
/deep/.el-table.LineAnalysisDataBJ tr th{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
/deep/.el-table.LineAnalysisDataBJ2 tr th{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
/deep/.el-table.LineAnalysisDataBJ3 tr th{
height: 20px;
line-height: 20px;
padding: 5px 0;
} }
/deep/.el-table.LineAnalysisDataBJ tr td{ .titleBox{
height: 20px; padding: 10px 10px 0 10px;
line-height: 20px;
padding: 5px 0;
} }
/deep/.el-table.LineAnalysisDataBJ2 tr td{ .row{
height: 20px; display: flex;
line-height: 20px;
padding: 5px 0;
} }
/deep/.el-table.LineAnalysisDataBJ3 tr td{ .echartsBox{
height: 20px; width: 100%;
line-height: 20px; background: #fff;
padding: 5px 0;
} }
</style> </style>
src/components/FinancialModule/DataAnalysis/index.vue
View file @ 691c7fa2
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
</el-col> </el-col>
<el-col :span="2" v-if="msg.Type!=3"> <el-col :span="2" v-if="msg.Type!=3">
<el-form-item label="季度汇总"> <el-form-item label="季度汇总">
<el-checkbox v-model="msg.LossType" true-label="1" false-label="0"></el-checkbox> <el-checkbox v-model="msg.LossType" true-label="1" false-label="0" @change="getStatement"></el-checkbox>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
......
src/components/FinancialModule/DataAnalysis/indexChart.vue
View file @ 691c7fa2
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
</el-col> </el-col>
<el-col :span="2" v-if="msg.Type!=3"> <el-col :span="2" v-if="msg.Type!=3">
<el-form-item label="季度汇总"> <el-form-item label="季度汇总">
<el-checkbox v-model="msg.LossType" true-label="1" false-label="0"></el-checkbox> <el-checkbox v-model="msg.LossType" true-label="1" false-label="0" @change="getStatement"></el-checkbox>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
...@@ -115,9 +115,9 @@ ...@@ -115,9 +115,9 @@
</ul> </ul>
</div> </div>
<div v-loading="loading" style="height: 78%;overflow: auto;"> <div v-loading="loading" style="height: 78%;overflow: auto;">
<LinesChart v-if="activeName=='1'" :StatisticalData="StatisticalData"></LinesChart> <LinesChart v-if="activeName=='1'" :msgData="msg" :StatisticalData="StatisticalData"></LinesChart>
<CorporationsChart v-if="activeName=='2'" :StatisticalData="StatisticalData"></CorporationsChart> <CorporationsChart v-if="activeName=='2'" :msgData="msg" :StatisticalData="StatisticalData"></CorporationsChart>
<PacketsChart v-if="activeName=='3'" :StatisticalData="StatisticalData"></PacketsChart> <PacketsChart v-if="activeName=='3'" :msgData="msg" :StatisticalData="StatisticalData"></PacketsChart>
</div> </div>
</div> </div>
</template> </template>
...@@ -139,7 +139,7 @@ export default { ...@@ -139,7 +139,7 @@ export default {
OutBranchId: -1, OutBranchId: -1,
StandardCurrencyId:0, StandardCurrencyId:0,
LineId: 0, LineId: 0,
Type: '2', Type: '1',
DataType:'-1', DataType:'-1',
LossType:'0' LossType:'0'
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment