1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <template>
| <HomePanel title="应收应付统计" :loading="loading">
| <Echarts
| :chartStyle="{ width: '100%', height: '260px' }"
| :grid="grid"
| :series="series"
| :tooltip="tooltip"
| :xAxis="xAxis"
| :yAxis="yAxis"
| style="height: 260px"
| />
| </HomePanel>
| </template>
|
| <script setup>
| import { ref, onMounted } from 'vue'
| import Echarts from '@/components/Echarts/echarts.vue'
| import HomePanel from '../HomePanel.vue'
| import { statisticsReceivablePayable } from '@/api/viewIndex'
|
| const loading = ref(true)
|
| const series = ref([
| {
| type: 'bar',
| barWidth: 14,
| data: [],
| label: { show: true, position: 'right', color: 'rgba(0,0,0,0.55)' }
| }
| ])
|
| const grid = { left: '3%', right: '10%', bottom: '3%', top: 10, containLabel: true }
| const tooltip = { trigger: 'axis', axisPointer: { type: 'shadow' } }
| const xAxis = [{ type: 'value' }]
| const yAxis = [{ type: 'category', data: ['应付账款', '应收账款'] }]
|
| onMounted(() => {
| statisticsReceivablePayable({ type: 1 }).then((res) => {
| const d = res.data || {}
| series.value[0].data = [
| { value: d.payableMoney, itemStyle: { color: '#D97706', borderRadius: [0, 6, 6, 0] } },
| { value: d.receivableMoney, itemStyle: { color: '#2C51D9', borderRadius: [0, 6, 6, 0] } }
| ]
| }).finally(() => { loading.value = false })
| })
| </script>
|
|
