fix(charts): fix echarts does not display after refresh #140

vben
1 parent f69aaeab
Showing 6 changed files with 37 additions and 35 deletions
src/components/Container/index.ts
src/hooks/web/useApexCharts.ts
src/hooks/web/useECharts.ts
src/layouts/default/sider/MixSider.vue
src/views/dashboard/analysis/components/AnalysisPie.vue
src/views/dashboard/analysis/components/TrendLine.vue
 import { withInstall } from '../util';
-
+import CollapseContainer from './src/collapse/CollapseContainer.vue';
 import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 export const ScrollContainer = createAsyncComponent(() => import('./src/ScrollContainer.vue'));
-export const CollapseContainer = createAsyncComponent(
-  () => import('./src/collapse/CollapseContainer.vue')
-);
+
+// export const CollapseContainer = createAsyncComponent(
+//   () => import('./src/collapse/CollapseContainer.vue')
+// );
 export const LazyContainer = createAsyncComponent(() => import('./src/LazyContainer.vue'));
  
 withInstall(ScrollContainer, CollapseContainer, LazyContainer);
  
+export { CollapseContainer };
 export * from './src/types';
@@ -4,10 +4,14 @@ import { unref, Ref, nextTick } from &#39;vue&#39;;
  
 import ApexCharts from 'apexcharts';
  
+interface CallBackFn {
+  (instance: Nullable<ApexCharts>): void;
+}
+
 export function useApexCharts(elRef: Ref<HTMLDivElement>) {
   let chartInstance: Nullable<ApexCharts> = null;
  
-  function setOptions(options: any, callback) {
+  function setOptions(options: any, callback?: CallBackFn) {
     nextTick(() => {
       useTimeoutFn(() => {
         const el = unref(elRef);
@@ -16,37 +20,29 @@ export function useApexCharts(elRef: Ref&lt;HTMLDivElement&gt;) {
         chartInstance = new ApexCharts(el, options);
  
         chartInstance && chartInstance.render();
-        
+
         // setOptions增加callback方法，返回chartInstance，以便于对图表进行再操作，例如调用updateOptions方法更新图表
         callback && callback(chartInstance);
-        
       }, 30);
     });
   }
-  
+
   // 新增调用ApexCharts的updateOptions方法更新图表
   function updateOptions(
-  chartInstance: Nullable<ApexCharts>, 
-  options,
-  redraw = false,
-  animate = true,
-  updateSyncedCharts = true,
-  overwriteInitialConfig = true,
-  callback) {
+    chartInstance: Nullable<ApexCharts>,
+    options: any,
+    redraw = false,
+    animate = true,
+    updateSyncedCharts = true,
+    callback: CallBackFn
+  ) {
     nextTick(() => {
       useTimeoutFn(() => {
+        chartInstance && chartInstance.updateOptions(options, redraw, animate, updateSyncedCharts);
  
-        chartInstance && chartInstance.updateOptions(
-        options, 
-        redraw, 
-        animate, 
-        updateSyncedCharts, 
-        overwriteInitialConfig);
-        
         callback && callback(chartInstance);
-  
       }, 30);
-    }); 
+    });
   }
  
   tryOnUnmounted(() => {
@@ -21,10 +21,10 @@ export function useECharts(
  
   function init() {
     const el = unref(elRef);
-
     if (!el || !unref(el)) {
       return;
     }
+
     chartInstance = echarts.init(el, theme);
     const { removeEvent } = useEventListener({
       el: window,
@@ -33,7 +33,7 @@ export function useECharts(
     });
     removeResizeFn = removeEvent;
     const { widthRef, screenEnum } = useBreakpoint();
-    if (unref(widthRef) <= screenEnum.MD) {
+    if (unref(widthRef) <= screenEnum.MD || el.offsetHeight === 0) {
       useTimeoutFn(() => {
         resizeFn();
       }, 30);
@@ -41,6 +41,12 @@ export function useECharts(
   }
  
   function setOptions(options: any, clear = true) {
+    if (unref(elRef)?.offsetHeight === 0) {
+      useTimeoutFn(() => {
+        setOptions(options);
+      }, 30);
+      return;
+    }
     nextTick(() => {
       useTimeoutFn(() => {
         if (!chartInstance) {
@@ -48,16 +54,15 @@ export function useECharts(
  
           if (!chartInstance) return;
         }
-        clear && chartInstance.clear();
+        clear && chartInstance?.clear();
  
-        chartInstance && chartInstance.setOption(options);
+        chartInstance?.setOption(options);
       }, 30);
     });
   }
  
   function resize() {
-    if (!chartInstance) return;
-    chartInstance.resize();
+    chartInstance?.resize();
   }
  
   tryOnUnmounted(() => {
@@ -110,7 +110,6 @@
         getCanDrag,
         getCloseMixSidebarOnChange,
         getMenuTheme,
-        getMixSidebarTheme,
       } = useMenuSetting();
       const { title } = useGlobSetting();
  
@@ -193,7 +192,6 @@
         title,
         openMenu,
         getMenuTheme,
-        getMixSidebarTheme,
       };
     },
   });
@@ -290,9 +288,12 @@
       }
     }
  
+    > .scrollbar {
+      height: calc(100% - @header-height) !important;
+    }
+
     &-module {
       position: relative;
-      height: calc(100% - @header-height) !important;
       padding-top: 1px;
  
       &__item {
@@ -15,7 +15,6 @@
     { value: 234, name: '其他', itemStyle: { color: '#7dd9b9' } },
   ];
   export default defineComponent({
-    name: 'AnalysisLine',
     props: basicProps,
     setup() {
       const chartRef = ref<HTMLDivElement | null>(null);
@@ -8,7 +8,6 @@
  
   import { basicProps } from './props';
   export default defineComponent({
-    name: 'AnalysisLine',
     props: basicProps,
     setup() {
       const chartRef = ref<HTMLDivElement | null>(null);