
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