Skip to content

Commit 6d9585b

Browse files
anncwbanncwb
committed
fix(charts): fix useCharts resize not work
1 parent 6936adb commit 6d9585b

File tree

9 files changed

+289
-279
lines changed

9 files changed

+289
-279
lines changed

‎CHANGELOG.zh_CN.md

+2
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@
1818
- 修复分割菜单且左侧菜单没有数据时候，继续展示上一次子菜单的问题
1919
- 修复`useMessage`类型问题
2020
- 修复表单项设置`disabled`不生效问题
21+
- 修复`useECharts`在`resize`时不能自适应,报错
22+
- 修复`useWatermark`在清空后`resize`未删除
2123

2224
## 2.0.0-rc.8 (2020-11-2)
2325

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"dependencies": {
2424
"@iconify/iconify": "^2.0.0-rc.1",
2525
"ant-design-vue": "^2.0.0-beta.13",
26-
"apexcharts": "^3.22.1",
26+
"apexcharts": "3.22.0",
2727
"axios": "^0.21.0",
2828
"echarts": "^4.9.0",
2929
"lodash-es": "^4.17.15",

‎src/components/Loading/FullLoading.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,8 @@
4242
width: 100%;
4343
height: 100%;
4444
// background: rgba(255, 255, 255, 0.3);
45-
background: rgba(241, 241, 246, 0.7);
45+
// background: #f0f2f5;
46+
background: rgba(240, 242, 245, 0.5);
4647
justify-content: center;
4748
align-items: center;
4849
}

‎src/hooks/web/useApexCharts.ts

+6-14
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,31 @@
11
import { useTimeout } from '/@/hooks/core/useTimeout';
22
import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
3-
import { ref, unref, Ref, nextTick } from 'vue';
3+
import { unref, Ref, nextTick } from 'vue';
44

55
import ApexCharts from 'apexcharts';
66

77
export function useApexCharts(elRef: Ref<HTMLDivElement>) {
8-
const chartInstanceRef = ref<Nullable<ApexCharts>>(null);
8+
let chartInstance: Nullable<ApexCharts> = null;
99

1010
function setOptions(options: any) {
1111
nextTick(() => {
1212
useTimeout(() => {
1313
const el = unref(elRef);
1414

15-
if (!el || !unref(el)) {
16-
return;
17-
}
18-
chartInstanceRef.value = new ApexCharts(el, options);
19-
20-
const chartInstance = unref(chartInstanceRef);
15+
if (!el || !unref(el)) return;
16+
chartInstance = new ApexCharts(el, options);
2117

2218
chartInstance && chartInstance.render();
2319
}, 30);
2420
});
2521
}
2622

2723
tryOnUnmounted(() => {
28-
let chartInstance = unref(chartInstanceRef);
29-
if (!chartInstance) {
30-
return;
31-
}
32-
24+
if (!chartInstance) return;
3325
chartInstance.destroy();
34-
chartInstanceRef.value = null;
3526
chartInstance = null;
3627
});
28+
3729
return {
3830
setOptions,
3931
};

‎src/hooks/web/useECharts.ts

+8-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useTimeout } from '/@/hooks/core/useTimeout';
22
import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
3-
import { ref, unref, Ref, nextTick } from 'vue';
3+
import { unref, Ref, nextTick } from 'vue';
44
import type { EChartOption, ECharts } from 'echarts';
55
import echarts from 'echarts';
66
import { useDebounce } from '/@/hooks/core/useDebounce';
@@ -12,7 +12,7 @@ export function useECharts(
1212
elRef: Ref<HTMLDivElement>,
1313
theme: 'light' | 'dark' | 'default' = 'light'
1414
) {
15-
const chartInstanceRef = ref<Nullable<ECharts>>(null);
15+
let chartInstance: Nullable<ECharts> = null;
1616
let resizeFn: Fn = resize;
1717
let removeResizeFn: Fn = () => {};
1818

@@ -25,7 +25,7 @@ export function useECharts(
2525
if (!el || !unref(el)) {
2626
return;
2727
}
28-
chartInstanceRef.value = echarts.init(el, theme);
28+
chartInstance = echarts.init(el, theme);
2929
const { removeEvent } = useEvent({
3030
el: window,
3131
name: 'resize',
@@ -39,21 +39,14 @@ export function useECharts(
3939
}, 30);
4040
}
4141
}
42-
tryOnUnmounted(() => {
43-
removeResizeFn();
44-
});
4542

4643
function setOptions(options: any, clear = true) {
4744
nextTick(() => {
4845
useTimeout(() => {
49-
let chartInstance = unref(chartInstanceRef);
50-
5146
if (!chartInstance) {
5247
init();
53-
chartInstance = chartInstance = unref(chartInstanceRef);
54-
if (!chartInstance) {
55-
return;
56-
}
48+
49+
if (!chartInstance) return;
5750
}
5851
clear && chartInstance.clear();
5952

@@ -63,20 +56,20 @@ export function useECharts(
6356
}
6457

6558
function resize() {
66-
const chartInstance = unref(chartInstanceRef);
6759
if (!chartInstance) return;
6860
chartInstance.resize();
6961
}
7062

7163
tryOnUnmounted(() => {
72-
const chartInstance = unref(chartInstanceRef);
7364
if (!chartInstance) return;
65+
removeResizeFn();
7466
chartInstance.dispose();
75-
chartInstanceRef.value = null;
67+
chartInstance = null;
7668
});
7769

7870
return {
7971
setOptions,
8072
echarts,
73+
resize,
8174
};
8275
}

‎src/hooks/web/useWatermark.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export function useWatermark(appendEl: Ref<HTMLElement | null> = ref(document.bo
1111
const el = unref(appendEl);
1212
el && el.removeChild(domId);
1313
}
14-
window.addEventListener('resize', func);
14+
window.removeEventListener('resize', func);
1515
};
1616
const createWatermark = (str: string) => {
1717
clear();

‎src/views/dashboard/welcome/DemoChart.vue

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<template>
2+
<div class="container">
3+
<div id="main"></div>
4+
<div id="main1" ref="elRef"></div>
5+
</div>
6+
</template>
7+
8+
<script lang="ts">
9+
// https://vega.github.io/vega/usage/
10+
import { defineComponent, onMounted, ref, unref } from 'vue';
11+
import { useECharts } from '/@/hooks/web/useECharts';
12+
import echarts from 'echarts';
13+
14+
export default defineComponent({
15+
name: 'DemoChart',
16+
setup() {
17+
const elRef = ref<any>(null);
18+
const { setOptions } = useECharts(elRef);
19+
20+
// onMounted(() => {
21+
// const el = unref(elRef);
22+
// if (!el || !unref(el)) return;
23+
// const chart = echarts.init(el);
24+
25+
// window.addEventListener('resize', () => {
26+
// chart!.resize();
27+
// });
28+
// // removeResizeFn = removeEvent;
29+
// var option = {
30+
// title: {
31+
// text: 'ECharts entry example',
32+
// },
33+
// tooltip: {},
34+
// legend: {
35+
// data: ['Sales'],
36+
// },
37+
// xAxis: {
38+
// data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks'],
39+
// },
40+
// yAxis: {},
41+
// series: [
42+
// {
43+
// name: 'Sales',
44+
// type: 'bar',
45+
// data: [5, 20, 36, 10, 10, 20],
46+
// },
47+
// ],
48+
// };
49+
// chart && chart.setOption(option as any);
50+
// });
51+
onMounted(() => {
52+
var myChart = echarts.init(elRef.value);
53+
// specify chart configuration item and data
54+
var option = {
55+
title: {
56+
text: 'ECharts entry example',
57+
},
58+
tooltip: {},
59+
legend: {
60+
data: ['Sales'],
61+
},
62+
xAxis: {
63+
data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks'],
64+
},
65+
yAxis: {},
66+
series: [
67+
{
68+
name: 'Sales',
69+
type: 'bar',
70+
data: [5, 20, 36, 10, 10, 20],
71+
},
72+
],
73+
};
74+
setOptions(option);
75+
// use configuration item and data specified to show chart
76+
// myChart.setOption(option);
77+
// window.addEventListener('resize', () => {
78+
// myChart.resize();
79+
// });
80+
});
81+
82+
return { elRef };
83+
},
84+
});
85+
</script>
86+
<style>
87+
.container {
88+
width: 100%;
89+
}
90+
91+
#main,
92+
#main1 {
93+
width: 40%;
94+
height: 300px;
95+
}
96+
</style>

‎vite.config.ts

-1
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,6 @@ const viteConfig: UserConfig = {
120120
// The package will be recompiled using rollup, and the new package compiled into the esm module specification will be put into node_modules/.vite_opt_cache
121121
optimizeDeps: {
122122
include: [
123-
'echarts',
124123
'echarts/map/js/china',
125124
'ant-design-vue/es/locale/zh_CN',
126125
'@ant-design/icons-vue',

0 commit comments

Comments
 (0)