
3 changed files with 533 additions and 0 deletions
@ -0,0 +1,151 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div style="margin-left: 16px;"> |
||||
|
<h3>{{ name }}</h3> |
||||
|
</div> |
||||
|
<div class = "current-data"> |
||||
|
<div class = "left"> |
||||
|
<div class="top"> |
||||
|
<span>当前数据</span> |
||||
|
<span>{{currentDate}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div ref="charta" class ="middle"> |
||||
|
|
||||
|
</div> |
||||
|
<div class ="right" /></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
export default { |
||||
|
name: '在途商品管理表', |
||||
|
// components: { }, |
||||
|
data() { |
||||
|
return { |
||||
|
currentDate:"2023-01-01", |
||||
|
name: '在途商品管理表', |
||||
|
myCharta: null |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// 初始化变量 |
||||
|
// this.init() |
||||
|
// 加载列表 |
||||
|
// this.getList() |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (this.myCharta) { |
||||
|
this.myCharta.dispose() |
||||
|
this.myCharta = null |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initCharta() |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
initCharta() { |
||||
|
// 基于准备好的dom,初始化echarts实例 |
||||
|
this.myCharta = echarts.init(this.$refs.charta) |
||||
|
this.myCharta.setOption( |
||||
|
{ |
||||
|
legend: { |
||||
|
top: 'bottom' |
||||
|
}, |
||||
|
toolbox: { |
||||
|
show: true, |
||||
|
feature: { |
||||
|
mark: { show: true }, |
||||
|
dataView: { show: true, readOnly: false }, |
||||
|
restore: { show: true }, |
||||
|
saveAsImage: { show: true } |
||||
|
} |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
name: 'Nightingale Chart', |
||||
|
type: 'pie', |
||||
|
radius: [50, 250], |
||||
|
center: ['50%', '50%'], |
||||
|
roseType: 'area', |
||||
|
itemStyle: { |
||||
|
borderRadius: 8 |
||||
|
}, |
||||
|
data:[ |
||||
|
{ |
||||
|
"value": 2313123, |
||||
|
"name": "订单总额" |
||||
|
}, |
||||
|
{ |
||||
|
"value": 4359354, |
||||
|
"name": "实际到货价值" |
||||
|
}, |
||||
|
{ |
||||
|
"value": 2313123, |
||||
|
"name": "在途货价值" |
||||
|
}, |
||||
|
{ |
||||
|
"value": 2313123, |
||||
|
"name": "超出价值" |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
) |
||||
|
}, |
||||
|
getList() {}, |
||||
|
// 返回 |
||||
|
handleReturn() { |
||||
|
this.$router.go(-1) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.current-data{ |
||||
|
width:100%; |
||||
|
height:500px; |
||||
|
display: flex; |
||||
|
} |
||||
|
.current-data .top{ |
||||
|
height:30px; |
||||
|
line-height:30px; |
||||
|
width:100%; |
||||
|
} |
||||
|
.current-data .left{ |
||||
|
background-color: aqua; |
||||
|
width:250px; |
||||
|
height:600px; |
||||
|
margin-left: 16px; |
||||
|
} |
||||
|
|
||||
|
.current-data .middle{ |
||||
|
width:600px; |
||||
|
height:600px; |
||||
|
float: left; |
||||
|
margin-left: 10px; |
||||
|
} |
||||
|
|
||||
|
.current-data .right{ |
||||
|
background-color: red; |
||||
|
width:700px; |
||||
|
height:600px; |
||||
|
float: left; |
||||
|
margin-left: 10px; |
||||
|
|
||||
|
} |
||||
|
.current-data .right .top{ |
||||
|
text-align: center; |
||||
|
} |
||||
|
.current-data .right .charts{ |
||||
|
height:480px; |
||||
|
width:100%; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,163 @@ |
|||||
|
<template> |
||||
|
|
||||
|
<div class="app-container"> |
||||
|
<div> |
||||
|
<h3>{{ name }}</h3> |
||||
|
</div> |
||||
|
<div class = "current-data"> |
||||
|
<div class = "left"> |
||||
|
<div class="top"> |
||||
|
<span>当前数据</span> |
||||
|
<span>{{currentDate}}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div ref="charta" class ="right" /></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
export default { |
||||
|
name: '销售报表', |
||||
|
// components: { }, |
||||
|
data() { |
||||
|
return { |
||||
|
currentDate:"2023-01-01", |
||||
|
name: '销售报表', |
||||
|
myCharta: null |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// 初始化变量 |
||||
|
// this.init() |
||||
|
// 加载列表 |
||||
|
// this.getList() |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (this.myCharta) { |
||||
|
this.myCharta.dispose() |
||||
|
this.myCharta = null |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
this.initCharta() |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
initCharta() { |
||||
|
// 基于准备好的dom,初始化echarts实例 |
||||
|
this.myCharta = echarts.init(this.$refs.charta) |
||||
|
|
||||
|
this.myCharta.setOption({ |
||||
|
legend: {}, |
||||
|
tooltip: {}, |
||||
|
dataset: { |
||||
|
"dimensions": [ |
||||
|
"报表日期", |
||||
|
"销售商品收到的现金", |
||||
|
"收到其他与经营活动有关的现金" |
||||
|
], |
||||
|
"source": [ |
||||
|
{ |
||||
|
"报表日期": "2023-01-01", |
||||
|
"销售商品收到的现金": 123123.21, |
||||
|
"收到其他与经营活动有关的现金": 23554.43 |
||||
|
}, |
||||
|
{ |
||||
|
"报表日期": "2023-01-02", |
||||
|
"销售商品收到的现金": 235553.23, |
||||
|
"收到其他与经营活动有关的现金": 234423.11 |
||||
|
}, |
||||
|
{ |
||||
|
"报表日期": "2023-01-03", |
||||
|
"销售商品收到的现金": 347534.13, |
||||
|
"收到其他与经营活动有关的现金": 234234.11 |
||||
|
}, |
||||
|
{ |
||||
|
"报表日期": "2023-01-04", |
||||
|
"销售商品收到的现金": 346532.21, |
||||
|
"收到其他与经营活动有关的现金": 234342.11 |
||||
|
}, |
||||
|
{ |
||||
|
"报表日期": "2023-01-05", |
||||
|
"销售商品收到的现金": 345354.23, |
||||
|
"收到其他与经营活动有关的现金": 213123.11 |
||||
|
}, |
||||
|
{ |
||||
|
"报表日期": "2023-01-06", |
||||
|
"销售商品收到的现金": 543266.23, |
||||
|
"收到其他与经营活动有关的现金": 34234.11 |
||||
|
}, |
||||
|
{ |
||||
|
"报表日期": "2023-01-07", |
||||
|
"销售商品收到的现金": 564365.23, |
||||
|
"收到其他与经营活动有关的现金": 234342.11 |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
xAxis: { type: 'category' }, |
||||
|
yAxis: {}, |
||||
|
// Declare several bar series, each will be mapped |
||||
|
// to a column of dataset.source by default. |
||||
|
series: [{ type: 'bar' }, { type: 'bar' }] |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
getList() {}, |
||||
|
// 返回 |
||||
|
handleReturn() { |
||||
|
this.$router.go(-1) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.current-data{ |
||||
|
width:100%; |
||||
|
height:500px; |
||||
|
display: flex; |
||||
|
} |
||||
|
.current-data .top{ |
||||
|
height:30px; |
||||
|
line-height:30px; |
||||
|
width:100%; |
||||
|
} |
||||
|
.current-data .left{ |
||||
|
background-color: aqua; |
||||
|
width:450px; |
||||
|
height:500px; |
||||
|
margin-left: 16px; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.current-data .right{ |
||||
|
width:1200px; |
||||
|
height:500px; |
||||
|
float: left; |
||||
|
margin-left: 10px; |
||||
|
|
||||
|
} |
||||
|
.current-data .right .top{ |
||||
|
text-align: center; |
||||
|
} |
||||
|
.current-data .right .charts{ |
||||
|
height:480px; |
||||
|
width:100%; |
||||
|
} |
||||
|
.wenjiantit { |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
margin: 25px 0 10px 0; |
||||
|
} |
||||
|
.forminfo { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
.listcon { |
||||
|
height: calc(100vh - 250px); |
||||
|
overflow-y: auto; |
||||
|
overflow-x: hidden; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,219 @@ |
|||||
|
<template> |
||||
|
<div class="app-container"> |
||||
|
<div style="margin-left:16px;"> |
||||
|
<h3>{{ name }}</h3> |
||||
|
</div> |
||||
|
<div class = "current-data"> |
||||
|
<div class = "upper"> |
||||
|
</div> |
||||
|
|
||||
|
<div ref="charta" class ="lower" /></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import * as echarts from 'echarts' |
||||
|
export default { |
||||
|
name: '阀值分析', |
||||
|
// components: { }, |
||||
|
data() { |
||||
|
return { |
||||
|
currentDate:"2023-01-01", |
||||
|
name: '阀值分析', |
||||
|
myCharta: null, |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
// 初始化变量 |
||||
|
// this.init() |
||||
|
// 加载列表 |
||||
|
// this.getList() |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (this.myCharta) { |
||||
|
this.myCharta.dispose() |
||||
|
this.myCharta = null |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(() => { |
||||
|
// this.initChartaThreshold() |
||||
|
this.initCharta() |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
initCharta() { |
||||
|
// 基于准备好的dom,初始化echarts实例 |
||||
|
// this.myChartaThreshold = echarts.init(this.$refs.myChartaThreshold) |
||||
|
this.myCharta = echarts.init(this.$refs.charta) |
||||
|
this.myCharta.setOption( |
||||
|
{ |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
axisPointer: { |
||||
|
type: 'cross', |
||||
|
crossStyle: { |
||||
|
color: '#999' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
toolbox: { |
||||
|
feature: { |
||||
|
dataView: { show: false, readOnly: false }, |
||||
|
magicType: { show: false, type: ['line', 'bar'] }, |
||||
|
restore: { show: false }, |
||||
|
saveAsImage: { show: false } |
||||
|
} |
||||
|
}, |
||||
|
legend: { |
||||
|
data: ['仓库货值', '在途货值', ' 门店货值', '帐户余额', '应收帐款', '借款金额', '阀值'] |
||||
|
}, |
||||
|
xAxis: [ |
||||
|
{ |
||||
|
type: 'category', |
||||
|
data: ['2023-01-01', '2023-01-02', '2023-01-03', '2023-01-04', '2023-01-05', '2023-01-06', '2023-01-07'], |
||||
|
axisPointer: { |
||||
|
type: 'shadow' |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '人民币', |
||||
|
min: 0, |
||||
|
max: 250, |
||||
|
interval: 50, |
||||
|
axisLabel: { |
||||
|
formatter: '{value} 元' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: '百分比', |
||||
|
min: 0, |
||||
|
max: 25, |
||||
|
interval: 5, |
||||
|
axisLabel: { |
||||
|
formatter: '{value} ' |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
series: [ |
||||
|
{ |
||||
|
name: '仓库货值', |
||||
|
type: 'bar', |
||||
|
tooltip: { |
||||
|
valueFormatter: function (value) { |
||||
|
return value + ' 元'; |
||||
|
} |
||||
|
}, |
||||
|
data: [ |
||||
|
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '在途货值', |
||||
|
type: 'bar', |
||||
|
tooltip: { |
||||
|
valueFormatter: function (value) { |
||||
|
return value + ' 元'; |
||||
|
} |
||||
|
}, |
||||
|
data: [ |
||||
|
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: ' 门店货值', |
||||
|
type: 'bar', |
||||
|
tooltip: { |
||||
|
valueFormatter: function (value) { |
||||
|
return value + ' 元'; |
||||
|
} |
||||
|
}, |
||||
|
data: [ |
||||
|
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '帐户余额', |
||||
|
type: 'bar', |
||||
|
tooltip: { |
||||
|
valueFormatter: function (value) { |
||||
|
return value + ' 元'; |
||||
|
} |
||||
|
}, |
||||
|
data: [ |
||||
|
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '应收帐款', |
||||
|
type: 'bar', |
||||
|
tooltip: { |
||||
|
valueFormatter: function (value) { |
||||
|
return value + ' 元'; |
||||
|
} |
||||
|
}, |
||||
|
data: [ |
||||
|
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '借款金额', |
||||
|
type: 'bar', |
||||
|
tooltip: { |
||||
|
valueFormatter: function (value) { |
||||
|
return value + '元'; |
||||
|
} |
||||
|
}, |
||||
|
data: [ |
||||
|
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3 |
||||
|
] |
||||
|
}, |
||||
|
{ |
||||
|
name: '阀值', |
||||
|
type: 'line', |
||||
|
yAxisIndex: 1, |
||||
|
tooltip: { |
||||
|
valueFormatter: function (value) { |
||||
|
return value + '%'; |
||||
|
} |
||||
|
}, |
||||
|
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] |
||||
|
}, |
||||
|
|
||||
|
] |
||||
|
} |
||||
|
) |
||||
|
}, |
||||
|
getList() {}, |
||||
|
// 返回 |
||||
|
handleReturn() { |
||||
|
this.$router.go(-1) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.current-data{ |
||||
|
width:100%; |
||||
|
height:500px; |
||||
|
} |
||||
|
|
||||
|
.current-data .upper{ |
||||
|
width:100%; |
||||
|
height:100px; |
||||
|
} |
||||
|
|
||||
|
.current-data .lower{ |
||||
|
width:100%; |
||||
|
height:600px; |
||||
|
float: left; |
||||
|
margin-left: 10px; |
||||
|
|
||||
|
} |
||||
|
</style> |
Loading…
Reference in new issue