|
|
@@ -60,6 +60,7 @@ const trendChartRef = ref<HTMLDivElement>()
|
|
|
|
|
|
let distributionChart: echarts.ECharts | null = null
|
|
|
let trendChart: echarts.ECharts | null = null
|
|
|
+let distributionResizeObserver: ResizeObserver | null = null
|
|
|
|
|
|
const panelOptions: Array<{ label: string; value: ActivePanel }> = [
|
|
|
{ label: '存货分布', value: 'distribution' },
|
|
|
@@ -418,7 +419,7 @@ function getInventoryAgingOption(data: unknown): echarts.EChartsOption {
|
|
|
const values = entries.map(({ value }) => yuanToWan(value))
|
|
|
|
|
|
return {
|
|
|
- ...ANIMATION,
|
|
|
+ animation: false,
|
|
|
grid: {
|
|
|
...THEME.grid,
|
|
|
top: layout.trendGridTop,
|
|
|
@@ -480,13 +481,16 @@ function getInventoryAgingOption(data: unknown): echarts.EChartsOption {
|
|
|
{ offset: 1, color: 'rgb(255 161 79 / 2%)' }
|
|
|
])
|
|
|
},
|
|
|
+ emphasis: {
|
|
|
+ disabled: true
|
|
|
+ },
|
|
|
label: {
|
|
|
show: true,
|
|
|
color: THEME.color.orange.line,
|
|
|
fontSize: layout.labelFontSize,
|
|
|
fontFamily: FONT_FAMILY,
|
|
|
formatter(params: any) {
|
|
|
- return formatAmount(Number(params.value))
|
|
|
+ return `${formatAmount(Number(params.value))}万`
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -528,6 +532,13 @@ function resizeCharts() {
|
|
|
trendChart?.resize()
|
|
|
}
|
|
|
|
|
|
+function handleDistributionResize() {
|
|
|
+ if (!distributionChartRef.value || !distributionChart) return
|
|
|
+
|
|
|
+ distributionChart.resize()
|
|
|
+ renderDistributionChart()
|
|
|
+}
|
|
|
+
|
|
|
function destroyCharts() {
|
|
|
distributionChart?.dispose()
|
|
|
trendChart?.dispose()
|
|
|
@@ -616,7 +627,13 @@ async function requestInventoryDetail() {
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
- initDistributionChart()
|
|
|
+ nextTick(() => {
|
|
|
+ requestAnimationFrame(() => {
|
|
|
+ initDistributionChart()
|
|
|
+ distributionResizeObserver = new ResizeObserver(handleDistributionResize)
|
|
|
+ distributionResizeObserver.observe(distributionChartRef.value!)
|
|
|
+ })
|
|
|
+ })
|
|
|
window.addEventListener('resize', resizeCharts)
|
|
|
window.addEventListener('rhkb:resize', resizeCharts)
|
|
|
})
|
|
|
@@ -640,6 +657,8 @@ watch(selectedDate, () => {
|
|
|
onUnmounted(() => {
|
|
|
window.removeEventListener('resize', resizeCharts)
|
|
|
window.removeEventListener('rhkb:resize', resizeCharts)
|
|
|
+ distributionResizeObserver?.disconnect()
|
|
|
+ distributionResizeObserver = null
|
|
|
destroyCharts()
|
|
|
})
|
|
|
</script>
|