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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
| <template>
| <HomePanel title="回款与开票趋势" subtitle="近半年" :loading="loading">
| <Echarts
| :chartStyle="{ width: '100%', height: '270px' }"
| :grid="grid"
| :legend="legend"
| :series="series"
| :tooltip="tooltip"
| :xAxis="xAxis"
| :yAxis="yAxis"
| style="height: 270px"
| />
| </HomePanel>
| </template>
|
| <script setup>
| import { ref, onMounted } from 'vue'
| import * as echarts from 'echarts'
| import Echarts from '@/components/Echarts/echarts.vue'
| import HomePanel from '../HomePanel.vue'
| import { getAmountHalfYear } from '@/api/viewIndex'
|
| const loading = ref(true)
|
| const legend = { show: true, top: 0, right: 0, itemWidth: 10, itemHeight: 10, data: ['开票', '回款'] }
| const grid = { left: '3%', right: '4%', bottom: '3%', top: 34, containLabel: true }
| const tooltip = { trigger: 'axis' }
| const xAxis = ref([{
| type: 'category',
| boundaryGap: false,
| axisTick: { show: false },
| data: [],
| axisLabel: {
| interval: 0,
| formatter: (value) => value.replace(/~/g, '\n')
| }
| }])
| const yAxis = [{ type: 'value', splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)', type: 'dashed' } } }]
|
| const area = (from, to) => ({
| color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
| { offset: 0, color: from },
| { offset: 1, color: to }
| ])
| })
|
| const series = ref([
| {
| name: '开票',
| type: 'line',
| smooth: true,
| symbolSize: 6,
| data: [],
| lineStyle: { width: 2, color: '#2C51D9' },
| itemStyle: { color: '#2C51D9' },
| areaStyle: area('rgba(44, 81, 217, 0.22)', 'rgba(44, 81, 217, 0.02)'),
| emphasis: { focus: 'series' }
| },
| {
| name: '回款',
| type: 'line',
| smooth: true,
| symbolSize: 6,
| data: [],
| lineStyle: { width: 2, color: '#0F9960' },
| itemStyle: { color: '#0F9960' },
| areaStyle: area('rgba(15, 153, 96, 0.18)', 'rgba(15, 153, 96, 0.02)'),
| emphasis: { focus: 'series' }
| }
| ])
|
| onMounted(() => {
| getAmountHalfYear().then((res) => {
| const months = []
| const receipt = []
| const invoice = []
| ;(res.data || []).forEach((item) => {
| months.push(item.month)
| receipt.push(item.receiptAmount)
| invoice.push(item.invoiceAmount)
| })
| xAxis.value[0].data = months
| series.value[0].data = invoice
| series.value[1].data = receipt
| }).finally(() => { loading.value = false })
| })
| </script>
|
|
