<style>
@import url('../../assets/css/domestic/OrderDataStati.css');
</style>
<template>
<div class="page_OrderDataStati">
<div class="page_OrderDataStati_top">
<div class="_tit">
<div>
<span class="_tit_name">利润走势图（月）</span>
<span class="_fangkuai"> <i class=""></i> 实际利润</span>
<span class="_fangkuai _fangkuai2"> <i class=""></i> 预期利润</span>
</div>
<div class="_all_lirun">
<span>总预期利润 <i>¥{{allProfit}}</i></span>
<span class="margin_left_15">总实际利润 <i>¥{{allRealProfit}}</i></span>
</div>
<div class="_input">
<el-select v-model="Year" size="mini" @change="getDataMonth">
<el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
</el-select>
<el-select v-model="Month" size="mini" @change="getDataMonth" class="_month_input">
<el-option v-for="item in MonthList" :key="item" :label="item" :value="item"></el-option>
</el-select>
</div>
</div>
<div id="chartsMap" :style="{'height':clientHeight+'px','width':'100%'}"></div>
</div>
<div class="page_OrderDataStati_bottom">
<div class="_tit">
<div>
<span class="_tit_name">利润走势图（年）</span>
<span class="_fangkuai"> <i class=""></i> 实际利润</span>
<span class="_fangkuai _fangkuai2"> <i class=""></i> 预期利润</span>
</div>
<div class="_all_lirun">
<span>总预期利润 <i>¥{{allProfitYear}}</i></span>
<span class="margin_left_15">总实际利润 <i>¥{{allRealProfitYear}}</i></span>
</div>
<div class="_input">
<el-select v-model="YearS" size="mini" @change="getDataYear">
<el-option v-for="item in yearList" :key="item" :label="item" :value="item"></el-option>
</el-select>
<el-select v-model="MonthS" size="mini" @change="getDataMonth" class="_month_input _visibility">
<el-option v-for="item in MonthList" :key="item" :label="item" :value="item"></el-option>
</el-select>
</div>
</div>
<div id="chartsMapYear" :style="{'height':clientHeight+'px','width':'100%'}"></div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
Year:new Date().getFullYear(),
Month:new Date().getMonth()+1,
date:new Date().getDate(),
YearS:new Date().getFullYear(),
MonthS:'',
clientHeight:'',
yearList:[],
MonthList:[],
dayList:[],
allRealProfit:0,
allProfit:0,
allRealProfitYear:0,
allProfitYear:0,
}
},created(){
this.clientHeight = (document.documentElement.clientHeight - 300)/2;
let count = this.Year-(this.Year-8);
this.yearList.push(2018);
for(let i = 1;i<=count;i++){
this.yearList.push(this.Year-i);
}
},mounted(){
this.getDataMonth();
this.getDataYear();
},methods:{
getDataMonth(){
this.dayList =[];
let msg = {
Year:this.Year,
Month:this.Month
}
this.apipost('Domestic_Ticket_post_GetProfitList',msg,r=>{
if(r.data.resultCode==1){
let data = r.data.data;
let ProfitList = [];
let RealProfitList = [];
let allProfit = 0;
let allRealProfit = 0;
data.forEach(y=>{
this.dayList.push(y.Day);
ProfitList.push(y.Profit);
RealProfitList.push(y.RealProfit);
allProfit = allProfit + y.Profit;
allRealProfit = allRealProfit + y.RealProfit;
})
this.allProfit = allProfit;
this.allRealProfit = allRealProfit;
this.chartsMap(ProfitList,RealProfitList);
}else{}
},null)
},
chartsMap(ProfitList,RealProfitList){ // 画饼
var then = this;
let myChart = this.$echarts.init(document.getElementById('chartsMap'));
myChart.setOption({
title: {
left: 'left',
textStyle:{
fontWeight:'bold',
fontSize:14,
color:'#333333',
height:'30px'
},
padding: [
20, // 上
20, // 右
20, // 下
20, // 左
]
},
backgroundColor: '#fff',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
animation: false,
label: {
backgroundColor: '#ccc',
borderColor: '#aaa',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
textStyle: {
color: '#222'
}
}
}
},
xAxis: {
type: 'category',
axisLine: {
show: false,
lineStyle:{
width:1
}
},
axisLabel:{},
axisTick:false,
data: then.dayList,
},
grid: {
x:25,
y:60,
x2:5,
y2:20,
containLabel: true
},
yAxis: {
type: 'category',
data:['10','20','30','40','50','60','70','80','90','100'],
axisLine: {show: false},
axisTick:false,
splitLine:{
show:false
},
scale: true,
minInterval:1,
type: 'value',
axisLabel:{formatter:'{value} CNY'}
},
series: [
{
name: '预期利润',
type: 'line',
smooth:false,
data:ProfitList,
lineStyle:{
width:2,
color:'#0099F7',
},
itemStyle:{
borderWidth:2,
color:'#0099F7'
},
symbol:'none',
areaStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color:'rgba(230,230,230,0)' // 0% 处的颜色
}, {
offset: 1, color:'rgba(230,230,230,0)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
{
name: '实际利润',
type: 'line',
smooth:false,
data: RealProfitList,
lineStyle:{
width:2,
color:'#32DBBE',
},
itemStyle:{
borderWidth:2,
color:'#32DBBE'
},
symbol:'none',
areaStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color:'rgba(230,230,230,0)' // 0% 处的颜色
}, {
offset: 1, color:'rgba(230,230,230,0)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
]
},true)
},
getDataYear(){
this.MonthList=[];
let msg = {
Year:this.YearS,
Month:''
}
this.apipost('Domestic_Ticket_post_GetProfitList',msg,r=>{
if(r.data.resultCode==1){
let data = r.data.data;
let ProfitList = [];
let RealProfitList = [];
let allProfit = 0;
let allRealProfit = 0;
data.forEach(y=>{
this.MonthList.push(y.Month);
ProfitList.push(y.Profit);
RealProfitList.push(y.RealProfit);
allProfit = allProfit + y.Profit;
allRealProfit = allRealProfit + y.RealProfit;
})
this.allProfitYear = allProfit;
this.allRealProfitYear = allRealProfit;
this.chartsMap2(ProfitList,RealProfitList);
}else{
}
},null)
},
chartsMap2(ProfitList,RealProfitList){ // 画饼
var then = this;
let myChart = this.$echarts.init(document.getElementById('chartsMapYear'));
myChart.setOption({
title: {
left: 'left',
textStyle:{
fontWeight:'bold',
fontSize:14,
color:'#333333',
height:'30px'
},
padding: [
20, // 上
20, // 右
20, // 下
20, // 左
]
},
backgroundColor: '#fff',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
animation: false,
label: {
backgroundColor: '#ccc',
borderColor: '#aaa',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
textStyle: {
color: '#222'
}
}
}
},
xAxis: {
type: 'category',
axisLine: {
show: false,
lineStyle:{
width:1
}
},
axisLabel:{},
axisTick:false,
data: then.MonthList,
},
grid: {
x:25,
y:60,
x2:5,
y2:20,
containLabel: true
},
yAxis: {
type: 'category',
axisLine: {show: false},
axisTick:false,
splitLine:{
show:false
},
scale: true,
minInterval:1,
type: 'value',
axisLabel:{formatter:'{value} CNY',} ,
},
series: [
{
name: '预期利润',
type: 'line',
smooth:false,
data:ProfitList,
lineStyle:{
width:2,
color:'#0099F7',
},
itemStyle:{
borderWidth:2,
color:'#0099F7'
},
symbol:'none',
areaStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color:'rgba(230,230,230,0)' // 0% 处的颜色
}, {
offset: 1, color:'rgba(230,230,230,0)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
},
{
name: '实际利润',
type: 'line',
smooth:false,
data: RealProfitList,
lineStyle:{
width:2,
color:'#32DBBE',
},
itemStyle:{
borderWidth:2,
color:'#32DBBE'
},
symbol:'none',
areaStyle:{
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color:'rgba(230,230,230,0)' // 0% 处的颜色
}, {
offset: 1, color:'rgba(230,230,230,0)' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
]
},true)
},
}
}
</script>