diff --git a/src/components/DynamicEngine/components.js b/src/components/DynamicEngine/components.js
index e6772ad..8c29c07 100644
--- a/src/components/DynamicEngine/components.js
+++ b/src/components/DynamicEngine/components.js
@@ -1,5 +1,5 @@
 import { memo } from 'react'
-import { NoticeBar } from 'zarm'
+import { NoticeBar, Progress } from 'zarm'
 import styles from './components.less'
 
 const Header = memo((props) => {
@@ -91,7 +91,7 @@ const List = memo((props) => {
             sourceData.map((item, i) => {
               return <div className={styles.sourceItem} key={i}>
                       <div className={styles.imgWrap}>
-                        <img src={item.imgUrl[0] ? item.imgUrl[0].url : ''} alt={item.desc} style={{width: imgSize, height: imgSize, objectFit: 'cover', borderRadius: round}} />
+                        <img src={item.imgUrl[0] ? item.imgUrl[0].url : 'http://io.nainor.com/uploads/01_173e15d3493.png'} alt={item.desc} style={{width: imgSize, height: imgSize, objectFit: 'cover', borderRadius: round}} />
                       </div>
                       <div className={styles.content}>
                         <a className={styles.tit} style={{fontSize, color}} href={item.link ? item.link : '#'}>
@@ -106,6 +106,25 @@ const List = memo((props) => {
   </div> 
 })
 
+const XProgress = memo((props) => {
+  const { 
+    theme,
+    size,
+    shape,
+    percent,
+    strokeWidth
+  } = props
+  return <div className={styles.textWrap} style={{textAlign: 'center'}}>
+      <Progress
+        shape={shape}
+        size={size}
+        percent={percent}
+        theme={theme}
+        strokeWidth={strokeWidth}
+      />
+  </div>
+})
+
 export {
   Header,
   Text,
@@ -113,5 +132,6 @@ export {
   Qrcode,
   Footer,
   Image,
-  List
+  List,
+  XProgress
 }
\ No newline at end of file
diff --git a/src/components/DynamicEngine/graphTpl.js b/src/components/DynamicEngine/graphTpl.js
new file mode 100644
index 0000000..0b98cf4
--- /dev/null
+++ b/src/components/DynamicEngine/graphTpl.js
@@ -0,0 +1,8 @@
+const graphTpl = [
+    { 
+        type:'XProgress',
+        h: 102 
+    }
+]
+
+export default graphTpl
\ No newline at end of file
diff --git a/src/components/DynamicEngine/schema.js b/src/components/DynamicEngine/schema.js
index bb57411..f85ca27 100644
--- a/src/components/DynamicEngine/schema.js
+++ b/src/components/DynamicEngine/schema.js
@@ -529,4 +529,69 @@ export default {
       "url": ""
     }
   },
+  "XProgress": {
+    "editData": [
+      {
+        "key": "theme",
+        "name": "主题",
+        "type": "Select",
+        "range": [
+          {
+            "key": "success",
+            "text": "成功"
+          },
+          {
+            "key": "warning",
+            "text": "警告"
+          },
+          {
+            "key": "danger",
+            "text": "危险"
+          }
+        ]
+      },
+      {
+        "key": "shape",
+        "name": "形状",
+        "type": "Radio",
+        "range": [
+          {
+            "key": "circle",
+            "text": "圆形"
+          },
+          {
+            "key": "line",
+            "text": "线形"
+          },
+          {
+            "key": "semi-circle",
+            "text": "半圆形"
+          }
+        ]
+      },
+      {
+        "key": "size",
+        "name": "大小",
+        "type": "Number"
+      },
+      {
+        "key": "percent",
+        "name": "进度值",
+        "type": "Number",
+        "range": [0, 100]
+      },
+      {
+        "key": "strokeWidth",
+        "name": "线条粗细",
+        "type": "Number"
+      }
+    ],
+    "config": {
+      "theme": "success",
+      "shape": "circle",
+      "size": 200,
+      "percent": 30,
+      "strokeWidth": 10
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/pages/editor/Container.js b/src/pages/editor/Container.js
index 0dbcccc..b34275e 100644
--- a/src/pages/editor/Container.js
+++ b/src/pages/editor/Container.js
@@ -13,6 +13,7 @@ import DynamicEngine from 'components/DynamicEngine'
 import FormEditor from 'components/FormEditor'
 import template from 'components/DynamicEngine/template'
 import mediaTpl from 'components/DynamicEngine/mediaTpl'
+import graphTpl from 'components/DynamicEngine/graphTpl'
 import schema from 'components/DynamicEngine/schema'
 
 import styles from './index.less'
@@ -97,7 +98,13 @@ const Container = memo((props) => {
               }
             </Panel>
             <Panel header={generateHeader("可视化组件")} key="3">
-              正在开发中...
+              {
+                graphTpl.map((value,i) => 
+                  <TargetBox item={value} key={i} canvasId={canvasId}>
+                    <DynamicEngine {...value} config={schema[value.type].config} />
+                  </TargetBox>
+                )
+              }
             </Panel>
           </Collapse>
           </div>
diff --git a/src/pages/editor/preview.js b/src/pages/editor/preview.js
index da4125f..84cce3f 100644
--- a/src/pages/editor/preview.js
+++ b/src/pages/editor/preview.js
@@ -7,8 +7,10 @@ import styles from './index.less'
 // 可视化组件类型
 // const componentTypes = ['Column', 'Pie']
 
+const isMac = navigator.platform.indexOf('Mac') === 0
+
 const pcStyle = {
-  width: 395,
+  width: isMac ? 395 : 412,
   margin: '20px auto', 
   border: '10px solid #000', 
   borderRadius: '20px', 
@@ -50,6 +52,7 @@ const PreviewPage = memo((props) => {
         rowHeight={2} 
         width={vw > 800 ? 375 :vw }
         margin={[0,0]}
+        id="xx"
       >
         {
           pointData.map(value =>