Commit a1db7742 authored by 黄奎's avatar 黄奎
parents 280498e3 3fd47bd9
<template>
<div style="margin-bottom: 20px; ">
<div class="echartsBox">
<div class="titleBox text-center row" style="margin-bottom: 5px;">
<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 BranchTitles" :key="item.ID"
@click="Current=item.ID,BranchChart()">{{item.Name}}</el-tag>
</div>
</div>
<div style="background: #fff;">
<div id="BranchAnalysisChart"
:style="{width: '', height: '520px'}"></div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['StatisticalData','msgData'],
data() {
return {
MonthList: [],//月份列表
BranchAnalysisData: [],
colorList:['#089bab','#FFA171','#72b8ff','#ff9cc6','#7b78ff','#28cc90','#ee8fff','#5cf2ff','#ff9a00','#4fc4f7','#738eff','#b0edff',
'#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:[
{Name: '收入',ID:1},
{Name: '收入占比 %',ID:2},
{Name: '毛利',ID:3},
{Name: '毛利率 %',ID:4},
{Name: '实际利润',ID:5},
{Name: '实际利率 %',ID:6},
],
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() {
},
methods: {
BranchChart(){
this.inBranchDatas()
let that = this
let titles = this.BranchAnalysisData.map(x=>{return x.Name})
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 myChart = this.$echarts.init(chartDom);
// echarts.init(chartDom, 'dark');
let option;
option = {
color:that.colorList,
tooltip: {
trigger: 'axis',
position: function (point, params, dom, rect, size) {
return [point[0]-50, point[1]-dom.offsetHeight];
},
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
}
},
legend: {
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [5, 30, 20, 30] ,
data: titles,
selected: that.Stocklegend,
},
grid: {
left: 15, // 默认10%,给24就挺合适的。
top: 30, // 默认60
right: 45, // 默认10%
bottom: 70, // 默认60
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap: false,
data :this.MonthList,
axisLine: {
lineStyle: {
color: "transparent"
}
},
axisLabel: {
textStyle: {
color: "#333333"
}
}
}
],
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
color: "transparent",
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#969696"
}
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed',
color:'#EEEEEE',
}
}
}
],
series: datas
};
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: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.BranchAnalysisData = n.BranchAnalysisData
this.BranchChart()
},
deep: true,
immediate: false,
}
},
}
</script>
<style scoped>
/deep/.LineAnalysisDataBJ tr td:nth-child(1n){
background: #F5F7FA;
}
/deep/.LineAnalysisDataBJ tr td:nth-child(2n){
background: #fff;
}
/deep/.LineAnalysisDataBJ tr th{
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ tr:first-child th:first-child{
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ tr:nth-child(2) th:nth-child(1n){
/* background: #fff; */
}
/deep/.el-table.LineAnalysisDataBJ tr:nth-child(2) th:nth-child(2n){
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ tr:first-child th{
background: #fff;
}
/deep/.el-table.LineAnalysisDataBJ2 tr:first-child th:nth-child(1n){
background: #F5F7FA;
}
/deep/.el-table.LineAnalysisDataBJ2 tr:first-child th:nth-child(2n){
background: #fff;
}
/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.LineAnalysisDataBJ tr td{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
/deep/.el-table.LineAnalysisDataBJ2 tr td{
height: 20px;
line-height: 20px;
padding: 5px 0;
}
.titleBox{
padding: 10px 10px 0 10px;
}
.row{
display: flex;
}
.echartsBox{
width: 100%;
background: #fff;
}
</style>
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度实际利润变化趋势图(折线图)</h3>
<h3>人均车资变化趋势图</h3>
<div style="margin-left: 20px;">
......@@ -16,12 +16,16 @@
<script>
export default {
props:['msg','StatisticalData'],
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
LineAnalysisData: [],//各线路统计
CostAnalysisData: [],//各成本统计
JapanAllData: [],
JapanXBData: [],
JapanSPData: [],
MaoLiAnalysisData: [],
SJLLAnalysisData: [],
RoomAnalysisData: [],
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,.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)'],
......@@ -36,10 +40,11 @@ export default {
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.LineAnalysisData = n.LineAnalysisData//各线路统计
this.CostAnalysisData = n.CostAnalysisData//各成本统计
this.MonthList = n.MonthQuarterList//月份列表
this.ShopData = n.ShopData
this.LeaderRankList = n.LeaderRankList
this.GuideRankList = n.GuideRankList
this.CommissionRateList = n.CommissionRateList
this.getEchart()
},
deep: true,
......@@ -59,7 +64,7 @@ export default {
let titles = []
let Stocklegend = {}
let Newobj = {}
this.LineAnalysisData.forEach((x,indexs)=>{
this.CommissionRateList.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
......@@ -71,12 +76,12 @@ export default {
label: {
show: true,
position: 'top', // 在顶部显示
formatter: '{c}w' // 格式化金额,{c} 代表数据值
formatter: '{c}k' // 格式化金额,{c} 代表数据值
},
data: x.DetailList.map(y=>{return (y.Profit/10000).toFixed(2)}) // 绑定实时数据数组
data: [(x.Commission/1000).toFixed(2)]
}
datas.push(obj)
if(indexs>10){
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
......@@ -137,7 +142,7 @@ export default {
textStyle: {
color: "#969696"
},
formatter: '{value}w',
formatter: '{value}k',
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
......@@ -156,7 +161,7 @@ export default {
type: 'dashed',
color: "#ddd"
}
}
},
},
dataZoom: [
{
......
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>收入变化趋势图</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="myEchart" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
ShopData: [],
LeaderRankList: [],
GuideRankList: [],
CommissionRateList: [],
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,.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)'],
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthQuarterList//月份列表
this.ShopData = n.ShopData
this.LeaderRankList = n.LeaderRankList
this.GuideRankList = n.GuideRankList
this.CommissionRateList = n.CommissionRateList
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
console.log(this.ShopData,'=====')
this.ShopData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
formatter: '{c}w' // 格式化金额,{c} 代表数据值
},
data: x.DetailList.map(x=>{ return (x.TotalMoney/10000).toFixed(2) }) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('myEchart','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"
},
formatter: '{value}w',
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
},
},
dataZoom: [
{
type: 'inside',
disabled: true
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
<template>
<div class="echartsBox">
<div class="titleBox" style="position: relative;">
<h3>月度收入占比 %</h3>
<div style="margin-left: 20px;position: absolute;top: 5px;left: 140px;">
<el-select v-model="CurrentMonth" @change="getEchart"
style="width: 120px;" size="small">
<el-option
v-for="item in MonthList"
:label="item"
:value="item"
:key="item"
></el-option>
</el-select>
<div class="titleBox row">
<h3>团数变化趋势图</h3>
<div style="margin-left: 20px;">
</div>
</div>
......@@ -24,16 +16,19 @@
<script>
export default {
props:['msg','StatisticalData'],
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
LineAnalysisDataHZ: [],//各线路统计
CostAnalysisData: [],//各成本统计
JapanAllData: [],
JapanXBData: [],
JapanSPData: [],
MaoLiAnalysisData: [],
SJLLAnalysisData: [],
RoomAnalysisData: [],
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,.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)'],
CurrentMonth: null
}
},
created() {
......@@ -45,10 +40,11 @@ export default {
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.LineAnalysisDataHZ = n.LineAnalysisDataHZ//各线路统计
this.CostAnalysisData = n.CostAnalysisData//各成本统计
this.CurrentMonth = this.MonthList[this.MonthList.length-1]
this.MonthList = n.MonthQuarterList//月份列表
this.ShopData = n.ShopData
this.LeaderRankList = n.LeaderRankList
this.GuideRankList = n.GuideRankList
this.CommissionRateList = n.CommissionRateList
this.getEchart()
},
deep: true,
......@@ -64,70 +60,116 @@ export default {
location.reload()
},
getEchart(){
let datas = [{
name: this.CurrentMonth,
type: 'pie',
radius: '50%',
data: [], // 绑定实时数据数组
emphasis: {
itemStyle: {
shadowBlur: 5,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.LineAnalysisDataHZ.forEach((x,indexs)=>{
this.LeaderRankList.forEach((x,indexs)=>{
let Name = `${x.Name}`
if(Name!='合计'){
titles.push(Name)
let newDetailList = []
x.DetailList.forEach(y=>{
if(y.Month==this.CurrentMonth) {
newDetailList.push(y)
}
})
if(newDetailList.length>0){
newDetailList.forEach((y,index)=>{
datas[0].data.push({
value: y.IncomeRate,
name: x.Name,
})
})
}
// if(indexs>3){
// let name=x.Name;
// Newobj[name]=false;
// }
// Stocklegend=Newobj;
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
formatter: '{c}' // 格式化金额,{c} 代表数据值
},
data: [x.TotalMoney]
}
datas.push(obj)
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('ShareMyEchart');
let chartDom = document.getElementById('ShareMyEchart','light');
let myChart = this.$echarts.init(chartDom);
let option
option = {
color:this.colorList,
tooltip: {
trigger: 'item'
},
legend: {
bottom:'bottom',
left: 'left',
x:'left',
y:'bottom',
type:'scroll',
icon: "circle",
padding: [25, 20, 20, 20] ,
selected: Stocklegend
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
},
series: datas
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "transparent",
width: 1,
}
},
axisLabel: {
textStyle: {
color: "#969696"
},
formatter: '{value}',
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
},
},
dataZoom: [
{
type: 'inside',
disabled: true
}
],
series:datas
}
myChart.setOption(option,true)
......
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度毛利变化趋势图(折线图)</h3>
<h3>人均机票变化趋势图</h3>
<div style="margin-left: 20px;">
......@@ -16,12 +16,16 @@
<script>
export default {
props:['msg','StatisticalData'],
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
LineAnalysisData: [],//各线路统计
CostAnalysisData: [],//各成本统计
JapanAllData: [],
JapanXBData: [],
JapanSPData: [],
MaoLiAnalysisData: [],
SJLLAnalysisData: [],
RoomAnalysisData: [],
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,.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)'],
......@@ -36,10 +40,11 @@ export default {
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.LineAnalysisData = n.LineAnalysisData//各线路统计
this.CostAnalysisData = n.CostAnalysisData//各成本统计
this.MonthList = n.MonthQuarterList//月份列表
this.ShopData = n.ShopData
this.LeaderRankList = n.LeaderRankList
this.GuideRankList = n.GuideRankList
this.CommissionRateList = n.CommissionRateList
this.getEchart()
},
deep: true,
......@@ -59,24 +64,24 @@ export default {
let titles = []
let Stocklegend = {}
let Newobj = {}
this.LineAnalysisData.forEach((x,indexs)=>{
this.GuideRankList.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
formatter: '{c}w' // 格式化金额,{c} 代表数据值
formatter: '{c}k' // 格式化金额,{c} 代表数据值
},
data: x.DetailList.map(y=>{return (y.MaoLi/10000).toFixed(2)}) // 绑定实时数据数组
data: [(x.TotalMoney/1000).toFixed(2)]
}
datas.push(obj)
if(indexs>10){
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
......@@ -137,7 +142,7 @@ export default {
textStyle: {
color: "#969696"
},
formatter: '{value}w',
formatter: '{value}k',
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
......@@ -156,7 +161,7 @@ export default {
type: 'dashed',
color: "#ddd"
}
}
},
},
dataZoom: [
{
......
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度实际利变化趋势图(折线图)</h3>
<h3>月度实际利变化趋势图(折线图)</h3>
<div style="margin-left: 20px;">
......@@ -16,7 +16,7 @@
<script>
export default {
props:['msg','StatisticalData'],
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
......@@ -71,9 +71,9 @@ export default {
label: {
show: true,
position: 'top', // 在顶部显示
formatter: '{c}w' // 格式化金额,{c} 代表数据值
formatter: '{c}%' // 格式化金额,{c} 代表数据值
},
data: x.DetailList.map(y=>{return (y.Profit/10000).toFixed(2)}) // 绑定实时数据数组
data: x.DetailList.map(y=>{return (y.ProfitRate)}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>10){
......@@ -137,7 +137,7 @@ export default {
textStyle: {
color: "#969696"
},
formatter: '{value}w',
formatter: '{value}%',
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
......
......@@ -16,7 +16,7 @@
<script>
export default {
props:['msg','StatisticalData'],
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
......
......@@ -16,7 +16,7 @@
<script>
export default {
props:['msg','StatisticalData'],
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
......
......@@ -16,7 +16,7 @@
<script>
export default {
props:['msg','StatisticalData'],
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
......
......@@ -24,7 +24,7 @@
<script>
export default {
props:['msg','StatisticalData'],
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
......@@ -73,10 +73,10 @@ export default {
shadowOffsetX: 1,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
// label: {
// show: false,
// position: 'center'
// },
label: {
// show: false,
// position: 'center',
},
data: [], // 绑定实时数据数组
emphasis: {
label: {
......@@ -126,7 +126,8 @@ export default {
option = {
color:this.colorList,
tooltip: {
trigger: 'item'
trigger: 'item',
formatter: '{a} <br/>{b} : {c}%'
},
legend: {
bottom:'bottom',
......
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度毛利变化趋势图(折线图)</h3>
<h3>月度毛利变化趋势图(折线图)</h3>
<div style="margin-left: 20px;">
......@@ -16,7 +16,7 @@
<script>
export default {
props:['msg','StatisticalData'],
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
......@@ -66,14 +66,14 @@ export default {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
formatter: '{c}w' // 格式化金额,{c} 代表数据值
formatter: '{c}%' // 格式化金额,{c} 代表数据值
},
data: x.DetailList.map(y=>{return (y.MaoLi/10000).toFixed(2)}) // 绑定实时数据数组
data: x.DetailList.map(y=>{return (y.MaoLiRate)}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>10){
......@@ -137,7 +137,7 @@ export default {
textStyle: {
color: "#969696"
},
formatter: '{value}w',
formatter: '{value}%',
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
......
......@@ -16,7 +16,7 @@
<script>
export default {
props:['msg','StatisticalData'],
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
......
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>人均车资变化趋势图</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="ActualMyEchart" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
JapanAllData: [],
JapanXBData: [],
JapanSPData: [],
MaoLiAnalysisData: [],
SJLLAnalysisData: [],
RoomAnalysisData: [],
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,.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)'],
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.JapanAllData = n.JapanAllData
this.JapanXBData = n.JapanXBData
this.JapanSPData = n.JapanSPData
this.MaoLiAnalysisData = n.MaoLiAnalysisData
this.SJLLAnalysisData = n.SJLLAnalysisData
this.RoomAnalysisData = n.RoomAnalysisData
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.JapanSPData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
},
data: x.MonthData.map(x=>{ return x.toFixed(0) }) // 绑定实时数据数组
}
if(x.Name=='人均车资') datas.push(obj)
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('ActualMyEchart','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"
},
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
},
},
dataZoom: [
{
type: 'inside',
disabled: true
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>人均房费变化趋势图</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="ActualMyEchart2" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
JapanAllData: [],
JapanXBData: [],
JapanSPData: [],
MaoLiAnalysisData: [],
SJLLAnalysisData: [],
RoomAnalysisData: [],
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,.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)'],
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.JapanAllData = n.JapanAllData
this.JapanXBData = n.JapanXBData
this.JapanSPData = n.JapanSPData
this.MaoLiAnalysisData = n.MaoLiAnalysisData
this.SJLLAnalysisData = n.SJLLAnalysisData
this.RoomAnalysisData = n.RoomAnalysisData
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.JapanSPData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
},
data: x.MonthData.map(x=>{ return x.toFixed(0) }) // 绑定实时数据数组
}
if(x.Name=='人均房费') datas.push(obj)
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('ActualMyEchart2','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"
},
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
},
},
dataZoom: [
{
type: 'inside',
disabled: true
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>毛利变化趋势图</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="ActualMyEchartC" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
JapanAllData: [],
JapanXBData: [],
JapanSPData: [],
MaoLiAnalysisData: [],
SJLLAnalysisData: [],
RoomAnalysisData: [],
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,.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)'],
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.JapanAllData = n.JapanAllData
this.JapanXBData = n.JapanXBData
this.JapanSPData = n.JapanSPData
this.MaoLiAnalysisData = n.MaoLiAnalysisData
this.SJLLAnalysisData = n.SJLLAnalysisData
this.RoomAnalysisData = n.RoomAnalysisData
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.JapanSPData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
formatter: '{c}w' // 格式化金额,{c} 代表数据值
},
data: x.MonthData.map(x=>{ return (x/10000).toFixed(2) }) // 绑定实时数据数组
}
if(x.Name=='毛利') datas.push(obj)
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('ActualMyEchartC','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"
},
formatter: '{value}w',
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
},
},
dataZoom: [
{
type: 'inside',
disabled: true
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>实际利润变化趋势图</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="ActualMyEchartC2" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
JapanAllData: [],
JapanXBData: [],
JapanSPData: [],
MaoLiAnalysisData: [],
SJLLAnalysisData: [],
RoomAnalysisData: [],
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,.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)'],
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.JapanAllData = n.JapanAllData
this.JapanXBData = n.JapanXBData
this.JapanSPData = n.JapanSPData
this.MaoLiAnalysisData = n.MaoLiAnalysisData
this.SJLLAnalysisData = n.SJLLAnalysisData
this.RoomAnalysisData = n.RoomAnalysisData
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.JapanSPData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
formatter: '{c}w' // 格式化金额,{c} 代表数据值
},
data: x.MonthData.map(x=>{ return (x/10000).toFixed(2) }) // 绑定实时数据数组
}
if(x.Name=='实际利润') datas.push(obj)
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('ActualMyEchartC2','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"
},
formatter: '{value}w',
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
},
},
dataZoom: [
{
type: 'inside',
disabled: true
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
<template>
<div class="echartsBox">
<div class="titleBox text-center row">
<h3>人数变化趋势图</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="PropMyEchart" class="allMyEchartBox"></div>
</div>
</div>
</template>
<script>
export default {
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
JapanAllData: [],
JapanXBData: [],
JapanSPData: [],
MaoLiAnalysisData: [],
SJLLAnalysisData: [],
RoomAnalysisData: [],
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,.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:'JiPiao',ID:2},
{Name: '房费',value:'RoomFee',ID:4},
{Name: '车费',value:'CarFee',ID:6},
{Name: '餐费',value:'MealFee',ID:8},
{Name: '门票',value:'TicketFee',ID:10},
{Name: '签证',value:'VisaFee',ID:12},
],
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.JapanAllData = n.JapanAllData
this.JapanXBData = n.JapanXBData
this.JapanSPData = n.JapanSPData
this.MaoLiAnalysisData = n.MaoLiAnalysisData
this.SJLLAnalysisData = n.SJLLAnalysisData
this.RoomAnalysisData = n.RoomAnalysisData
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.JapanSPData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
formatter: '{c}' // 格式化金额,{c} 代表数据值
},
data: x.MonthData.map(x=>{ return x }) // 绑定实时数据数组
}
if(x.Name=='人数') datas.push(obj)
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('PropMyEchart','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"
},
formatter: '{value}',
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
},
},
dataZoom: [
{
type: 'inside',
disabled: true
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
<template>
<div class="echartsBox">
<div class="titleBox text-center row">
<h3>人均签证变化趋势图</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="PropMyEchart2" class="allMyEchartBox"></div>
</div>
</div>
</template>
<script>
export default {
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
JapanAllData: [],
JapanXBData: [],
JapanSPData: [],
MaoLiAnalysisData: [],
SJLLAnalysisData: [],
RoomAnalysisData: [],
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,.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:'JiPiao',ID:2},
{Name: '房费',value:'RoomFee',ID:4},
{Name: '车费',value:'CarFee',ID:6},
{Name: '餐费',value:'MealFee',ID:8},
{Name: '门票',value:'TicketFee',ID:10},
{Name: '签证',value:'VisaFee',ID:12},
],
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.JapanAllData = n.JapanAllData
this.JapanXBData = n.JapanXBData
this.JapanSPData = n.JapanSPData
this.MaoLiAnalysisData = n.MaoLiAnalysisData
this.SJLLAnalysisData = n.SJLLAnalysisData
this.RoomAnalysisData = n.RoomAnalysisData
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.JapanSPData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
},
data: x.MonthData.map(x=>{ return x.toFixed(0) }) // 绑定实时数据数组
}
if(x.Name=='人均签证') datas.push(obj)
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('PropMyEchart2','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"
},
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
},
},
dataZoom: [
{
type: 'inside',
disabled: true
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>收入变化趋势图</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="myEchart" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
JapanAllData: [],
JapanXBData: [],
JapanSPData: [],
MaoLiAnalysisData: [],
SJLLAnalysisData: [],
RoomAnalysisData: [],
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,.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)'],
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.JapanAllData = n.JapanAllData
this.JapanXBData = n.JapanXBData
this.JapanSPData = n.JapanSPData
this.MaoLiAnalysisData = n.MaoLiAnalysisData
this.SJLLAnalysisData = n.SJLLAnalysisData
this.RoomAnalysisData = n.RoomAnalysisData
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.JapanSPData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
formatter: '{c}w' // 格式化金额,{c} 代表数据值
},
data: x.MonthData.map(x=>{ return (x/10000).toFixed(2) }) // 绑定实时数据数组
}
if(x.Name=='收入') datas.push(obj)
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('myEchart','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"
},
formatter: '{value}w',
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
},
},
dataZoom: [
{
type: 'inside',
disabled: true
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>人均餐费变化趋势图</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="myEchart2" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
JapanAllData: [],
JapanXBData: [],
JapanSPData: [],
MaoLiAnalysisData: [],
SJLLAnalysisData: [],
RoomAnalysisData: [],
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,.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)'],
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.JapanAllData = n.JapanAllData
this.JapanXBData = n.JapanXBData
this.JapanSPData = n.JapanSPData
this.MaoLiAnalysisData = n.MaoLiAnalysisData
this.SJLLAnalysisData = n.SJLLAnalysisData
this.RoomAnalysisData = n.RoomAnalysisData
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.JapanSPData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
},
data: x.MonthData.map(x=>{ return x.toFixed(0) }) // 绑定实时数据数组
}
if(x.Name=='人均餐费') datas.push(obj)
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('myEchart2','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"
},
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
},
},
dataZoom: [
{
type: 'inside',
disabled: true
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>团数变化趋势图</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="ShareMyEchart" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
JapanAllData: [],
JapanXBData: [],
JapanSPData: [],
MaoLiAnalysisData: [],
SJLLAnalysisData: [],
RoomAnalysisData: [],
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,.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)'],
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.JapanAllData = n.JapanAllData
this.JapanXBData = n.JapanXBData
this.JapanSPData = n.JapanSPData
this.MaoLiAnalysisData = n.MaoLiAnalysisData
this.SJLLAnalysisData = n.SJLLAnalysisData
this.RoomAnalysisData = n.RoomAnalysisData
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.JapanSPData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
formatter: '{c}' // 格式化金额,{c} 代表数据值
},
data: x.MonthData.map(x=>{ return x }) // 绑定实时数据数组
}
if(x.Name=='团数') datas.push(obj)
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('ShareMyEchart','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"
},
formatter: '{value}',
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
},
},
dataZoom: [
{
type: 'inside',
disabled: true
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>人均门票变化趋势图</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="ShareMyEchart2" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
JapanAllData: [],
JapanXBData: [],
JapanSPData: [],
MaoLiAnalysisData: [],
SJLLAnalysisData: [],
RoomAnalysisData: [],
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,.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)'],
}
},
created() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
watch: {
StatisticalData:{
handler(n,o){
this.MonthList = n.MonthList//月份列表
this.JapanAllData = n.JapanAllData
this.JapanXBData = n.JapanXBData
this.JapanSPData = n.JapanSPData
this.MaoLiAnalysisData = n.MaoLiAnalysisData
this.SJLLAnalysisData = n.SJLLAnalysisData
this.RoomAnalysisData = n.RoomAnalysisData
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.JapanSPData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'line',
showSymbol: true,
smooth: true,
symbolSize: 5,
label: {
show: true,
position: 'top', // 在顶部显示
},
data: x.MonthData.map(x=>{ return x.toFixed(0) }) // 绑定实时数据数组
}
if(x.Name=='人均门票') datas.push(obj)
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('ShareMyEchart2','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"
},
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
},
},
dataZoom: [
{
type: 'inside',
disabled: true
}
],
series:datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
......@@ -16,7 +16,7 @@
<script>
export default {
props:['msg','StatisticalData'],
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
......
......@@ -16,7 +16,7 @@
<script>
export default {
props:['msg','StatisticalData'],
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
......
......@@ -16,7 +16,7 @@
<script>
export default {
props:['msg','StatisticalData'],
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
......
......@@ -16,7 +16,7 @@
<script>
export default {
props:['msg','StatisticalData'],
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
......
......@@ -801,14 +801,24 @@ Vue.component("TCIDJump", {
type: 3
}}, `${href}`)
}else{
if(row.StartCityId>0){
this.$router.push({
path: path,
query: {
MainId: row.StartCityId,
blank: 'y'
}
});
}else{
this.$router.push({
path: path,
query: {
OrderTCNUM: id,
OrderId: id,
blank: 'y'
}
});
}
}
},
goUrl(path, id ,row) {
if(row.TeamType==2){//为一日游的时候跳转到一日游团控列表
......@@ -949,6 +959,15 @@ Vue.component("TCNUMJump", {
OrderId: id,
}}, `${href}`)
}else{
if(row.StartCityId>0){
this.$router.push({
path: path,
query: {
MainId: row.StartCityId,
blank: 'y'
}
});
}else{
this.$router.push({
path: path,
query: {
......@@ -957,6 +976,7 @@ Vue.component("TCNUMJump", {
}
});
}
}
},
goHand(path,rowData,type){
if(type==15){
......
......@@ -159,7 +159,7 @@
</el-col>
<el-col :span="4" :gutter="35">
<el-form-item :label="nameC" prop="CardNum">
<el-input type="text" v-model="addMsg.CardNum" onkeyup="value=value.replace(/[^0-9]/g, '')"
<el-input type="text" v-model="addMsg.CardNum" onkeyup="value=value.replace(/[^0-9]/g, ''),value=value.replace(/ /g, '')"
:placeholder="$t('objFill.kaihaoznsrsz')">
</el-input>
</el-form-item>
......
This diff is collapsed.
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