Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Simoje丶
vue-vben-admin
提交
5cbfb2a1
V
vue-vben-admin
项目概览
Simoje丶
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
5cbfb2a1
编写于
12月 23, 2020
作者:
V
vben
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
fix(charts): fix echarts does not display after refresh #140
上级
f69aaeab
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
37 addition
and
35 deletion
+37
-35
src/components/Container/index.ts
src/components/Container/index.ts
+6
-4
src/hooks/web/useApexCharts.ts
src/hooks/web/useApexCharts.ts
+16
-20
src/hooks/web/useECharts.ts
src/hooks/web/useECharts.ts
+11
-6
src/layouts/default/sider/MixSider.vue
src/layouts/default/sider/MixSider.vue
+4
-3
src/views/dashboard/analysis/components/AnalysisPie.vue
src/views/dashboard/analysis/components/AnalysisPie.vue
+0
-1
src/views/dashboard/analysis/components/TrendLine.vue
src/views/dashboard/analysis/components/TrendLine.vue
+0
-1
未找到文件。
src/components/Container/index.ts
浏览文件 @
5cbfb2a1
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
浏览文件 @
5cbfb2a1
...
...
@@ -4,10 +4,14 @@ import { unref, Ref, nextTick } from 'vue';
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<HTMLDivElement>) {
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
浏览文件 @
5cbfb2a1
...
...
@@ -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
(()
=>
{
...
...
src/layouts/default/sider/MixSider.vue
浏览文件 @
5cbfb2a1
...
...
@@ -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
浏览文件 @
5cbfb2a1
...
...
@@ -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
浏览文件 @
5cbfb2a1
...
...
@@ -8,7 +8,6 @@
import
{
basicProps
}
from
'
./props
'
;
export
default
defineComponent
({
name
:
'
AnalysisLine
'
,
props
:
basicProps
,
setup
()
{
const
chartRef
=
ref
<
HTMLDivElement
|
null
>
(
null
);
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录