diff --git a/src/components/Container/index.ts b/src/components/Container/index.ts index e1131178..eb708d49 100644 --- a/src/components/Container/index.ts +++ b/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'; diff --git a/src/hooks/web/useApexCharts.ts b/src/hooks/web/useApexCharts.ts index 717ed551..34fb20e7 100644 --- a/src/hooks/web/useApexCharts.ts +++ b/src/hooks/web/useApexCharts.ts @@ -4,10 +4,14 @@ import { unref, Ref, nextTick } from 'vue'; import ApexCharts from 'apexcharts'; +interface CallBackFn { + (instance: Nullable): void; +} + export function useApexCharts(elRef: Ref) { let chartInstance: Nullable = 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) { chartInstance = new ApexCharts(el, options); chartInstance && chartInstance.render(); - + // setOptions增加callback方法,返回chartInstance,以便于对图表进行再操作,例如调用updateOptions方法更新图表 callback && callback(chartInstance); - }, 30); }); } - + // 新增调用ApexCharts的updateOptions方法更新图表 function updateOptions( - chartInstance: Nullable, - options, - redraw = false, - animate = true, - updateSyncedCharts = true, - overwriteInitialConfig = true, - callback) { + chartInstance: Nullable, + 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(() => { diff --git a/src/hooks/web/useECharts.ts b/src/hooks/web/useECharts.ts index 5ad47b80..a069ddc0 100644 --- a/src/hooks/web/useECharts.ts +++ b/src/hooks/web/useECharts.ts @@ -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(() => { diff --git a/src/layouts/default/sider/MixSider.vue b/src/layouts/default/sider/MixSider.vue index 273e5726..daa5691f 100644 --- a/src/layouts/default/sider/MixSider.vue +++ b/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 { diff --git a/src/views/dashboard/analysis/components/AnalysisPie.vue b/src/views/dashboard/analysis/components/AnalysisPie.vue index f5507844..d1aacec7 100644 --- a/src/views/dashboard/analysis/components/AnalysisPie.vue +++ b/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(null); diff --git a/src/views/dashboard/analysis/components/TrendLine.vue b/src/views/dashboard/analysis/components/TrendLine.vue index 519d036b..5c952671 100644 --- a/src/views/dashboard/analysis/components/TrendLine.vue +++ b/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(null);