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

vben

2020-12-23 5cbfb2a1f9ace8b991ac67c5b7d37b64eb2dbac8

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

 src/components/Container/index.ts

@@ -1,12 +1,14 @@
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';

 src/hooks/web/useApexCharts.ts

@@ -4,10 +4,14 @@

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 @@
        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(() => {

 src/hooks/web/useECharts.ts

@@ -21,10 +21,10 @@

  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 @@
    });
    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 @@
  }

  function setOptions(options: any, clear = true) {
    if (unref(elRef)?.offsetHeight === 0) {
      useTimeoutFn(() => {
        setOptions(options);
      }, 30);
      return;
    }
    nextTick(() => {
      useTimeoutFn(() => {
        if (!chartInstance) {
@@ -48,16 +54,15 @@

          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(() => {

 src/layouts/default/sider/MixSider.vue

@@ -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 {

 src/views/dashboard/analysis/components/AnalysisPie.vue

@@ -15,7 +15,6 @@
    { value: 234, name: '其他', itemStyle: { color: '#7dd9b9' } },
  ];
  export default defineComponent({
    name: 'AnalysisLine',
    props: basicProps,
    setup() {
      const chartRef = ref<HTMLDivElement | null>(null);

 src/views/dashboard/analysis/components/TrendLine.vue

@@ -8,7 +8,6 @@

  import { basicProps } from './props';
  export default defineComponent({
    name: 'AnalysisLine',
    props: basicProps,
    setup() {
      const chartRef = ref<HTMLDivElement | null>(null);