Skip to content

S
SuperMan
Commit 642dee8a authored by liudong1993's avatar liudong1993
Browse files
Options

1

parent fca7303f
Show whitespace changes
Inline Side-by-side
Showing with 755 additions and 10 deletions
src/components/FinancialModule/DataAnalysis/allEchart.vue
View file @ 642dee8a
......@@ -211,7 +211,15 @@
<template v-if="activeName=='2'">
<div class="allEchartRow">
<twoIncomeChange :msgData="msg" :StatisticalData="StatisticalData"></twoIncomeChange>
<twoCurrentExpense :msgData="msg" :StatisticalData="StatisticalData"></twoCurrentExpense>
</div>
<div class="allEchartRow">
<twoWoolRateColumnarZZT :msgData="msg" :StatisticalData="StatisticalData"></twoWoolRateColumnarZZT>
<twoActualRateColumnarZZT :msgData="msg" :StatisticalData="StatisticalData"></twoActualRateColumnarZZT>
</div>
<div class="allEchartRow">
<twoChangeProportion :msgData="msg" :StatisticalData="StatisticalData"></twoChangeProportion>
<twoActualProfit :msgData="msg" :StatisticalData="StatisticalData"></twoActualProfit>
</div>
<div class="allEchartRow">
<twoWoolRateColumnar :msgData="msg" :StatisticalData="StatisticalData"></twoWoolRateColumnar>
......@@ -271,6 +279,10 @@ import twoIncomeChange from "./components/twoEchart/IncomeChange.vue";
import twoChangeProportion from "./components/twoEchart/ChangeProportion.vue";
import twoWoolRateColumnar from "./components/twoEchart/WoolRateColumnar.vue";
import twoActualRateColumnar from "./components/twoEchart/ActualRateColumnar.vue";
import twoActualProfit from "./components/twoEchart/ActualProfit.vue";
import twoCurrentExpense from "./components/twoEchart/CurrentExpense.vue";
import twoWoolRateColumnarZZT from "./components/twoEchart/WoolRateColumnarZZT.vue";
import twoActualRateColumnarZZT from "./components/twoEchart/ActualRateColumnarZZT.vue";
import threeIncomeChange from "./components/threeEchart/IncomeChange.vue";
import threeIncomeShare from "./components/threeEchart/IncomeShare.vue";
......@@ -298,6 +310,8 @@ export default {
twoIncomeChange,twoChangeProportion,
twoWoolRateColumnar,twoActualRateColumnar,
twoActualProfit,twoCurrentExpense,
twoWoolRateColumnarZZT,twoActualRateColumnarZZT,
threeIncomeChange,threeIncomeShare,
threeWoolRateChange,
......
src/components/FinancialModule/DataAnalysis/components/oneEchart/ActualRateColumnar.vue
View file @ 642dee8a
......@@ -59,6 +59,11 @@ export default {
let titles = []
let Stocklegend = {}
let Newobj = {}
let barW =30; let labelShow=true;
if(this.LineAnalysisData.length >=3){barW=29;}
if(this.LineAnalysisData.length >=4){barW=23;labelShow=false;}
if(this.LineAnalysisData.length >=5){barW=19;labelShow=false;}
if(this.LineAnalysisData.length >=7){barW=16;labelShow=false;}
this.LineAnalysisData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
......@@ -66,14 +71,14 @@ export default {
name: Name,
type: 'bar',
label: {
show: true,
show: labelShow,
position: 'top', // 在顶部显示
formatter: '{c}w' // 格式化金额，{c} 代表数据值
},
itemStyle:{
barBorderRadius: 5,
},
barWidth: 30,
barWidth: barW,
data: x.DetailList.map(y=>{return (y.Profit/10000).toFixed(2)}) // 绑定实时数据数组
}
datas.push(obj)
......
src/components/FinancialModule/DataAnalysis/components/oneEchart/WoolRateColumnar.vue
View file @ 642dee8a
......@@ -59,6 +59,11 @@ export default {
let titles = []
let Stocklegend = {}
let Newobj = {}
let barW =30; let labelShow=true;
if(this.LineAnalysisData.length >=3){barW=29;}
if(this.LineAnalysisData.length >=4){barW=23;labelShow=false;}
if(this.LineAnalysisData.length >=5){barW=19;labelShow=false;}
if(this.LineAnalysisData.length >=7){barW=16;labelShow=false;}
this.LineAnalysisData.forEach((x,indexs)=>{
let Name = `${x.Name}`
titles.push(Name)
......@@ -66,14 +71,14 @@ export default {
name: Name,
type: 'bar',
label: {
show: true,
show: labelShow,
position: 'top', // 在顶部显示
formatter: '{c}w' // 格式化金额，{c} 代表数据值
},
itemStyle:{
barBorderRadius: 5,
},
barWidth: 30,
barWidth: barW,
data: x.DetailList.map(y=>{return (y.MaoLi/10000).toFixed(2)}) // 绑定实时数据数组
}
datas.push(obj)
......
src/components/FinancialModule/DataAnalysis/components/twoEchart/ActualProfit.vue 0 → 100644
View file @ 642dee8a
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>实际利率变化趋势图</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="ActualProfit" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
BranchAnalysisData: [],//各线路统计
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.BranchAnalysisData = n.BranchAnalysisData//各线路统计
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.BranchAnalysisData.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.DetailList.map(y=>{return y.ProfitRate}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('ActualProfit','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>
src/components/FinancialModule/DataAnalysis/components/twoEchart/ActualRateColumnar.vue
View file @ 642dee8a
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>公司净利润变化趋势图</h3>
<h3>净利润变化趋势图</h3>
<div style="margin-left: 20px;">
......
src/components/FinancialModule/DataAnalysis/components/twoEchart/ActualRateColumnarZZT.vue 0 → 100644
View file @ 642dee8a
<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: [],//月份列表
BranchAnalysisData: [],
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.BranchAnalysisData = n.BranchAnalysisData//各成本统计
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
let barW = 30;
if(this.BranchAnalysisData.length >=2){barW=28;}
if(this.BranchAnalysisData.length >=3){barW=27;}
if(this.BranchAnalysisData.length >=4){barW=22;}
if(this.BranchAnalysisData.length >=5){barW=17;}
if(this.BranchAnalysisData.length >=7){barW=15;}
this.BranchAnalysisData.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: barW,
data: x.DetailList.map(y=>{return (y.Profit/10000).toFixed(2)}) // 绑定实时数据数组
}
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>
src/components/FinancialModule/DataAnalysis/components/twoEchart/ChangeProportion.vue
View file @ 642dee8a
<template>
<div class="echartsBox">
<div class="titleBox text-center row">
<h3>公司毛利变化趋势图</h3>
<h3>毛利率变化趋势图</h3>
<div style="margin-left: 20px;">
......@@ -85,9 +85,9 @@ export default {
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>6){
......@@ -151,7 +151,7 @@ export default {
textStyle: {
color: "#969696"
},
formatter: '{value}w',
formatter: '{value}%',
margin: 20 // 标签距离y轴的距离为20
},
splitLine:{
......
src/components/FinancialModule/DataAnalysis/components/twoEchart/CurrentExpense.vue 0 → 100644
View file @ 642dee8a
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>管销费用变化趋势图</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="CurrentExpense" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
BranchAnalysisData: [],//各线路统计
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.BranchAnalysisData = n.BranchAnalysisData//各线路统计
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
this.BranchAnalysisData.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.GXFY/10000).toFixed(2)}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('CurrentExpense','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
View file @ 642dee8a
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>公司营业利润变化趋势图</h3>
<h3>营业利润变化趋势图</h3>
<div style="margin-left: 20px;">
......
src/components/FinancialModule/DataAnalysis/components/twoEchart/WoolRateColumnarZZT.vue 0 → 100644
View file @ 642dee8a
<template>
<div class="echartsBox">
<div class="titleBox row">
<h3>公司毛利变化趋势图</h3>
<div style="margin-left: 20px;">
</div>
</div>
<div style="background: #fff;">
<div id="WoolMyEchartC2" class="allMyEchartBox" ></div>
</div>
</div>
</template>
<script>
export default {
props:['msgData','StatisticalData'],
data() {
return {
MonthList: [],//月份列表
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.BranchAnalysisData = n.BranchAnalysisData//各线路统计
this.getEchart()
},
deep: true,
immediate: false,
}
},
mounted() {
},
methods: {
handleResize() {
location.reload()
},
getEchart(){
let datas = []
let titles = []
let Stocklegend = {}
let Newobj = {}
let barW = 30;
if(this.BranchAnalysisData.length >=2){barW=28;}
if(this.BranchAnalysisData.length >=3){barW=27;}
if(this.BranchAnalysisData.length >=4){barW=22;}
if(this.BranchAnalysisData.length >=5){barW=17;}
if(this.BranchAnalysisData.length >=7){barW=15;}
this.BranchAnalysisData.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: barW,
data: x.DetailList.map(y=>{return (y.MaoLi/10000).toFixed(2)}) // 绑定实时数据数组
}
datas.push(obj)
if(indexs>6){
let name=x.Name;
Newobj[name]=false;
}
Stocklegend=Newobj;
})
let chartDom = document.getElementById('WoolMyEchartC2','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>
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