Skip to content

S
SuperMan
Commit 23c3bec4 authored by youjie's avatar youjie
Browse files
Options

no message

parent 130d1fa0
Hide whitespace changes
Inline Side-by-side
Showing with 157 additions and 101 deletions
src/components/FinancialModule/DataAnalysis/components/Echart/ChangeProportion.vue
View file @ 23c3bec4
<template> <template>
<div class="echartsBox"> <div class="echartsBox">
<div class="titleBox text-center row"> <div class="titleBox text-center row">
<h3>各费用项收入占比变化趋势图</h3> <h3>各费用项收入占比变化趋势图 %</h3>
<div style="margin-left: 20px;"> <div style="margin-left: 20px;">
...@@ -26,9 +26,27 @@ export default { ...@@ -26,9 +26,27 @@ export default {
MaoLiAnalysisData: [], MaoLiAnalysisData: [],
SJLLAnalysisData: [], SJLLAnalysisData: [],
RoomAnalysisData: [], RoomAnalysisData: [],
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',
'rgba(228,57,57,.9)','rgba(248,126,46,1)','rgba(252,196,34,.7)','#3DD948','#39CAE4','rgba(44,49,241,.6)','rgba(122,57,228,.5)','#E65FC1','#D0B478','#BABABA', 'rgba(228,57,57,.9)','rgba(248,126,46,1)','rgba(252,196,34,.7)','#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)'], '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)'],
CostDataObj: {
name: '',
type:'line',
showSymbol: true,
smooth: true,
symbolSize: 1,
data: [],
},
CostDatas: [],
incomeTitles:[
{Name: '机票/收入',value:'JiPiaoRate',ID:2},
{Name: '房费/收入',value:'RommFeeRate',ID:4},
{Name: '车费/收入',value:'CarFeeRate',ID:6},
{Name: '餐费/收入',value:'MealFeeRate',ID:8},
{Name: '门票/收入',value:'TicketFeeRate',ID:10},
{Name: '签证/收入',value:'VisaFeeRate',ID:12},
],
} }
}, },
watch: { watch: {
...@@ -41,6 +59,7 @@ export default { ...@@ -41,6 +59,7 @@ 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.CostAnalysisData = n.CostAnalysisData
this.getEchart() this.getEchart()
}, },
deep: true, deep: true,
...@@ -52,111 +71,142 @@ export default { ...@@ -52,111 +71,142 @@ export default {
}, },
methods: { methods: {
getEchart(){ getEchart(){
this.inCostDatas()
let that = this
let titles = this.incomeTitles.map(x=>{return x.Name})
let datas = [] let datas = []
let titles = []
let Stocklegend = {} let Stocklegend = {}
let Newobj = {} let Newobj={};
this.JapanSPData.forEach((x,indexs)=>{ for(let index=0;index<this.incomeTitles.length;index++){
let Name = `${x.Name.indexOf('率')==-1?x.Name:x.Name+'%'}` for(let i=0;i<this.MonthList.length;i++){
titles.push(Name) let filter = this.CostAnalysisData.filter(z=>{return z.Month==this.MonthList[i]})
let obj = { if(filter){
name: Name, this.CostDatas.forEach((x,indexs)=>{
type: 'line', if(indexs==0){
showSymbol: true, x.name = '机票/收入'
smooth: true, this.CostAnalysisData.forEach(z=>{
symbolSize: 1, x.data.push(z['JiPiaoRate'])
data: x.MonthData // 绑定实时数据数组 })
} }else if(indexs==1){
datas.push(obj) x.name = '房费/收入'
if(indexs>8){ this.CostAnalysisData.forEach(z=>{
let name=x.Name; x.data.push(z['RoomFeeRate'])
Newobj[name]=false; })
} }else if(indexs==3){
Stocklegend=Newobj; x.name = '车费/收入'
}) this.CostAnalysisData.forEach(z=>{
let chartDom = document.getElementById('PropMyEchart','light'); x.data.push(z['CarFeeRate'])
})
}else if(indexs==4){
x.name = '餐费/收入'
this.CostAnalysisData.forEach(z=>{
x.data.push(z['MealFeeRate'])
})
}else if(indexs==5){
x.name = '门票/收入'
this.CostAnalysisData.forEach(z=>{
x.data.push(z['TicketFeeRate'])
})
}else if(indexs==6){
x.name = '签证/收入'
this.CostAnalysisData.forEach(z=>{
x.data.push(z['VisaFeeRate'])
})
}
// if(indexs>4){
// let name=x.name;
// Newobj[name]=false;
// }
// Stocklegend=Newobj;
})
}
}
}
datas = this.CostDatas
let chartDom = document.getElementById('PropMyEchart');
let myChart = this.$echarts.init(chartDom); let myChart = this.$echarts.init(chartDom);
let option let option;
option = { option = {
color:this.colorList, color:that.colorList,
legend: { tooltip : {
x:'left', trigger: 'axis',
y:'bottom', axisPointer: {
type:'scroll', lineStyle: {
icon: "circle", type: 'dashed',
padding: [5, 30, 20, 30] , color: "#ddd"
data: titles, }
selected: Stocklegend }
}, },
grid: { legend: {
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [5, 30, 20, 30] ,
type:'scroll',
data: titles,
selected: Stocklegend
},
grid: {
left: 15, // 默认10%，给24就挺合适的。 left: 15, // 默认10%，给24就挺合适的。
top: 30, // 默认60 top: 30, // 默认60
right: 45, // 默认10% right: 15, // 默认10%
bottom: 70, // 默认60 bottom: 70, // 默认60
containLabel: true containLabel: true
}, },
xAxis: { xAxis : [
type: 'category', {
boundaryGap: false, type: 'category',
nameTextStyle: { boundaryGap: false,
fontWeight: 600, data:this.MonthList,
fontSize: 18 axisLine: {
}, lineStyle: {
axisLine: { // 设置x轴颜色
lineStyle: { color: "transparent"
// 设置x轴颜色 }
color: "transparent" },
} axisLabel: {
}, textStyle: {
axisLabel: { color: "#333333"
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',
} }
},
} }
} ],
], yAxis : [
tooltip: { {
trigger: 'axis', type : 'value',
axisPointer: { axisLine: {
lineStyle: { lineStyle: {
type: 'dashed', // 设置x轴颜色
color: "#ddd" color: "transparent",
} width: 1,
} }
}, },
dataZoom: [ axisLabel: {
{ textStyle: {
type: 'inside' color: "#969696"
} }
], },
series:datas splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
series:datas
};
myChart.setOption(option,true)
},
inCostDatas() {
this.CostDatas = []
for(let i=0;i<7;i++){
this.CostDatas.push(JSON.parse(JSON.stringify(this.CostDataObj)))
} }
myChart.setOption(option,true)
}, },
} }
......
src/components/FinancialModule/DataAnalysis/components/Echart/IncomeShare.vue
View file @ 23c3bec4
...@@ -71,7 +71,9 @@ export default { ...@@ -71,7 +71,9 @@ export default {
let Stocklegend = {} let Stocklegend = {}
let Newobj = {} let Newobj = {}
this.LineAnalysisData.forEach((x,indexs)=>{ this.LineAnalysisData.forEach((x,indexs)=>{
let Name = `${x.Name}` let Name = `${x.Name}`
if(Name!='合计'){
titles.push(Name) titles.push(Name)
let newDetailList = [] let newDetailList = []
...@@ -91,11 +93,13 @@ export default { ...@@ -91,11 +93,13 @@ export default {
} }
// if(indexs>3){ // if(indexs>3){
// let name=x.Name; // let name=x.Name;
// Newobj[name]=false; // Newobj[name]=false;
// } // }
// Stocklegend=Newobj; // Stocklegend=Newobj;
}
}) })
let chartDom = document.getElementById('ShareMyEchart'); let chartDom = document.getElementById('ShareMyEchart');
let myChart = this.$echarts.init(chartDom); let myChart = this.$echarts.init(chartDom);
...@@ -106,9 +110,11 @@ export default { ...@@ -106,9 +110,11 @@ export default {
trigger: 'item' trigger: 'item'
}, },
legend: { legend: {
orient: 'vertical', bottom:'bottom',
left: 'left', left: 'left',
padding: [25, 30, 20, 20] , type:'scroll',
icon: "circle",
padding: [25, 20, 20, 20] ,
selected: Stocklegend selected: Stocklegend
}, },
series: datas series: datas
......
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