Skip to content

S
SuperMan
Commit 224863f2 authored by youjie's avatar youjie
Browse files
Options

no message

parent 2d63e7a0
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1861 additions and 26 deletions
src/components/FinancialModule/DataAnalysis/allEchart.vue
View file @ 224863f2
<template>
<div style="height: 100%;">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="线路经营情况" name="1"></el-tab-pane>
<el-tab-pane label="公司经营情况" name="2"></el-tab-pane>
<el-tab-pane label="日本小包OR常规" name="3"></el-tab-pane>
</el-tabs>
<div class="query-box">
<el-form class="_info_box clearfix" label-width="90px">
<el-row style="padding: 15px 0px 0 0">
......@@ -112,40 +117,76 @@
</div>
<!-- height: 78%;overflow: auto; -->
<div v-loading="loading" style="height: 85%;overflow: auto; ">
<div style="display: flex;flex-direction: row;flex-wrap: wrap;">
<IncomeChange :msgData="msg" :StatisticalData="StatisticalData"></IncomeChange>
<IncomeShare :msgData="msg" :StatisticalData="StatisticalData"></IncomeShare>
<ChangeProportion :msgData="msg" :StatisticalData="StatisticalData"></ChangeProportion>
</div>
<div style="display: flex;flex-direction: row;flex-wrap: wrap;">
<WoolRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></WoolRateColumnar>
<ActualRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></ActualRateColumnar>
</div>
<div style="display: flex;flex-direction: row;flex-wrap: wrap;">
<WoolRateChange :msgData="msg" :StatisticalData="StatisticalData"></WoolRateChange>
<ActualRateChange :msgData="msg" :StatisticalData="StatisticalData"></ActualRateChange>
</div>
<template v-if="activeName=='1'">
<div style="display: flex;flex-direction: row;flex-wrap: wrap;">
<IncomeChange :msgData="msg" :StatisticalData="StatisticalData"></IncomeChange>
<IncomeShare :msgData="msg" :StatisticalData="StatisticalData"></IncomeShare>
<ChangeProportion :msgData="msg" :StatisticalData="StatisticalData"></ChangeProportion>
</div>
<div style="display: flex;flex-direction: row;flex-wrap: wrap;">
<WoolRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></WoolRateColumnar>
<ActualRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></ActualRateColumnar>
</div>
<div style="display: flex;flex-direction: row;flex-wrap: wrap;">
<WoolRateChange :msgData="msg" :StatisticalData="StatisticalData"></WoolRateChange>
<ActualRateChange :msgData="msg" :StatisticalData="StatisticalData"></ActualRateChange>
</div>
</template>
<template v-if="activeName=='2'">
<div style="display: flex;flex-direction: row;flex-wrap: wrap;">
<twoIncomeChange :msgData="msg" :StatisticalData="StatisticalData"></twoIncomeChange>
<twoIncomeShare :msgData="msg" :StatisticalData="StatisticalData"></twoIncomeShare>
<!-- <twoChangeProportion :msgData="msg" :StatisticalData="StatisticalData"></twoChangeProportion> -->
</div>
<div style="display: flex;flex-direction: row;flex-wrap: wrap;">
<twoWoolRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></twoWoolRateColumnar>
<!-- <twoActualRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></twoActualRateColumnar> -->
</div>
<div style="display: flex;flex-direction: row;flex-wrap: wrap;">
<!-- <twoWoolRateChange :msgData="msg" :StatisticalData="StatisticalData"></twoWoolRateChange> -->
<!-- <twoActualRateChange :msgData="msg" :StatisticalData="StatisticalData"></twoActualRateChange> -->
</div>
</template>
</div>
</div>
</template>
<script>
import IncomeChange from "./components/Echart/IncomeChange.vue";
import IncomeShare from "./components/Echart/IncomeShare.vue";
import WoolRateChange from "./components/Echart/WoolRateChange.vue";
import ActualRateChange from "./components/Echart/ActualRateChange.vue";
import ChangeProportion from "./components/Echart/ChangeProportion.vue";
import WoolRateColumnar from "./components/Echart/WoolRateColumnar.vue";
import ActualRateColumnar from "./components/Echart/ActualRateColumnar.vue";
import IncomeChange from "./components/oneEchart/IncomeChange.vue";
import IncomeShare from "./components/oneEchart/IncomeShare.vue";
import WoolRateChange from "./components/oneEchart/WoolRateChange.vue";
import ActualRateChange from "./components/oneEchart/ActualRateChange.vue";
import ChangeProportion from "./components/oneEchart/ChangeProportion.vue";
import WoolRateColumnar from "./components/oneEchart/WoolRateColumnar.vue";
import ActualRateColumnar from "./components/oneEchart/ActualRateColumnar.vue";
import twoIncomeChange from "./components/twoEchart/IncomeChange.vue";
import twoIncomeShare from "./components/twoEchart/IncomeShare.vue";
import twoWoolRateChange from "./components/twoEchart/WoolRateChange.vue";
import twoActualRateChange from "./components/twoEchart/ActualRateChange.vue";
import twoChangeProportion from "./components/twoEchart/ChangeProportion.vue";
import twoWoolRateColumnar from "./components/twoEchart/WoolRateColumnar.vue";
import twoActualRateColumnar from "./components/twoEchart/ActualRateColumnar.vue";
export default {
components: {IncomeChange,IncomeShare,WoolRateChange,ActualRateChange,ChangeProportion,
WoolRateColumnar,ActualRateColumnar},
components: {
IncomeChange,IncomeShare,
WoolRateChange,ActualRateChange,
ChangeProportion,
WoolRateColumnar,ActualRateColumnar,
twoIncomeChange,twoIncomeShare,
twoWoolRateChange,twoActualRateChange,
twoChangeProportion,
twoWoolRateColumnar,twoActualRateColumnar,
},
data() {
return {
coinGetShow: false,
loading: false,
activeName: 1,
activeName: '1',
msg:{
startDate: '',
endDate: '',
......@@ -242,8 +283,10 @@ export default {
}
this.msg.LineIdStr = this.msg.LineIdList.join(',')
this.loading = true
let url ='financestatistics_post_GetDataAnalysisStat'
// if(this.activeName=='2'){ url = ''}
this.apipost(
"financestatistics_post_GetDataAnalysisStat",
url,
this.msg,
res => {
if (res.data.resultCode == 1) {
......@@ -260,7 +303,7 @@ export default {
},
handleClick(e){
this.activeName = e._props.name
this.msg.Type = e._props.name
// this.msg.Type = e._props.name
this.getStatement()
},
getDateTime(){
......
src/components/FinancialModule/DataAnalysis/components/corporation.vue
View file @ 224863f2
<template>
<div style="margin-bottom: 20px; ">
<h3 class="text-center" style="margin-bottom: 5px;">公司统计</h3>
<div style="display: flex;align-items: center;">
<h3 class="text-center" style="margin-bottom: 5px;">公司统计</h3>
<div class="corporatioBox">
<div>
<span>收入:</span>
<span></span>
</div>
<div>
<span>毛利:</span>
<span></span>
</div>
<div>
<span>营业利润:</span>
<span></span>
</div>
<div>
<span>净利润:</span>
<span></span>
</div>
</div>
</div>
<el-table
:data="BranchAnalysisData"
style="width: 100%;"
......@@ -174,4 +195,25 @@ export default {
line-height: 20px;
padding: 5px 0;
}
.corporatioBox{
display: flex;
flex-direction: row;
margin-bottom: 10px;
margin-left: 15px;
}
.corporatioBox div{
/* display: flex;
flex-direction: column; */
background: #fff;
padding: 5px 10px;
margin-right: 10px;
}
.corporatioBox div span:first-child{
text-align: left;
font-size: 14px;
}
.corporatioBox div span:last-child{
color: red;
margin-left: 10px;
}
</style>
src/components/FinancialModule/DataAnalysis/components/twoEchart/ActualRateChange.vue 0 → 100644
View file @ 224863f2
<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:['msg','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
LineAnalysisData: [],//各线路统计
CostAnalysisData: [],//各成本统计
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.LineAnalysisData = n.LineAnalysisData//各线路统计
this.CostAnalysisData = n.CostAnalysisData//各成本统计
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.LineAnalysisData.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(y=>{return (y.Profit/10000).toFixed(2)}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>10){
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"
},
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>
src/components/FinancialModule/DataAnalysis/components/twoEchart/ActualRateColumnar.vue 0 → 100644
View file @ 224863f2
<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:['msg','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
LineAnalysisData: [],//各线路统计
CostAnalysisData: [],//各成本统计
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.LineAnalysisData = n.LineAnalysisData//各线路统计
this.CostAnalysisData = n.CostAnalysisData//各成本统计
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.LineAnalysisData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'bar',
label: {
show: true,
position: 'top', // 在顶部显示
formatter: '{c}w' // 格式化金额，{c} 代表数据值
},
itemStyle:{
barBorderRadius: 5,
},
barWidth: 30,
data: x.DetailList.map(y=>{return (y.Profit/10000).toFixed(2)}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>10){
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: 50 // 标签距离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>
src/components/FinancialModule/DataAnalysis/components/twoEchart/ChangeProportion.vue 0 → 100644
View file @ 224863f2
<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:['msg','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
JapanAllData: [],
JapanXBData: [],
JapanSPData: [],
MaoLiAnalysisData: [],
SJLLAnalysisData: [],
RoomAnalysisData: [],
CostAnalysisData: [],
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.CostAnalysisData = n.CostAnalysisData
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
this.inCostDatas()
let that = this
let titles = this.incomeTitles.map(x=>{return x.Name})
let datas = []
let Stocklegend = {}
let Newobj={};
for(let index=0;index<this.incomeTitles.length;index++){
for(let i=0;i<this.MonthList.length;i++){
let filter = this.CostAnalysisData.filter(z=>{return z.Month==this.MonthList[i]})
if(filter){
this.CostDatas.forEach((x,indexs)=>{
if(indexs==0){
x.name = '机票'
this.CostAnalysisData.forEach(z=>{
x.data.push((z['JiPiao']/10000).toFixed(2))
})
}else if(indexs==1){
x.name = '房费'
this.CostAnalysisData.forEach(z=>{
x.data.push((z['RoomFee']/10000).toFixed(2))
})
}else if(indexs==2){
x.name = '车费'
this.CostAnalysisData.forEach(z=>{
x.data.push((z['CarFee']/10000).toFixed(2))
})
}else if(indexs==3){
x.name = '餐费'
this.CostAnalysisData.forEach(z=>{
x.data.push((z['MealFee']/10000).toFixed(2))
})
}else if(indexs==4){
x.name = '门票'
this.CostAnalysisData.forEach(z=>{
x.data.push((z['TicketFee']/10000).toFixed(2))
})
}else if(indexs==5){
x.name = '签证'
this.CostAnalysisData.forEach(z=>{
x.data.push((z['VisaFee']/10000).toFixed(2))
})
}
// 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 option;
option = {
color:that.colorList,
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就挺合适的。
top: 30, // 默认60
right: 45, // 默认10%
bottom: 70, // 默认60
containLabel: true
},
tooltip : {
trigger: 'axis',
axisPointer: {
lineStyle: {
type: 'dashed',
color: "#ddd"
}
}
},
xAxis : [
{
type: 'category',
boundaryGap: false,
nameTextStyle: {
fontWeight: 600,
fontSize: 18
},
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"
},
formatter: '{value}w'
},
splitLine:{
show:true,
lineStyle:{
// type:'dashed'
color:'#EEEEEE',
}
}
}
],
dataZoom: [
{
type: 'inside',
disabled: true
}
],
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)))
}
},
}
}
</script>
<style>
</style>
src/components/FinancialModule/DataAnalysis/components/twoEchart/IncomeChange.vue 0 → 100644
View file @ 224863f2
<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:['msg','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
LineAnalysisData: [],//各线路统计
CostAnalysisData: [],//各成本统计
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.LineAnalysisData = n.LineAnalysisData//各线路统计
this.CostAnalysisData = n.CostAnalysisData//各成本统计
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.LineAnalysisData.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(y=>{return (y.Income/10000).toFixed(2)}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>10){
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>
src/components/FinancialModule/DataAnalysis/components/twoEchart/IncomeShare.vue 0 → 100644
View file @ 224863f2
<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>
</div>
<div style="background: #fff;">
<div id="ShareMyEchart" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msg','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
LineAnalysisDataHZ: [],//各线路统计
CostAnalysisData: [],//各成本统计
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() {
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
},
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.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
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 titles = []
let Stocklegend = {}
let Newobj = {}
this.LineAnalysisDataHZ.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;
}
})
let chartDom = document.getElementById('ShareMyEchart');
let myChart = this.$echarts.init(chartDom);
let option
option = {
color:this.colorList,
tooltip: {
trigger: 'item'
},
legend: {
bottom:'bottom',
left: 'left',
type:'scroll',
icon: "circle",
padding: [25, 20, 20, 20] ,
selected: Stocklegend
},
series: datas
}
myChart.setOption(option,true)
},
}
}
</script>
<style>
</style>
src/components/FinancialModule/DataAnalysis/components/twoEchart/WoolRateChange.vue 0 → 100644
View file @ 224863f2
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度毛利变化趋势图(折线图)</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="WoolMyEchart" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msg','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
LineAnalysisData: [],//各线路统计
CostAnalysisData: [],//各成本统计
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.LineAnalysisData = n.LineAnalysisData//各线路统计
this.CostAnalysisData = n.CostAnalysisData//各成本统计
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.LineAnalysisData.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(y=>{return (y.MaoLi/10000).toFixed(2)}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>10){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('WoolMyEchart','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>
src/components/FinancialModule/DataAnalysis/components/twoEchart/WoolRateColumnar.vue 0 → 100644
View file @ 224863f2
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>月度毛利变化趋势图(柱状图)</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="WoolMyEchartC" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msg','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
LineAnalysisData: [],//各线路统计
CostAnalysisData: [],//各成本统计
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.LineAnalysisData = n.LineAnalysisData//各线路统计
this.CostAnalysisData = n.CostAnalysisData//各成本统计
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.LineAnalysisData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
let obj = {
name: Name,
type: 'bar',
label: {
show: true,
position: 'top', // 在顶部显示
formatter: '{c}w' // 格式化金额，{c} 代表数据值
},
itemStyle:{
barBorderRadius: 5,
},
barWidth: 30,
data: x.DetailList.map(y=>{return (y.MaoLi/10000).toFixed(2)}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>10){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('WoolMyEchartC','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: 50 // 标签距离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>
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