fix(charts): fix useCharts resize not work

CHANGELOG.zh_CN.md

@@ -18,6 +18,8 @@
 - 修复分割菜单且左侧菜单没有数据时候，继续展示上一次子菜单的问题
 - 修复`useMessage`类型问题
 - 修复表单项设置`disabled`不生效问题
+- 修复`useECharts`在`resize`时不能自适应,报错
+- 修复`useWatermark`在清空后`resize`未删除
 
 ## 2.0.0-rc.8 (2020-11-2)
 

package.json

@@ -23,7 +23,7 @@
   "dependencies": {
     "@iconify/iconify": "^2.0.0-rc.1",
     "ant-design-vue": "^2.0.0-beta.13",
-    "apexcharts": "^3.22.1",
+    "apexcharts": "3.22.0",
     "axios": "^0.21.0",
     "echarts": "^4.9.0",
     "lodash-es": "^4.17.15",

src/components/Loading/FullLoading.vue

@@ -42,7 +42,8 @@
     width: 100%;
     height: 100%;
     // background: rgba(255, 255, 255, 0.3);
-    background: rgba(241, 241, 246, 0.7);
+    // background: #f0f2f5;
+    background: rgba(240, 242, 245, 0.5);
     justify-content: center;
     align-items: center;
   }

src/hooks/web/useApexCharts.ts

 import { useTimeout } from '/@/hooks/core/useTimeout';
 import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
-import { ref, unref, Ref, nextTick } from 'vue';
+import { unref, Ref, nextTick } from 'vue';
 
 import ApexCharts from 'apexcharts';
 
 export function useApexCharts(elRef: Ref<HTMLDivElement>) {
-  const chartInstanceRef = ref<Nullable<ApexCharts>>(null);
+  let chartInstance: Nullable<ApexCharts> = null;
 
   function setOptions(options: any) {
     nextTick(() => {
       useTimeout(() => {
         const el = unref(elRef);
 
-        if (!el || !unref(el)) {
-          return;
-        }
-        chartInstanceRef.value = new ApexCharts(el, options);
-
-        const chartInstance = unref(chartInstanceRef);
+        if (!el || !unref(el)) return;
+        chartInstance = new ApexCharts(el, options);
 
         chartInstance && chartInstance.render();
       }, 30);
@@ -25,15 +21,11 @@ export function useApexCharts(elRef: Ref<HTMLDivElement>) {
   }
 
   tryOnUnmounted(() => {
-    let chartInstance = unref(chartInstanceRef);
-    if (!chartInstance) {
-      return;
-    }
-
+    if (!chartInstance) return;
     chartInstance.destroy();
-    chartInstanceRef.value = null;
     chartInstance = null;
   });
+
   return {
     setOptions,
   };

src/hooks/web/useECharts.ts

 import { useTimeout } from '/@/hooks/core/useTimeout';
 import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
-import { ref, unref, Ref, nextTick } from 'vue';
+import { unref, Ref, nextTick } from 'vue';
 import type { EChartOption, ECharts } from 'echarts';
 import echarts from 'echarts';
 import { useDebounce } from '/@/hooks/core/useDebounce';
@@ -12,7 +12,7 @@ export function useECharts(
   elRef: Ref<HTMLDivElement>,
   theme: 'light' | 'dark' | 'default' = 'light'
 ) {
-  const chartInstanceRef = ref<Nullable<ECharts>>(null);
+  let chartInstance: Nullable<ECharts> = null;
   let resizeFn: Fn = resize;
   let removeResizeFn: Fn = () => {};
 
@@ -25,7 +25,7 @@ export function useECharts(
     if (!el || !unref(el)) {
       return;
     }
-    chartInstanceRef.value = echarts.init(el, theme);
+    chartInstance = echarts.init(el, theme);
     const { removeEvent } = useEvent({
       el: window,
       name: 'resize',
@@ -39,21 +39,14 @@ export function useECharts(
       }, 30);
     }
   }
-  tryOnUnmounted(() => {
-    removeResizeFn();
-  });
 
   function setOptions(options: any, clear = true) {
     nextTick(() => {
       useTimeout(() => {
-        let chartInstance = unref(chartInstanceRef);
-
         if (!chartInstance) {
           init();
-          chartInstance = chartInstance = unref(chartInstanceRef);
-          if (!chartInstance) {
-            return;
-          }
+
+          if (!chartInstance) return;
         }
         clear && chartInstance.clear();
 
@@ -63,20 +56,20 @@ export function useECharts(
   }
 
   function resize() {
-    const chartInstance = unref(chartInstanceRef);
     if (!chartInstance) return;
     chartInstance.resize();
   }
 
   tryOnUnmounted(() => {
-    const chartInstance = unref(chartInstanceRef);
     if (!chartInstance) return;
+    removeResizeFn();
     chartInstance.dispose();
-    chartInstanceRef.value = null;
+    chartInstance = null;
   });
 
   return {
     setOptions,
     echarts,
+    resize,
   };
 }

src/hooks/web/useWatermark.ts

@@ -11,7 +11,7 @@ export function useWatermark(appendEl: Ref<HTMLElement | null> = ref(document.bo
       const el = unref(appendEl);
       el && el.removeChild(domId);
     }
-    window.addEventListener('resize', func);
+    window.removeEventListener('resize', func);
   };
   const createWatermark = (str: string) => {
     clear();

src/views/dashboard/welcome/DemoChart.vue

+<template>
+  <div class="container">
+    <div id="main"></div>
+    <div id="main1" ref="elRef"></div>
+  </div>
+</template>
+
+<script lang="ts">
+  // https://vega.github.io/vega/usage/
+  import { defineComponent, onMounted, ref, unref } from 'vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import echarts from 'echarts';
+
+  export default defineComponent({
+    name: 'DemoChart',
+    setup() {
+      const elRef = ref<any>(null);
+      const { setOptions } = useECharts(elRef);
+
+      // onMounted(() => {
+      //   const el = unref(elRef);
+      //   if (!el || !unref(el)) return;
+      //   const chart = echarts.init(el);
+
+      //   window.addEventListener('resize', () => {
+      //     chart!.resize();
+      //   });
+      //   // removeResizeFn = removeEvent;
+      //   var option = {
+      //     title: {
+      //       text: 'ECharts entry example',
+      //     },
+      //     tooltip: {},
+      //     legend: {
+      //       data: ['Sales'],
+      //     },
+      //     xAxis: {
+      //       data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks'],
+      //     },
+      //     yAxis: {},
+      //     series: [
+      //       {
+      //         name: 'Sales',
+      //         type: 'bar',
+      //         data: [5, 20, 36, 10, 10, 20],
+      //       },
+      //     ],
+      //   };
+      //   chart && chart.setOption(option as any);
+      // });
+      onMounted(() => {
+        var myChart = echarts.init(elRef.value);
+        // specify chart configuration item and data
+        var option = {
+          title: {
+            text: 'ECharts entry example',
+          },
+          tooltip: {},
+          legend: {
+            data: ['Sales'],
+          },
+          xAxis: {
+            data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks'],
+          },
+          yAxis: {},
+          series: [
+            {
+              name: 'Sales',
+              type: 'bar',
+              data: [5, 20, 36, 10, 10, 20],
+            },
+          ],
+        };
+        setOptions(option);
+        // use configuration item and data specified to show chart
+        // myChart.setOption(option);
+        // window.addEventListener('resize', () => {
+        //   myChart.resize();
+        // });
+      });
+
+      return { elRef };
+    },
+  });
+</script>
+<style>
+  .container {
+    width: 100%;
+  }
+
+  #main,
+  #main1 {
+    width: 40%;
+    height: 300px;
+  }
+</style>

vite.config.ts

@@ -120,7 +120,6 @@ const viteConfig: UserConfig = {
   // 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
   optimizeDeps: {
     include: [
-      'echarts',
       'echarts/map/js/china',
       'ant-design-vue/es/locale/zh_CN',
       '@ant-design/icons-vue',