| | |
| | | |
| | | <script setup> |
| | | import { ref, onMounted } from 'vue' |
| | | import { productSalesAnalysis } from '@/api/viewIndex.js' |
| | | import { getAmountHalfYear } from '@/api/viewIndex.js' |
| | | import PanelHeader from './PanelHeader.vue' |
| | | import Echarts from '@/components/Echarts/echarts.vue' |
| | | |
| | |
| | | } |
| | | |
| | | const grid = { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true } |
| | | const barLegend = { show: true, textStyle: { color: '#B8C8E0' }, data: ['金额'] } |
| | | const barLegend = { |
| | | show: true, |
| | | textStyle: { color: '#B8C8E0' }, |
| | | data: ['开票金额', '回款金额'], |
| | | } |
| | | const barSeries1 = ref([ |
| | | { |
| | | name: '金额', |
| | | name: '开票金额', |
| | | type: 'bar', |
| | | barGap: 0, |
| | | barWidth: 30, |
| | | barWidth: 20, |
| | | emphasis: { focus: 'series' }, |
| | | itemStyle: { |
| | | color: { |
| | |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [ |
| | | { offset: 1, color: '#00A4ED' }, |
| | | { offset: 0, color: '#4EE4FF' }, |
| | | { offset: 1, color: 'rgba(0, 164, 237, 0)' }, |
| | | { offset: 0, color: 'rgba(78, 228, 255, 1)' }, |
| | | ], |
| | | }, |
| | | }, |
| | | data: [], |
| | | }, |
| | | { |
| | | name: '回款金额', |
| | | type: 'bar', |
| | | barGap: '40%', |
| | | barWidth: 20, |
| | | emphasis: { focus: 'series' }, |
| | | itemStyle: { |
| | | color: { |
| | | type: 'linear', |
| | | x: 0, |
| | | y: 0, |
| | | x2: 0, |
| | | y2: 1, |
| | | colorStops: [ |
| | | { offset: 1, color: 'rgba(83, 126, 245, 0.19)' }, |
| | | { offset: 0, color: 'rgba(144, 97, 248, 1)' }, |
| | | ], |
| | | }, |
| | | }, |
| | |
| | | const yAxis1 = [{ type: 'value', axisLabel: { color: '#B8C8E0' } }] |
| | | |
| | | const fetchData = () => { |
| | | productSalesAnalysis() |
| | | getAmountHalfYear() |
| | | .then((res) => { |
| | | if (res.code === 200 && Array.isArray(res.data)) { |
| | | const items = res.data |
| | | xAxis1.value[0].data = items.map((item) => item.name) |
| | | barSeries1.value[0].data = items.map((item) => parseFloat(item.value) || 0) |
| | | xAxis1.value[0].data = items.map((item) => item.month) |
| | | barSeries1.value[0].data = items.map( |
| | | (item) => parseFloat(item.invoiceAmount) || 0 |
| | | ) |
| | | barSeries1.value[1].data = items.map( |
| | | (item) => parseFloat(item.receiptAmount) || 0 |
| | | ) |
| | | } |
| | | }) |
| | | .catch((err) => { |
| | | console.error('获取产品销售金额分析失败:', err) |
| | | console.error('获取近半年回款与开票数据失败:', err) |
| | | }) |
| | | } |
| | | |