| | |
| | | const barLegend = { |
| | | show: true, |
| | | textStyle: { color: '#B8C8E0' }, |
| | | data: ['产量', '工资', '合格率'], |
| | | data: ['生产核算'], |
| | | } |
| | | |
| | | // 柱状图:产量、工资;折线图:合格率(绿色) |
| | | // 柱状图:生产核算 |
| | | const chartSeries = ref([ |
| | | { |
| | | name: '产量', |
| | | name: '生产核算', |
| | | type: 'bar', |
| | | barWidth: 20, |
| | | barGap: '40%', |
| | | yAxisIndex: 0, |
| | | barWidth: 30, |
| | | emphasis: { focus: 'series' }, |
| | | itemStyle: { |
| | | color: { |
| | |
| | | }, |
| | | data: [], |
| | | }, |
| | | { |
| | | name: '工资', |
| | | type: 'bar', |
| | | barGap: '40%', |
| | | barWidth: 20, |
| | | yAxisIndex: 1, |
| | | 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)' }, |
| | | ], |
| | | }, |
| | | }, |
| | | data: [], |
| | | }, |
| | | { |
| | | name: '合格率', |
| | | type: 'line', |
| | | yAxisIndex: 2, |
| | | showSymbol: true, |
| | | symbol: 'circle', |
| | | symbolSize: 8, |
| | | lineStyle: { color: 'rgba(90, 216, 166, 1)', width: 2 }, |
| | | itemStyle: { color: 'rgba(90, 216, 166, 1)' }, |
| | | data: [], |
| | | emphasis: { focus: 'series' }, |
| | | }, |
| | | ]) |
| | | |
| | | const tooltip = { |
| | |
| | | formatter(params) { |
| | | let result = params[0].axisValueLabel + '<br/>' |
| | | params.forEach((item) => { |
| | | let unit = '件' |
| | | if (item.seriesName === '合格率') unit = '%' |
| | | else if (item.seriesName === '工资') unit = '元' |
| | | result += `<div>${item.marker} ${item.seriesName}: ${item.value}${unit}</div>` |
| | | result += `<div>${item.marker} ${item.seriesName}: ${item.value} 元</div>` |
| | | }) |
| | | return result |
| | | }, |
| | |
| | | { type: 'category', axisTick: { show: false }, axisLabel: { color: '#B8C8E0' }, data: [] }, |
| | | ]) |
| | | const yAxis1 = [ |
| | | { type: 'value', name: '产量(件)', position: 'left', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } }, |
| | | { type: 'value', name: '工资(元)', position: 'left', offset: 50, axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' } }, |
| | | { |
| | | type: 'value', |
| | | name: '合格率(%)', |
| | | position: 'right', |
| | | min: 0, |
| | | max: 100, |
| | | axisLabel: { color: '#B8C8E0', formatter: '{value}%' }, |
| | | nameTextStyle: { color: '#B8C8E0' }, |
| | | splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } }, |
| | | }, |
| | | { type: 'value', name: '单位: 元', axisLabel: { color: '#B8C8E0' }, nameTextStyle: { color: '#B8C8E0' }, splitLine: { lineStyle: { color: 'rgba(184, 200, 224, 0.2)' } } }, |
| | | ] |
| | | |
| | | const handleDateTypeChange = () => { |
| | |
| | | } |
| | | |
| | | const fetchData = () => { |
| | | productionAccountingAnalysis({ type: dateType.value }) |
| | | productionAccountingAnalysis({ dateType: dateType.value }) |
| | | .then((res) => { |
| | | console.log('res ======> ', res) |
| | | |
| | | if (!Array.isArray(res?.data)) return |
| | | |
| | | if (res.code !== 200 || !Array.isArray(res.data)) return |
| | | const items = res.data |
| | | |
| | | xAxis1.value[0].data = items.map(d => d.dateStr) |
| | | |
| | | // 产量 |
| | | chartSeries.value[0].data = items.map(d => Number(d.numberOfCompleted) || 0) |
| | | |
| | | // 工资 |
| | | chartSeries.value[1].data = items.map(d => Number(d.amount) || 0) |
| | | |
| | | // 合格率 |
| | | chartSeries.value[2].data = items.map(d => Number(d.passRate) || 0) |
| | | xAxis1.value[0].data = items.map((d) => d.name) |
| | | chartSeries.value[0].data = items.map((d) => parseFloat(d.value) || 0) |
| | | }) |
| | | .catch((err) => { |
| | | console.error('获取产量、工资与合格率数据失败:', err) |
| | | console.error('获取生产核算分析失败:', err) |
| | | }) |
| | | } |
| | | |