From 5ac1b0a2f8696c44d7b1ec348c20110c292f050a Mon Sep 17 00:00:00 2001
From: nowisfuture <lnzhangsong@live.com>
Date: Fri, 27 Aug 2021 17:22:18 +0800
Subject: [PATCH 1/4] =?UTF-8?q?refactor(quadrant-diagram-axis):=20?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=96=87=E4=BB=B6=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/quadrant-diagram/config.ts                          | 4 ++++
 devui/quadrant-diagram/index.ts                           | 2 +-
 devui/quadrant-diagram/src/components/axis/index.tsx      | 8 +++++---
 .../{quadrant-diagram.tsx => quadrant-diagram/index.tsx}  | 8 ++++----
 .../types.ts}                                             | 6 +++---
 5 files changed, 17 insertions(+), 11 deletions(-)
 rename devui/quadrant-diagram/src/{quadrant-diagram.tsx => quadrant-diagram/index.tsx} (89%)
 rename devui/quadrant-diagram/src/{quadrant-diagram-types.ts => quadrant-diagram/types.ts} (70%)

diff --git a/devui/quadrant-diagram/config.ts b/devui/quadrant-diagram/config.ts
index f5902f08..c89a9443 100644
--- a/devui/quadrant-diagram/config.ts
+++ b/devui/quadrant-diagram/config.ts
@@ -29,6 +29,10 @@ export const DEFAULT_QUADRANT_CONFIGS = [
   { title: '不重要不紧急' },
   { title: '不重要紧急' }
 ];
+export const DEFAULT_VIEW_CONFIGS = {
+  height: 900,
+  width: 950,
+}
 export const AXIS_TITLE_SPACE = 15;
 export const SMALL_LABEL_SIZE_CENTER_POINT = {
   x: 6, y: 6
diff --git a/devui/quadrant-diagram/index.ts b/devui/quadrant-diagram/index.ts
index 86648b6f..eff8bdbb 100644
--- a/devui/quadrant-diagram/index.ts
+++ b/devui/quadrant-diagram/index.ts
@@ -1,5 +1,5 @@
 import type { App } from 'vue'
-import QuadrantDiagram from './src/quadrant-diagram'
+import QuadrantDiagram from './src/quadrant-diagram/index'
 
 QuadrantDiagram.install = function (app: App) {
   app.component(QuadrantDiagram.name, QuadrantDiagram)
diff --git a/devui/quadrant-diagram/src/components/axis/index.tsx b/devui/quadrant-diagram/src/components/axis/index.tsx
index f7353d00..cc026af8 100644
--- a/devui/quadrant-diagram/src/components/axis/index.tsx
+++ b/devui/quadrant-diagram/src/components/axis/index.tsx
@@ -114,7 +114,7 @@ const Axis = defineComponent({
      * 绘制轴线刻度
      */
     const drawXAxisTicks = () => {
-      let deltaY;
+      let deltaY: number;
       for (let i = 1; i < axisInnerAttr.xAxisTicksNum; i++) {
         context.value.beginPath();
         // 判断显示长刻度还是短刻度
@@ -132,7 +132,7 @@ const Axis = defineComponent({
 
     }
     const drawYAxisTicks = () => {
-      let deltaX;
+      let deltaX: number;
       for (let i = 1; i < axisInnerAttr.yAxisTicksNum; i++) {
         context.value.beginPath();
         if (i % axisConfigsVal.yAxisRange.step === 0) {
@@ -147,7 +147,9 @@ const Axis = defineComponent({
         context.value.stroke();
       }
     }
-
+    /**
+     * 绘制轴线标签
+     */
     const drawAxisLabels = () => {
       context.value.save();
       context.value.fillStyle = AXIS_LABEL_COLOR.value;
diff --git a/devui/quadrant-diagram/src/quadrant-diagram.tsx b/devui/quadrant-diagram/src/quadrant-diagram/index.tsx
similarity index 89%
rename from devui/quadrant-diagram/src/quadrant-diagram.tsx
rename to devui/quadrant-diagram/src/quadrant-diagram/index.tsx
index d5506a13..e151bc06 100644
--- a/devui/quadrant-diagram/src/quadrant-diagram.tsx
+++ b/devui/quadrant-diagram/src/quadrant-diagram/index.tsx
@@ -1,7 +1,7 @@
 import { defineComponent, toRefs, ref, onMounted, reactive } from 'vue'
-import { quadrantDiagramProps, QuadrantDiagramProps } from './quadrant-diagram-types'
-import DQuadrantDiagramAxis from './components/axis';
-import { DEFAULT_AXIS_CONFIGS } from '../config';
+import { quadrantDiagramProps, QuadrantDiagramProps } from './types'
+import DQuadrantDiagramAxis from '../components/axis';
+import { DEFAULT_AXIS_CONFIGS } from '../../config';
 
 export default defineComponent({
   name: 'DQuadrantDiagram',
@@ -54,7 +54,7 @@ export default defineComponent({
     const { diagramId, calAxisConfig, viewVal } = this;
 
     return (
-      <div class="devui-quadrant-diagram" id={diagramId}>
+      <div className="devui-quadrant-diagram" id={diagramId}>
         <DQuadrantDiagramAxis diagramId={diagramId} axisConfigs={calAxisConfig} view={viewVal} />
       </div>
     )
diff --git a/devui/quadrant-diagram/src/quadrant-diagram-types.ts b/devui/quadrant-diagram/src/quadrant-diagram/types.ts
similarity index 70%
rename from devui/quadrant-diagram/src/quadrant-diagram-types.ts
rename to devui/quadrant-diagram/src/quadrant-diagram/types.ts
index 3513e64f..774e7258 100644
--- a/devui/quadrant-diagram/src/quadrant-diagram-types.ts
+++ b/devui/quadrant-diagram/src/quadrant-diagram/types.ts
@@ -1,6 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue'
-import { DEFAULT_AXIS_CONFIGS } from '../config';
-import { IViewConfigs, IAxisConfigs } from '../type';
+import { DEFAULT_AXIS_CONFIGS, DEFAULT_VIEW_CONFIGS } from '../../config';
+import { IViewConfigs, IAxisConfigs } from '../../type';
 
 export const quadrantDiagramProps = {
   diagramId: {
@@ -13,7 +13,7 @@ export const quadrantDiagramProps = {
   },
   view: {
     type: Object as PropType<IViewConfigs>,
-    default: { height: 720, width: 720 },
+    default: DEFAULT_VIEW_CONFIGS,
   },
 } as const
 
-- 
Gitee


From a4fa7f53fdff2f7e349001678d9078f8caee29d4 Mon Sep 17 00:00:00 2001
From: nowisfuture <lnzhangsong@live.com>
Date: Wed, 1 Sep 2021 21:49:40 +0800
Subject: [PATCH 2/4] =?UTF-8?q?refactor(quadrant-diagram-axis):=20s?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=20watch=20=E8=BF=9B=E8=A1=8C=E5=9D=90?=
 =?UTF-8?q?=E6=A0=87=E7=B3=BB=E7=9A=84=E9=87=8D=E7=BB=98,=20=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E4=B8=8D=E9=9C=80=E8=A6=81=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/axis/index.tsx                | 16 +++++++++-------
 .../src/quadrant-diagram/index.tsx               | 16 ++++++++++------
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/devui/quadrant-diagram/src/components/axis/index.tsx b/devui/quadrant-diagram/src/components/axis/index.tsx
index cc026af8..b8c9ba99 100644
--- a/devui/quadrant-diagram/src/components/axis/index.tsx
+++ b/devui/quadrant-diagram/src/components/axis/index.tsx
@@ -1,15 +1,15 @@
-import { defineComponent, toRefs, onMounted, ExtractPropTypes, reactive, ref } from 'vue'
+import { defineComponent, toRefs, onMounted, ExtractPropTypes, reactive, ref, watch } from 'vue'
 import { IViewConfigs, IAxisConfigs } from '../../../type';
 import { AXIS_TITLE_SPACE } from '../../../config';
-import { quadrantDiagramAxisProps } from './types'
+import { quadrantDiagramAxisProps, QuadrantDiagramAxisProps } from './types'
 import { debounce } from 'lodash';
 
 import './index.scss'
 
-const Axis = defineComponent({
+export default defineComponent({
   name: 'DQuadrantDiagramAxis',
   props: quadrantDiagramAxisProps,
-  setup(props: ExtractPropTypes<typeof quadrantDiagramAxisProps>) {
+  setup(props: QuadrantDiagramAxisProps) {
 
     const { diagramId, view, axisConfigs } = toRefs(props);
     const AXIS_COLOR = ref('#0000ff');
@@ -39,6 +39,10 @@ const Axis = defineComponent({
     onMounted(() => {
       resetAxis();
     });
+    
+    watch(viewVal, () => {
+      resetAxis();
+    });
 
     const resetAxis = debounce(() => {
       initAxisData();
@@ -221,6 +225,4 @@ const Axis = defineComponent({
       </div>
     );
   }
-})
-
-export default Axis;
\ No newline at end of file
+});
\ No newline at end of file
diff --git a/devui/quadrant-diagram/src/quadrant-diagram/index.tsx b/devui/quadrant-diagram/src/quadrant-diagram/index.tsx
index e151bc06..a589f4f3 100644
--- a/devui/quadrant-diagram/src/quadrant-diagram/index.tsx
+++ b/devui/quadrant-diagram/src/quadrant-diagram/index.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, ref, onMounted, reactive } from 'vue'
+import { defineComponent, toRefs, reactive, watch } from 'vue'
 import { quadrantDiagramProps, QuadrantDiagramProps } from './types'
 import DQuadrantDiagramAxis from '../components/axis';
 import { DEFAULT_AXIS_CONFIGS } from '../../config';
@@ -7,7 +7,7 @@ export default defineComponent({
   name: 'DQuadrantDiagram',
   props: quadrantDiagramProps,
   emits: [],
-  setup(props, ctx) {
+  setup(props: QuadrantDiagramProps) {
     const { diagramId, axisConfigs, view } = toRefs(props);
 
     const axisConfigsVal = axisConfigs.value;
@@ -48,14 +48,18 @@ export default defineComponent({
 
     initAxisData();
 
-    return { diagramId, calAxisConfig, viewVal };
+    watch(viewVal, () => {
+      initAxisData();
+    })
+
+    return { diagramId, calAxisConfig, view };
   },
   render() {
-    const { diagramId, calAxisConfig, viewVal } = this;
+    const { diagramId, calAxisConfig, view } = this;
 
     return (
-      <div className="devui-quadrant-diagram" id={diagramId}>
-        <DQuadrantDiagramAxis diagramId={diagramId} axisConfigs={calAxisConfig} view={viewVal} />
+      <div class="devui-quadrant-diagram" id={diagramId}>
+        <DQuadrantDiagramAxis diagramId={diagramId} axisConfigs={calAxisConfig} view={view} />
       </div>
     )
   }
-- 
Gitee


From 3ec1398eea1ccc9b372738cd91c35e4e5b2bd1b4 Mon Sep 17 00:00:00 2001
From: nowisfuture <lnzhangsong@live.com>
Date: Fri, 10 Sep 2021 08:54:07 +0800
Subject: [PATCH 3/4] =?UTF-8?q?refactor(quadrant-diagram):=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E6=96=87=E4=BB=B6=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 devui/quadrant-diagram/index.ts               |  2 +-
 .../types.ts => quadrant-diagram-types.ts}    |  4 +--
 .../index.tsx => quadrant-diagram.tsx}        |  8 +++---
 sites/components/quadrant-diagram/index.md    | 27 ++++++++++++++++++-
 4 files changed, 33 insertions(+), 8 deletions(-)
 rename devui/quadrant-diagram/src/{quadrant-diagram/types.ts => quadrant-diagram-types.ts} (76%)
 rename devui/quadrant-diagram/src/{quadrant-diagram/index.tsx => quadrant-diagram.tsx} (90%)

diff --git a/devui/quadrant-diagram/index.ts b/devui/quadrant-diagram/index.ts
index eff8bdbb..86648b6f 100644
--- a/devui/quadrant-diagram/index.ts
+++ b/devui/quadrant-diagram/index.ts
@@ -1,5 +1,5 @@
 import type { App } from 'vue'
-import QuadrantDiagram from './src/quadrant-diagram/index'
+import QuadrantDiagram from './src/quadrant-diagram'
 
 QuadrantDiagram.install = function (app: App) {
   app.component(QuadrantDiagram.name, QuadrantDiagram)
diff --git a/devui/quadrant-diagram/src/quadrant-diagram/types.ts b/devui/quadrant-diagram/src/quadrant-diagram-types.ts
similarity index 76%
rename from devui/quadrant-diagram/src/quadrant-diagram/types.ts
rename to devui/quadrant-diagram/src/quadrant-diagram-types.ts
index 774e7258..abef19f7 100644
--- a/devui/quadrant-diagram/src/quadrant-diagram/types.ts
+++ b/devui/quadrant-diagram/src/quadrant-diagram-types.ts
@@ -1,6 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue'
-import { DEFAULT_AXIS_CONFIGS, DEFAULT_VIEW_CONFIGS } from '../../config';
-import { IViewConfigs, IAxisConfigs } from '../../type';
+import { DEFAULT_AXIS_CONFIGS, DEFAULT_VIEW_CONFIGS } from '../config';
+import { IViewConfigs, IAxisConfigs } from '../type';
 
 export const quadrantDiagramProps = {
   diagramId: {
diff --git a/devui/quadrant-diagram/src/quadrant-diagram/index.tsx b/devui/quadrant-diagram/src/quadrant-diagram.tsx
similarity index 90%
rename from devui/quadrant-diagram/src/quadrant-diagram/index.tsx
rename to devui/quadrant-diagram/src/quadrant-diagram.tsx
index a589f4f3..d04e64c9 100644
--- a/devui/quadrant-diagram/src/quadrant-diagram/index.tsx
+++ b/devui/quadrant-diagram/src/quadrant-diagram.tsx
@@ -1,7 +1,7 @@
 import { defineComponent, toRefs, reactive, watch } from 'vue'
-import { quadrantDiagramProps, QuadrantDiagramProps } from './types'
-import DQuadrantDiagramAxis from '../components/axis';
-import { DEFAULT_AXIS_CONFIGS } from '../../config';
+import { quadrantDiagramProps, QuadrantDiagramProps } from './quadrant-diagram-types'
+import DQuadrantDiagramAxis from './components/axis';
+import { DEFAULT_AXIS_CONFIGS } from '../config';
 
 export default defineComponent({
   name: 'DQuadrantDiagram',
@@ -52,7 +52,7 @@ export default defineComponent({
       initAxisData();
     })
 
-    return { diagramId, calAxisConfig, view };
+    return { diagramId, calAxisConfig, };
   },
   render() {
     const { diagramId, calAxisConfig, view } = this;
diff --git a/sites/components/quadrant-diagram/index.md b/sites/components/quadrant-diagram/index.md
index 8a3e8f62..34ae9854 100644
--- a/sites/components/quadrant-diagram/index.md
+++ b/sites/components/quadrant-diagram/index.md
@@ -13,7 +13,32 @@
 :::demo
 
 ```vue
-<d-quadrant-diagram />
+<template>
+  <d-quadrant-diagram :view='view'/>
+  <d-button @click='handle'/>
+</template>
+
+
+<script>
+import { defineComponent, reactive } from 'vue'
+
+export default ({
+  setup() {
+    const view = reactive({
+      height: 200,
+      width: 200,
+    });
+    const handle = () => {
+      view.height = 400;
+      view.width = 400;
+    };
+    return {
+      handle,
+      view,
+    }
+  }
+})
+</script>
 ```
 
 :::
-- 
Gitee


From da3fab9539c555821153ef48f9661a1ec7efd857 Mon Sep 17 00:00:00 2001
From: nowisfuture <lnzhangsong@live.com>
Date: Fri, 10 Sep 2021 08:56:47 +0800
Subject: [PATCH 4/4] =?UTF-8?q?refactor(quadrant-diagram):=20=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E5=88=86=E5=8F=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/axis/index.tsx             | 216 +++++++++---------
 .../src/components/axis/types.ts              |   2 +-
 .../src/quadrant-diagram-types.ts             |   4 +-
 .../quadrant-diagram/src/quadrant-diagram.tsx |  40 ++--
 4 files changed, 131 insertions(+), 131 deletions(-)

diff --git a/devui/quadrant-diagram/src/components/axis/index.tsx b/devui/quadrant-diagram/src/components/axis/index.tsx
index b8c9ba99..0e0d7d39 100644
--- a/devui/quadrant-diagram/src/components/axis/index.tsx
+++ b/devui/quadrant-diagram/src/components/axis/index.tsx
@@ -1,8 +1,8 @@
 import { defineComponent, toRefs, onMounted, ExtractPropTypes, reactive, ref, watch } from 'vue'
-import { IViewConfigs, IAxisConfigs } from '../../../type';
-import { AXIS_TITLE_SPACE } from '../../../config';
+import { IViewConfigs, IAxisConfigs } from '../../../type'
+import { AXIS_TITLE_SPACE } from '../../../config'
 import { quadrantDiagramAxisProps, QuadrantDiagramAxisProps } from './types'
-import { debounce } from 'lodash';
+import { debounce } from 'lodash'
 
 import './index.scss'
 
@@ -11,12 +11,12 @@ export default defineComponent({
   props: quadrantDiagramAxisProps,
   setup(props: QuadrantDiagramAxisProps) {
 
-    const { diagramId, view, axisConfigs } = toRefs(props);
-    const AXIS_COLOR = ref('#0000ff');
-    const AXIS_LABEL_COLOR = ref('#ff0000');
+    const { diagramId, view, axisConfigs } = toRefs(props)
+    const AXIS_COLOR = ref('#0000ff')
+    const AXIS_LABEL_COLOR = ref('#ff0000')
 
-    const quadrantAxis = ref();
-    const context = ref();
+    const quadrantAxis = ref()
+    const context = ref()
     const axisInnerAttr = reactive({
       axisOrigin: {
         x: 0,
@@ -32,185 +32,185 @@ export default defineComponent({
       yTickSpacing: 0,
     })
 
-    const axisConfigsVal: IAxisConfigs = axisConfigs.value;
-    const viewVal: IViewConfigs = view.value;
+    const axisConfigsVal: IAxisConfigs = axisConfigs.value
+    const viewVal: IViewConfigs = view.value
 
 
     onMounted(() => {
-      resetAxis();
-    });
+      resetAxis()
+    })
     
     watch(viewVal, () => {
-      resetAxis();
-    });
+      resetAxis()
+    })
 
     const resetAxis = debounce(() => {
-      initAxisData();
-      setAxisData();
-      drawAxis();
-      drawAxisLabels();
-    }, 200);
+      initAxisData()
+      setAxisData()
+      drawAxis()
+      drawAxisLabels()
+    }, 200)
 
     /**
      * 获取 canvas 并赋值宽高
      */
     const initAxisData = () => {
-      quadrantAxis.value = document.querySelector('#devui-quadrant-axis-' + diagramId.value);
-      quadrantAxis.value.width = viewVal.width;
-      quadrantAxis.value.height = viewVal.height;
+      quadrantAxis.value = document.querySelector('#devui-quadrant-axis-' + diagramId.value)
+      quadrantAxis.value.width = viewVal.width
+      quadrantAxis.value.height = viewVal.height
     }
 
     const setAxisData = () => {
-      context.value = quadrantAxis.value.getContext('2d');
-      axisInnerAttr.axisOrigin = axisConfigsVal.axisOrigin;
-      axisInnerAttr.axisTop = axisConfigsVal.axisTop;
-      axisInnerAttr.axisRight = axisConfigsVal.axisRight;
-      axisInnerAttr.axisWidth = axisConfigsVal.axisWidth;
-      axisInnerAttr.axisHeight = axisConfigsVal.axisHeight;
-      axisInnerAttr.yAxisTicksNum = axisConfigsVal.yAxisTicksNum;
-      axisInnerAttr.xAxisTicksNum = axisConfigsVal.xAxisTicksNum;
-      axisInnerAttr.xTickSpacing = axisConfigsVal.xTickSpacing;
-      axisInnerAttr.yTickSpacing = axisConfigsVal.yTickSpacing;
+      context.value = quadrantAxis.value.getContext('2d')
+      axisInnerAttr.axisOrigin = axisConfigsVal.axisOrigin
+      axisInnerAttr.axisTop = axisConfigsVal.axisTop
+      axisInnerAttr.axisRight = axisConfigsVal.axisRight
+      axisInnerAttr.axisWidth = axisConfigsVal.axisWidth
+      axisInnerAttr.axisHeight = axisConfigsVal.axisHeight
+      axisInnerAttr.yAxisTicksNum = axisConfigsVal.yAxisTicksNum
+      axisInnerAttr.xAxisTicksNum = axisConfigsVal.xAxisTicksNum
+      axisInnerAttr.xTickSpacing = axisConfigsVal.xTickSpacing
+      axisInnerAttr.yTickSpacing = axisConfigsVal.yTickSpacing
     }
 
     /** 
      * 执行绘制 
      */
     const drawAxis = () => {
-      context.value.save();
-      context.value.fillStyle = AXIS_COLOR.value;
-      context.value.strokeStyle = AXIS_COLOR.value;
-      drawXAxis();
-      drawYAxis();
-      context.value.lineWidth = 0.5;
-      drawXAxisTicks();
-      drawYAxisTicks();
-      context.value.restore();
+      context.value.save()
+      context.value.fillStyle = AXIS_COLOR.value
+      context.value.strokeStyle = AXIS_COLOR.value
+      drawXAxis()
+      drawYAxis()
+      context.value.lineWidth = 0.5
+      drawXAxisTicks()
+      drawYAxisTicks()
+      context.value.restore()
     }
 
     /**
      * 绘制 XY 轴
      */
     const drawYAxis = () => {
-      context.value.beginPath();
-      context.value.moveTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisOrigin.y);
-      context.value.lineTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisTop - axisConfigsVal.axisMargin);
-      context.value.stroke();
-      context.value.moveTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisTop - axisConfigsVal.axisMargin);
-      context.value.lineTo(axisInnerAttr.axisOrigin.x + 5, axisInnerAttr.axisTop - axisConfigsVal.axisMargin + 10);
-      context.value.lineTo(axisInnerAttr.axisOrigin.x - 5, axisInnerAttr.axisTop - axisConfigsVal.axisMargin + 10);
-      context.value.fill();
+      context.value.beginPath()
+      context.value.moveTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisOrigin.y)
+      context.value.lineTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisTop - axisConfigsVal.axisMargin)
+      context.value.stroke()
+      context.value.moveTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisTop - axisConfigsVal.axisMargin)
+      context.value.lineTo(axisInnerAttr.axisOrigin.x + 5, axisInnerAttr.axisTop - axisConfigsVal.axisMargin + 10)
+      context.value.lineTo(axisInnerAttr.axisOrigin.x - 5, axisInnerAttr.axisTop - axisConfigsVal.axisMargin + 10)
+      context.value.fill()
 
     }
     const drawXAxis = () => {
-      context.value.beginPath();
-      context.value.moveTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisOrigin.y);
-      context.value.lineTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin - 10, axisInnerAttr.axisOrigin.y);
-      context.value.stroke();
+      context.value.beginPath()
+      context.value.moveTo(axisInnerAttr.axisOrigin.x, axisInnerAttr.axisOrigin.y)
+      context.value.lineTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin - 10, axisInnerAttr.axisOrigin.y)
+      context.value.stroke()
       // 绘制坐标轴三角形
-      context.value.moveTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin, axisInnerAttr.axisOrigin.y);
-      context.value.lineTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin - 10, axisInnerAttr.axisOrigin.y + 5);
-      context.value.lineTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin - 10, axisInnerAttr.axisOrigin.y - 5);
-      context.value.fill();
+      context.value.moveTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin, axisInnerAttr.axisOrigin.y)
+      context.value.lineTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin - 10, axisInnerAttr.axisOrigin.y + 5)
+      context.value.lineTo(axisInnerAttr.axisRight + axisConfigsVal.axisMargin - 10, axisInnerAttr.axisOrigin.y - 5)
+      context.value.fill()
     }
 
     /**
      * 绘制轴线刻度
      */
     const drawXAxisTicks = () => {
-      let deltaY: number;
+      let deltaY: number
       for (let i = 1; i < axisInnerAttr.xAxisTicksNum; i++) {
-        context.value.beginPath();
+        context.value.beginPath()
         // 判断显示长刻度还是短刻度
         if (i % axisConfigsVal.xAxisRange.step === 0) {
-          deltaY = axisConfigsVal.tickWidth;
+          deltaY = axisConfigsVal.tickWidth
         } else {
-          deltaY = axisConfigsVal.tickWidth / 2;
+          deltaY = axisConfigsVal.tickWidth / 2
         }
         context.value.moveTo(axisInnerAttr.axisOrigin.x + i * axisInnerAttr.xTickSpacing,
-          axisInnerAttr.axisOrigin.y - deltaY);
+          axisInnerAttr.axisOrigin.y - deltaY)
         context.value.lineTo(axisInnerAttr.axisOrigin.x + i * axisInnerAttr.xTickSpacing,
-          axisInnerAttr.axisOrigin.y + deltaY);
-        context.value.stroke();
+          axisInnerAttr.axisOrigin.y + deltaY)
+        context.value.stroke()
       }
 
     }
     const drawYAxisTicks = () => {
-      let deltaX: number;
+      let deltaX: number
       for (let i = 1; i < axisInnerAttr.yAxisTicksNum; i++) {
-        context.value.beginPath();
+        context.value.beginPath()
         if (i % axisConfigsVal.yAxisRange.step === 0) {
-          deltaX = axisConfigsVal.tickWidth;
+          deltaX = axisConfigsVal.tickWidth
         } else {
-          deltaX = axisConfigsVal.tickWidth / 2;
+          deltaX = axisConfigsVal.tickWidth / 2
         }
         context.value.moveTo(axisInnerAttr.axisOrigin.x - deltaX,
-          axisInnerAttr.axisOrigin.y - i * axisInnerAttr.yTickSpacing);
+          axisInnerAttr.axisOrigin.y - i * axisInnerAttr.yTickSpacing)
         context.value.lineTo(axisInnerAttr.axisOrigin.x + deltaX,
-          axisInnerAttr.axisOrigin.y - i * axisInnerAttr.yTickSpacing);
-        context.value.stroke();
+          axisInnerAttr.axisOrigin.y - i * axisInnerAttr.yTickSpacing)
+        context.value.stroke()
       }
     }
     /**
      * 绘制轴线标签
      */
     const drawAxisLabels = () => {
-      context.value.save();
-      context.value.fillStyle = AXIS_LABEL_COLOR.value;
-      drawXTicksLabels();
-      drawYTicksLabels();
-      context.value.restore();
-      drawAxisTitle();
+      context.value.save()
+      context.value.fillStyle = AXIS_LABEL_COLOR.value
+      drawXTicksLabels()
+      drawYTicksLabels()
+      context.value.restore()
+      drawAxisTitle()
     }
 
     const drawXTicksLabels = () => {
-      context.value.textAlign = 'center';
-      context.value.textBaseline = 'top';
+      context.value.textAlign = 'center'
+      context.value.textBaseline = 'top'
       for (let i = 0; i <= axisInnerAttr.xAxisTicksNum; i++) {
         if (i % axisConfigsVal.xAxisRange.step === 0) {
           context.value.fillText(i, axisInnerAttr.axisOrigin.x + i * axisInnerAttr.xTickSpacing,
-            axisInnerAttr.axisOrigin.y + axisConfigsVal.spaceBetweenLabelsAxis);
+            axisInnerAttr.axisOrigin.y + axisConfigsVal.spaceBetweenLabelsAxis)
         }
       }
-    };
+    }
     const drawYTicksLabels = () => {
-      context.value.textAlign = 'center';
-      context.value.textBaseline = 'middle';
+      context.value.textAlign = 'center'
+      context.value.textBaseline = 'middle'
       for (let i = 0; i <= axisInnerAttr.yAxisTicksNum; i++) {
         if (i % axisConfigsVal.yAxisRange.step === 0) {
           context.value.fillText(i, axisInnerAttr.axisOrigin.x - axisConfigsVal.spaceBetweenLabelsAxis,
-            axisInnerAttr.axisOrigin.y - i * axisInnerAttr.yTickSpacing);
+            axisInnerAttr.axisOrigin.y - i * axisInnerAttr.yTickSpacing)
         }
       }
-    };
+    }
     const drawAxisTitle = () => {
-      context.value.font = '12px Microsoft YaHei';
-      context.value.textAlign = 'left';
-      context.value.fillStyle = AXIS_LABEL_COLOR.value;
-      const xLabelWidth = context.value.measureText(axisConfigsVal.xAxisLabel).width;
+      context.value.font = '12px Microsoft YaHei'
+      context.value.textAlign = 'left'
+      context.value.fillStyle = AXIS_LABEL_COLOR.value
+      const xLabelWidth = context.value.measureText(axisConfigsVal.xAxisLabel).width
       rotateLabel(axisConfigsVal.xAxisLabel, axisInnerAttr.axisRight + axisConfigsVal.axisMargin / 2,
-        axisInnerAttr.axisOrigin.y - xLabelWidth - AXIS_TITLE_SPACE);
+        axisInnerAttr.axisOrigin.y - xLabelWidth - AXIS_TITLE_SPACE)
       context.value.fillText(axisConfigsVal.yAxisLabel,
-        axisInnerAttr.axisOrigin.x + AXIS_TITLE_SPACE, axisInnerAttr.axisTop - axisConfigsVal.axisMargin / 2);
-    };
+        axisInnerAttr.axisOrigin.x + AXIS_TITLE_SPACE, axisInnerAttr.axisTop - axisConfigsVal.axisMargin / 2)
+    }
 
     const rotateLabel = (name: string, x: number, y: number) => {
       for (let i = 0; i < name.length; i++) {
-        const str = name.slice(i, i + 1).toString();
+        const str = name.slice(i, i + 1).toString()
         if (str.match(/[A-Za-z0-9]/)) {
-          context.value.save();
-          context.value.translate(x, y);
-          context.value.rotate(Math.PI / 180 * 90);
-          context.value.textBaseline = 'bottom';
-          context.value.fillText(str, 0, 0);
-          context.value.restore();
-          y += context.value.measureText(str).width;
+          context.value.save()
+          context.value.translate(x, y)
+          context.value.rotate(Math.PI / 180 * 90)
+          context.value.textBaseline = 'bottom'
+          context.value.fillText(str, 0, 0)
+          context.value.restore()
+          y += context.value.measureText(str).width
         } else if (str.match(/[\u4E00-\u9FA5]/)) {
-          context.value.save();
-          context.value.textBaseline = 'top';
-          context.value.fillText(str, x, y);
-          context.value.restore();
-          y += context.value.measureText(str).width;
+          context.value.save()
+          context.value.textBaseline = 'top'
+          context.value.fillText(str, x, y)
+          context.value.restore()
+          y += context.value.measureText(str).width
         }
       }
     }
@@ -218,11 +218,11 @@ export default defineComponent({
 
   },
   render() {
-    const { diagramId } = this;
+    const { diagramId } = this
     return (
       <div>
         <canvas id={'devui-quadrant-axis-' + diagramId}></canvas>
       </div>
-    );
+    )
   }
-});
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/devui/quadrant-diagram/src/components/axis/types.ts b/devui/quadrant-diagram/src/components/axis/types.ts
index e22f059e..c6c84fdd 100644
--- a/devui/quadrant-diagram/src/components/axis/types.ts
+++ b/devui/quadrant-diagram/src/components/axis/types.ts
@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, PropType } from 'vue'
-import { IViewConfigs, IAxisConfigs } from '../../../type';
+import { IViewConfigs, IAxisConfigs } from '../../../type'
 
 export const quadrantDiagramAxisProps = {
   diagramId: {
diff --git a/devui/quadrant-diagram/src/quadrant-diagram-types.ts b/devui/quadrant-diagram/src/quadrant-diagram-types.ts
index abef19f7..26f9e8df 100644
--- a/devui/quadrant-diagram/src/quadrant-diagram-types.ts
+++ b/devui/quadrant-diagram/src/quadrant-diagram-types.ts
@@ -1,6 +1,6 @@
 import type { ExtractPropTypes, PropType } from 'vue'
-import { DEFAULT_AXIS_CONFIGS, DEFAULT_VIEW_CONFIGS } from '../config';
-import { IViewConfigs, IAxisConfigs } from '../type';
+import { DEFAULT_AXIS_CONFIGS, DEFAULT_VIEW_CONFIGS } from '../config'
+import { IViewConfigs, IAxisConfigs } from '../type'
 
 export const quadrantDiagramProps = {
   diagramId: {
diff --git a/devui/quadrant-diagram/src/quadrant-diagram.tsx b/devui/quadrant-diagram/src/quadrant-diagram.tsx
index d04e64c9..27b01404 100644
--- a/devui/quadrant-diagram/src/quadrant-diagram.tsx
+++ b/devui/quadrant-diagram/src/quadrant-diagram.tsx
@@ -1,17 +1,17 @@
 import { defineComponent, toRefs, reactive, watch } from 'vue'
 import { quadrantDiagramProps, QuadrantDiagramProps } from './quadrant-diagram-types'
-import DQuadrantDiagramAxis from './components/axis';
-import { DEFAULT_AXIS_CONFIGS } from '../config';
+import DQuadrantDiagramAxis from './components/axis'
+import { DEFAULT_AXIS_CONFIGS } from '../config'
 
 export default defineComponent({
   name: 'DQuadrantDiagram',
   props: quadrantDiagramProps,
   emits: [],
   setup(props: QuadrantDiagramProps) {
-    const { diagramId, axisConfigs, view } = toRefs(props);
+    const { diagramId, axisConfigs, view } = toRefs(props)
 
-    const axisConfigsVal = axisConfigs.value;
-    const viewVal = view.value;
+    const axisConfigsVal = axisConfigs.value
+    const viewVal = view.value
 
     const calAxisConfig = reactive({
       axisOrigin: { x: null, y: null },
@@ -26,36 +26,36 @@ export default defineComponent({
     })
 
     const initAxisData = () => {
-      const axisConfigKeys = Object.keys(DEFAULT_AXIS_CONFIGS);
+      const axisConfigKeys = Object.keys(DEFAULT_AXIS_CONFIGS)
       for (let i = 0; i < axisConfigKeys.length; i++) {
         if (calAxisConfig[axisConfigKeys[i]] === undefined) {
-          calAxisConfig[axisConfigKeys[i]] = DEFAULT_AXIS_CONFIGS[axisConfigKeys[i]];
+          calAxisConfig[axisConfigKeys[i]] = DEFAULT_AXIS_CONFIGS[axisConfigKeys[i]]
         }
       }
       calAxisConfig.axisOrigin = {
         x: axisConfigsVal.originPosition.left,
         y: viewVal.height - axisConfigsVal.originPosition.bottom
-      };
-      calAxisConfig.axisTop = axisConfigsVal.axisMargin;
-      calAxisConfig.axisRight = viewVal.width - axisConfigsVal.axisMargin;
-      calAxisConfig.axisWidth = calAxisConfig.axisRight - calAxisConfig.axisOrigin.x;
-      calAxisConfig.axisHeight = calAxisConfig.axisOrigin.y - calAxisConfig.axisTop;
-      calAxisConfig.yAxisTicksNum = axisConfigsVal.yAxisRange.max - axisConfigsVal.yAxisRange.min;
-      calAxisConfig.xAxisTicksNum = axisConfigsVal.xAxisRange.max - axisConfigsVal.xAxisRange.min;
-      calAxisConfig.xTickSpacing = calAxisConfig.axisWidth / calAxisConfig.xAxisTicksNum;
-      calAxisConfig.yTickSpacing = calAxisConfig.axisHeight / calAxisConfig.yAxisTicksNum;
+      }
+      calAxisConfig.axisTop = axisConfigsVal.axisMargin
+      calAxisConfig.axisRight = viewVal.width - axisConfigsVal.axisMargin
+      calAxisConfig.axisWidth = calAxisConfig.axisRight - calAxisConfig.axisOrigin.x
+      calAxisConfig.axisHeight = calAxisConfig.axisOrigin.y - calAxisConfig.axisTop
+      calAxisConfig.yAxisTicksNum = axisConfigsVal.yAxisRange.max - axisConfigsVal.yAxisRange.min
+      calAxisConfig.xAxisTicksNum = axisConfigsVal.xAxisRange.max - axisConfigsVal.xAxisRange.min
+      calAxisConfig.xTickSpacing = calAxisConfig.axisWidth / calAxisConfig.xAxisTicksNum
+      calAxisConfig.yTickSpacing = calAxisConfig.axisHeight / calAxisConfig.yAxisTicksNum
     }
 
-    initAxisData();
+    initAxisData()
 
     watch(viewVal, () => {
-      initAxisData();
+      initAxisData()
     })
 
-    return { diagramId, calAxisConfig, };
+    return { diagramId, calAxisConfig, }
   },
   render() {
-    const { diagramId, calAxisConfig, view } = this;
+    const { diagramId, calAxisConfig, view } = this
 
     return (
       <div class="devui-quadrant-diagram" id={diagramId}>
-- 
Gitee