diff --git a/devui/quadrant-diagram/__tests__/quadrant-diagram.spec.ts b/devui/quadrant-diagram/__tests__/quadrant-diagram.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bb4f8a5688e5dbfbcbe68871f949205756aaa29c
--- /dev/null
+++ b/devui/quadrant-diagram/__tests__/quadrant-diagram.spec.ts
@@ -0,0 +1,32 @@
+import { mount } from '@vue/test-utils';
+import { reactive, nextTick } from 'vue';
+
+import DQuadrantDiagram from '../src/quadrant-diagram';
+
+describe('d-quadrant-diagram', () => {
+  it('quadrantDiagramResponse', async () => {
+    const view = reactive({
+      height: 200,
+      width: 200,
+    });
+
+    const wrapper = mount({
+      components: { DQuadrantDiagram },
+      template: `<d-quadrant-diagram :view='view'/>`,
+      propsData: {
+        view,
+      },
+      setup() {
+        return {
+          view
+        };
+      }
+    });
+    console.log(wrapper.html())
+
+    expect(wrapper.find('#devui-quadrant-axis-1').element['height']).toEqual(200);
+    view.height = 400;
+    await nextTick();
+    expect(wrapper.find('#devui-quadrant-axis-1').element['height']).toEqual(400);
+  })
+});
\ No newline at end of file
diff --git a/devui/quadrant-diagram/src/components/axis/index.tsx b/devui/quadrant-diagram/src/components/axis/index.tsx
index 0e0d7d398df2b988f0d6885d3c12bf07f024d518..8929a29847ad0425bb715f98fb8fefce02f6aa76 100644
--- a/devui/quadrant-diagram/src/components/axis/index.tsx
+++ b/devui/quadrant-diagram/src/components/axis/index.tsx
@@ -33,14 +33,12 @@ export default defineComponent({
     })
 
     const axisConfigsVal: IAxisConfigs = axisConfigs.value
-    const viewVal: IViewConfigs = view.value
-
-
+    
     onMounted(() => {
       resetAxis()
     })
     
-    watch(viewVal, () => {
+    watch(view.value, () => {
       resetAxis()
     })
 
@@ -56,8 +54,6 @@ export default defineComponent({
      */
     const initAxisData = () => {
       quadrantAxis.value = document.querySelector('#devui-quadrant-axis-' + diagramId.value)
-      quadrantAxis.value.width = viewVal.width
-      quadrantAxis.value.height = viewVal.height
     }
 
     const setAxisData = () => {
@@ -218,10 +214,10 @@ export default defineComponent({
 
   },
   render() {
-    const { diagramId } = this
+    const { diagramId, view } = this
     return (
       <div>
-        <canvas id={'devui-quadrant-axis-' + diagramId}></canvas>
+        <canvas id={'devui-quadrant-axis-' + diagramId} height={view.height} width={view.width}></canvas>
       </div>
     )
   }
diff --git a/devui/quadrant-diagram/src/quadrant-diagram.tsx b/devui/quadrant-diagram/src/quadrant-diagram.tsx
index 27b01404ce9247110fd8e54b69a3200f33133ac5..8c15874ef739fc3e915e11e8a6ae1a25463e4e37 100644
--- a/devui/quadrant-diagram/src/quadrant-diagram.tsx
+++ b/devui/quadrant-diagram/src/quadrant-diagram.tsx
@@ -6,13 +6,9 @@ import { DEFAULT_AXIS_CONFIGS } from '../config'
 export default defineComponent({
   name: 'DQuadrantDiagram',
   props: quadrantDiagramProps,
-  emits: [],
   setup(props: QuadrantDiagramProps) {
     const { diagramId, axisConfigs, view } = toRefs(props)
 
-    const axisConfigsVal = axisConfigs.value
-    const viewVal = view.value
-
     const calAxisConfig = reactive({
       axisOrigin: { x: null, y: null },
       axisTop: null,
@@ -33,22 +29,22 @@ export default defineComponent({
         }
       }
       calAxisConfig.axisOrigin = {
-        x: axisConfigsVal.originPosition.left,
-        y: viewVal.height - axisConfigsVal.originPosition.bottom
+        x: axisConfigs.value.originPosition.left,
+        y: view.value.height - axisConfigs.value.originPosition.bottom
       }
-      calAxisConfig.axisTop = axisConfigsVal.axisMargin
-      calAxisConfig.axisRight = viewVal.width - axisConfigsVal.axisMargin
+      calAxisConfig.axisTop = axisConfigs.value.axisMargin
+      calAxisConfig.axisRight = view.value.width - axisConfigs.value.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.yAxisTicksNum = axisConfigs.value.yAxisRange.max - axisConfigs.value.yAxisRange.min
+      calAxisConfig.xAxisTicksNum = axisConfigs.value.xAxisRange.max - axisConfigs.value.xAxisRange.min
       calAxisConfig.xTickSpacing = calAxisConfig.axisWidth / calAxisConfig.xAxisTicksNum
       calAxisConfig.yTickSpacing = calAxisConfig.axisHeight / calAxisConfig.yAxisTicksNum
     }
 
     initAxisData()
 
-    watch(viewVal, () => {
+    watch(view.value, () => {
       initAxisData()
     })