kanban调整

src/views/pms/qhse/kanban/index.vue

@@ -331,6 +331,8 @@ function getHazardChartOption(): echarts.EChartsOption {
     },
     tooltip: createTooltip({
       trigger: 'axis',
+      confine: true,
+      appendToBody: false,
       axisPointer: {
         type: 'shadow',
         shadowStyle: {
@@ -338,6 +340,7 @@ function getHazardChartOption(): echarts.EChartsOption {
         }
       },
       formatter(params: any) {
+        if (!params || (Array.isArray(params) && params.length === 0)) return ''
         const item = Array.isArray(params) ? params[0] : params
         return `${item.name}<br/>数量：${item.value}`
       }
@@ -415,11 +418,14 @@ function initHazardChart() {
 }
 
 function updateHazardChart() {
-  hazardChart?.setOption(getHazardChartOption(), true)
+  if (!hazardChart) return
+  hazardChart.clear()
+  hazardChart.setOption(getHazardChartOption(), { notMerge: true, lazyUpdate: false })
 }
 
 function resizeHazardChart() {
-  hazardChart?.resize()
+  if (!hazardChart) return
+  hazardChart.resize({ animation: { duration: 300 } })
 }
 
 function destroyHazardChart() {
@@ -450,6 +456,8 @@ function getSafeDayChartOption(): echarts.EChartsOption {
     },
     tooltip: createTooltip({
       trigger: 'axis',
+      confine: true,
+      appendToBody: false,
       axisPointer: {
         type: 'shadow',
         shadowStyle: {
@@ -457,6 +465,7 @@ function getSafeDayChartOption(): echarts.EChartsOption {
         }
       },
       formatter(params: any) {
+        if (!params || (Array.isArray(params) && params.length === 0)) return ''
         const item = Array.isArray(params) ? params[0] : params
         return `${item.name}<br/>安全天数：${item.value}`
       }
@@ -521,11 +530,14 @@ function initSafeDayChart() {
 }
 
 function updateSafeDayChart() {
-  safeDayChart?.setOption(getSafeDayChartOption(), true)
+  if (!safeDayChart) return
+  safeDayChart.clear()
+  safeDayChart.setOption(getSafeDayChartOption(), { notMerge: true, lazyUpdate: false })
 }
 
 function resizeSafeDayChart() {
-  safeDayChart?.resize()
+  if (!safeDayChart) return
+  safeDayChart.resize({ animation: { duration: 300 } })
 }
 
 function destroySafeDayChart() {
@@ -538,7 +550,10 @@ function getSocChartOption(): echarts.EChartsOption {
     ...ANIMATION,
     tooltip: createTooltip({
       trigger: 'item',
+      confine: true,
+      appendToBody: false,
       formatter(params: any) {
+        if (!params) return ''
         return `${params.name}<br/>数量：${params.value}<br/>占比：${params.percent}%`
       }
     }),
@@ -601,11 +616,18 @@ function initSocChart() {
   socChart = echarts.init(socChartRef.value, undefined, {
     renderer: CHART_RENDERER
   })
-  socChart.setOption(getSocChartOption(), true)
+  socChart.setOption(getSocChartOption(), { notMerge: true, lazyUpdate: false })
+}
+
+function updateSocChart() {
+  if (!socChart) return
+  socChart.clear()
+  socChart.setOption(getSocChartOption(), { notMerge: true, lazyUpdate: false })
 }
 
 function resizeSocChart() {
-  socChart?.resize()
+  if (!socChart) return
+  socChart.resize({ animation: { duration: 300 } })
 }
 
 function destroySocChart() {
@@ -641,6 +663,7 @@ async function loadHomeBoard() {
   nextTick(() => {
     updateHazardChart()
     updateSafeDayChart()
+    updateSocChart()
     resizeHazardChart()
     resizeSafeDayChart()
     resizeSocChart()