性能: echarts图表优化、布局优化

package.json

@@ -38,6 +38,8 @@
     "pinia": "^2.0.21",
     "pinia-plugin-persistedstate": "^2.1.1",
     "print-js": "^1.6.0",
+    "raf": "^3.4.1",
+    "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.54.0",
     "splitpanes": "^3.1.1",
     "svg-sprite-loader": "^6.0.11",

src/components/DataScreen/migrationEcharts/index.vue

@@ -5,7 +5,7 @@
   import { geoJson } from './map.js'
   import * as echarts from 'echarts'
   import { EChartsType } from 'echarts/core'
-  import { onMounted } from 'vue'
+  import { onMounted, onUnmounted } from "vue";
   import { cityIconData } from './data.js'
   import logo from '@/assets/image/logo.png'
   const props = defineProps({
@@ -318,6 +318,11 @@
     chart.setOption(options)
     return chart
   }
+
+  onUnmounted(()=>{
+    chart&&chart.dispose()
+  })
+
   onMounted(() => {
     chart = initChart()
     window.addEventListener('resize', function () {

src/hooks/useResizeElement.ts

@@ -0,0 +1,39 @@
+import ResizeObserver from "resize-observer-polyfill";
+import { onBeforeUnmount } from "vue";
+import requestAnimationFrameThrottle from "@/utils/requestAnimationFrameThrottle"
+export const useResizeElement = (chart, chartsRef)=>{
+  let observer = null ;
+  let widthW = 0;
+  let heightW = 0;
+  const handleResize = (entries )=>{
+    const { contentRect } = entries[0];
+    let {width,height} = contentRect
+    width = Math.floor(width);
+    height = Math.floor(height);
+    if(widthW!==width|| heightW !== height){
+      widthW = width
+      heightW = height
+      chart && chart.resize()
+    }
+  }
+  const addObserver = ()=>{
+    observer = new ResizeObserver(requestAnimationFrameThrottle(handleResize))
+    observer.observe(chartsRef)
+  }
+
+  const removeObserver = ()=>{
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+    chart&&chart.dispose()
+  }
+
+  onBeforeUnmount(()=>{
+    removeObserver()
+  })
+
+  return{
+    addObserver
+  }
+}

src/hooks/useResizeHandler.ts

@@ -4,27 +4,46 @@ import {useRoute} from "vue-router";
 
 const { body } = document
 
-const WIDTH = 992 // refer to Bootstrap's responsive design
+const WIDTH = 800 // refer to Bootstrap's responsive design
+const MAX_WIDTH = 1200
 
 export const useResizeHandler = ()=>{
     const SettingStore = useSettingStore()
     const route = useRoute()
     const device = computed(()=>{
-
         return SettingStore.device
     })
     function $_isMobile(){
         const rect = body.getBoundingClientRect()
         return rect.width - 1 < WIDTH
     }
+
+    function collapse(){
+        const rect = body.getBoundingClientRect()
+        if(rect.width - 1 > MAX_WIDTH){
+            return true
+        }else {
+            return false
+        }
+
+    }
+
     function $_resizeHandler(){
         if (!document.hidden) { // bool型，表示页面是否处于隐藏状态。页面隐藏包括页面在后台标签页或者浏览器最小化
             const isMobile = $_isMobile()
+            const isCollapse = collapse()
             SettingStore.toggleDevice(isMobile ? 'mobile' : 'desktop')
 
+
             if (isMobile) {
                 SettingStore.closeSideBar({ withoutAnimation: true })
             }
+
+            if(!isMobile){
+                SettingStore.setCollapse(isCollapse)
+            }
+
+
         }
     }
     onMounted(()=>{

src/layout/components/Mobile/index.vue

@@ -4,7 +4,7 @@
 
 <script lang="ts" setup>
 import {computed} from "vue";
-import { useResizeHandler } from '../../hooks/useResizeHandler'
+import { useResizeHandler } from '@/hooks/useResizeHandler'
 import {useSettingStore} from "@/store/modules/setting"
 
 let { device } = useResizeHandler()

src/layout/index.vue

@@ -12,7 +12,7 @@
   import Theme from '@/components/Theme/index.vue'
   import Mobile from './components/Mobile/index.vue'
   import {useSettingStore} from "@/store/modules/setting"
-  import { useResizeHandler } from './hooks/useResizeHandler'
+  import { useResizeHandler } from '@/hooks/useResizeHandler'
   import LayoutVertical from './LayoutVertical/index.vue'
   import LayoutHorizontal from './LayoutHorizontal/index.vue'
   import LayoutColumns from './LayoutColumns/index.vue'

src/utils/requestAnimationFrameThrottle.js

@@ -0,0 +1,25 @@
+import raf from "raf";
+
+/**
+* requestAnimationFrame 节流
+* scroll 和 touchmove 等事件触发很频繁，比屏幕刷新频率更快，将导致无效的渲染和重绘
+* 这里使用 requestAnimationFrame 来优化滚动处理，在一帧中只进行一次有效重绘
+*/
+export default function requestAnimationFrameThrottle(callback) {
+  let id;
+
+  const factory = args => () => {
+    id = null;
+    callback(...args);
+  };
+
+  const throttled = (...args) => {
+    if (id == null) {
+      id = raf(factory(args));
+    }
+  };
+
+  throttled.cancel = () => raf.cancel(id);
+
+  return throttled;
+};

src/views/chat/components/u-chartBox/chat.js

@@ -1,8 +1,10 @@
+
+import wePng from '@/assets/image/we.png'
 export const chatData = [
   {
     is_self: 0,
     created_at: '2022-11-15',
-    content: 'http://182.61.5.190:8889/we.png',
+    content: wePng,
     id: 1,
     type: 2, // 文字
   },

src/views/echarts/barEcharts/index.vue

@@ -6,10 +6,10 @@
 
 <script lang="ts" setup>
 import {ref,onMounted} from "vue";
-import { EChartsType } from 'echarts/core'
 import * as echarts from 'echarts'
-const chartsRef = ref<HTMLElement | null>()
+import {useResizeElement} from '@/hooks/useResizeElement'
 
+const chartsRef = ref<HTMLElement | null>()
 let XData = ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08', '2022-09', '2022-10', '2022-11', '2022-12']
 let valueData = {
   jfsbs: [805, 860, 400, 400, 400, 400, 990, 985, 990, 850, 560, 772],
@@ -17,7 +17,6 @@ let valueData = {
   znhbl: [95, 78, 50, 60, 85, 78, 76, 70, 65, 90, 74, 66],
 }
 let options = {
-
   tooltip: {
     trigger: 'axis',
     axisPointer: { // 坐标轴指示器，坐标轴触发有效
@@ -217,17 +216,13 @@ let options = {
     }
   ]
 };
-let chart: EChartsType
-const initChart = () => {
-  const chart = echarts.init(chartsRef.value)
-  chart.setOption(options)
-  return chart
-}
+
+
 onMounted(() => {
-  chart = initChart()
-  window.addEventListener('resize', function () {
-    chart && chart.resize()
-  })
+  let chart = echarts.init(chartsRef.value)
+  chart.setOption(options)
+  let {addObserver} = useResizeElement(chart,chartsRef.value)
+  addObserver()
 })
 
 </script>

src/views/echarts/graphEcharts/index.vue

@@ -6,12 +6,11 @@
 
 <script lang="ts" setup>
 import {ref,onMounted} from "vue";
-import { EChartsType } from 'echarts/core'
 import * as echarts from 'echarts'
+import {useResizeElement} from '@/hooks/useResizeElement'
+
 const chartsRef = ref<HTMLElement | null>()
-
 let options  = {
-
   normal: {
     top: 200,
     left: 300,
@@ -196,17 +195,12 @@ let options  = {
     },
   ],
 };
-let chart: EChartsType
-const initChart = () => {
-  const chart = echarts.init(chartsRef.value)
-  chart.setOption(options)
-  return chart
-}
+
 onMounted(() => {
-  chart = initChart()
-  window.addEventListener('resize', function () {
-    chart && chart.resize()
-  })
+  let chart = echarts.init(chartsRef.value)
+  chart.setOption(options)
+  let {addObserver} = useResizeElement(chart,chartsRef.value)
+  addObserver()
 })
 
 </script>

src/views/echarts/pieEcharts/index.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import {ref,onMounted} from "vue";
-import { EChartsType } from 'echarts/core'
+import {useResizeElement} from '@/hooks/useResizeElement'
 import * as echarts from 'echarts'
 const chartsRef = ref<HTMLElement | null>()
 
@@ -105,19 +105,12 @@ let options = {
   ],
 };
 
-let chart: EChartsType
-const initChart = () => {
-  const chart = echarts.init(chartsRef.value)
-  chart.setOption(options)
-  return chart
-}
 onMounted(() => {
-  chart = initChart()
-  window.addEventListener('resize', function () {
-    chart && chart.resize()
-  })
+  let chart = echarts.init(chartsRef.value)
+  chart.setOption(options)
+  let {addObserver} = useResizeElement(chart,chartsRef.value)
+  addObserver()
 })
-
 </script>
 
 <style lang="scss" scoped>