diff --git a/package-lock.json b/package-lock.json
index 7b243a4..08e0d7e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4773,6 +4773,22 @@
         "safer-buffer": "^2.1.0"
       }
     },
+    "echarts": {
+      "version": "5.1.2",
+      "resolved": "https://registry.nlark.com/echarts/download/echarts-5.1.2.tgz",
+      "integrity": "sha1-qhqwzvW3T6L3xiAmGl8oaJPTD9E=",
+      "requires": {
+        "tslib": "2.0.3",
+        "zrender": "5.1.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.0.3.tgz",
+          "integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
+        }
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -10228,6 +10244,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-detector": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npm.taobao.org/resize-detector/download/resize-detector-0.3.0.tgz",
+      "integrity": "sha1-/klREuGEaVUAqPUeA4nxV3TLHPw="
+    },
     "resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
@@ -12203,6 +12224,20 @@
         "@vue/shared": "3.0.11"
       }
     },
+    "vue-demi": {
+      "version": "0.9.1",
+      "resolved": "https://registry.nlark.com/vue-demi/download/vue-demi-0.9.1.tgz?cache=0&sync_timestamp=1622102566488&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-demi%2Fdownload%2Fvue-demi-0.9.1.tgz",
+      "integrity": "sha1-Jdbh69TUAQdX/zVx4r9qHXvz3oI="
+    },
+    "vue-echarts": {
+      "version": "6.0.0-rc.6",
+      "resolved": "https://registry.nlark.com/vue-echarts/download/vue-echarts-6.0.0-rc.6.tgz",
+      "integrity": "sha1-wSr9vi6FjJQdQ0mW6bubevPIxjE=",
+      "requires": {
+        "resize-detector": "^0.3.0",
+        "vue-demi": "^0.9.1"
+      }
+    },
     "vue-eslint-parser": {
       "version": "7.6.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-7.6.0.tgz?cache=0&sync_timestamp=1614679624052&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-eslint-parser%2Fdownload%2Fvue-eslint-parser-7.6.0.tgz",
@@ -13306,6 +13341,21 @@
           "dev": true
         }
       }
+    },
+    "zrender": {
+      "version": "5.1.1",
+      "resolved": "https://registry.nlark.com/zrender/download/zrender-5.1.1.tgz",
+      "integrity": "sha1-BRX0+MwPR0LwKmuIGVUKbRPWTFw=",
+      "requires": {
+        "tslib": "2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.3",
+          "resolved": "https://registry.nlark.com/tslib/download/tslib-2.0.3.tgz",
+          "integrity": "sha1-jgdBrEX8DCJuWKF7/D5kubxsphw="
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 6067d44..2716e21 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,9 @@
     "ant-design-vue": "^2.0.0-rc.7",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "echarts": "^5.1.2",
     "vue": "^3.0.0",
+    "vue-echarts": "^6.0.0-rc.6",
     "vue-router": "^4.0.4"
   },
   "devDependencies": {
diff --git a/public/ECharts_BasicBar.png b/public/ECharts_BasicBar.png
new file mode 100644
index 0000000..950b5c4
Binary files /dev/null and b/public/ECharts_BasicBar.png differ
diff --git a/public/ECharts_PieSvg.png b/public/ECharts_PieSvg.png
new file mode 100644
index 0000000..9f8b1f6
Binary files /dev/null and b/public/ECharts_PieSvg.png differ
diff --git a/public/InterfaceReturn.json b/public/InterfaceReturn.json
index 62c9a78..981d99b 100644
--- a/public/InterfaceReturn.json
+++ b/public/InterfaceReturn.json
@@ -1,6 +1,7 @@
 [{
   "type": "AlternatorSvg",
   "title": "发电机",
+  "panelclass":"draggable",
   "template": "<ellipse id=\"c1\" cx=\"50\" cy=\"50\" rx=\"35\" ry=\"35\" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></ellipse><path id=\"l1\" d=\"M30,50 C30,44 34,40 40,40 46,40 50,44 50,50 M50,50 C50,56 54,60 60,60 66,60 70,56 70,50 \" fill=\"none\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-50,-50)\"></path>",
   "props": ["prop_data"],
   "default_attr":{
@@ -11,6 +12,7 @@
 }, {
   "type": "ArrowDownSvg",
   "title": "箭头向下",
+  "panelclass":"draggable",
   "template": "<polygon  points=\"0,-8 5,0 10,-8\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
   "props": ["prop_data"],
   "default_attr":{
@@ -21,6 +23,7 @@
 }, {
   "type": "ArrowUpSvg",
   "title": "箭头向上",
+  "panelclass":"draggable",
   "template": "<polygon  points=\"0,8 5,0 10,8\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"2\" transform=\"translate(-5,0)\"></polygon>",
   "props": ["prop_data"],
   "default_attr":{
@@ -32,6 +35,7 @@
 {
   "type": "ConnLineSvg",
   "title": "连接线",
+  "panelclass":"draw",
   "template": "<line x1=\"0\" y1=\"0\" :x2=\"(prop_data.mPoint.endX-prop_data.mPoint.startX)\" :y2=\"(prop_data.mPoint.endY-prop_data.mPoint.startY)\" :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\"  stroke-width=\"2\"></line>",
   "props": ["prop_data"],
   "default_attr":{
@@ -39,4 +43,30 @@
   },
   "create_type":"click",
   "priview_img":"/VerticalLineSvg.png"
+},
+{
+  "type": "EchartsPieSvg",
+  "title": "Echart饼图",
+  "panelclass":"chart",
+  "template": "<foreignObject x=\"0\" y=\"0\" width=\"400\" height=\"400\"> <v-chart :option=\"prop_data.echarts_option\" /></foreignObject>",
+  "props": ["prop_data"],
+  "default_attr":{
+    "color":"#000000",
+    "echarts_option":"{\"title\":{\"text\":\"某站点用户访问来源\",\"subtext\":\"纯属虚构\",\"left\":\"center\"},\"tooltip\":{\"trigger\":\"item\"},\"legend\":{\"orient\":\"vertical\",\"left\":\"left\"},\"series\":[{\"name\":\"访问来源\",\"type\":\"pie\",\"radius\":\"50%\",\"data\":[{\"value\":1048,\"name\":\"搜索引擎\"},{\"value\":735,\"name\":\"直接访问\"},{\"value\":580,\"name\":\"邮件营销\"},{\"value\":484,\"name\":\"联盟广告\"},{\"value\":300,\"name\":\"视频广告\"}],\"emphasis\":{\"itemStyle\":{\"shadowBlur\":10,\"shadowOffsetX\":0,\"shadowColor\":\"rgba(0, 0, 0, 0.5)\"}}}]}"
+  },
+  "create_type":"draggable",
+  "priview_img":"/ECharts_PieSvg.png"
+},
+{
+  "type": "EchartsBasicBarSvg",
+  "title": "Echart基础柱状图",
+  "panelclass":"chart",
+  "template": "<foreignObject x=\"0\" y=\"0\" width=\"400\" height=\"400\"> <v-chart :option=\"prop_data.echarts_option\" /></foreignObject>",
+  "props": ["prop_data"],
+  "default_attr":{
+    "color":"#000000",
+    "echarts_option":"{\"xAxis\":{\"type\":\"category\",\"data\":[\"Mon\",\"Tue\",\"Wed\",\"Thu\",\"Fri\",\"Sat\",\"Sun\"]},\"yAxis\":{\"type\":\"value\"},\"series\":[{\"data\":[120,200,150,80,70,110,130],\"type\":\"bar\"}]}"
+  },
+  "create_type":"draggable",
+  "priview_img":"/ECharts_BasicBar.png"
 }]
diff --git a/src/components/LeftToolBar.vue b/src/components/LeftToolBar.vue
index 04b3b13..8e20099 100644
--- a/src/components/LeftToolBar.vue
+++ b/src/components/LeftToolBar.vue
@@ -22,7 +22,7 @@
                         header="绘制组件"
                         :disabled="false">
         <ul class="svg-nav-list">
-          <li v-for="item in clickComponentList"
+          <li v-for="item in drawComponentList"
               :key="item"
               :class="$store.state.CurrentlySelectedToolBar.CreateType==item.create_type?'toolbar-selected':''">
             <div class="title">{{item.title}}</div>
@@ -34,7 +34,16 @@
       </a-collapse-panel>
       <a-collapse-panel key="3"
                         header="图表">
-        <p>{{ text }}</p>
+        <ul class="svg-nav-list">
+          <li v-for="item in chartComponentList"
+              :key="item">
+            <div class="title">{{item.title}}</div>
+            <img :title="item.title"
+                 @mousedown="Mousedown(item.type,item.title,item.default_attr,item.create_type)"
+                 :src="item.priview_img"
+                 draggable="draggable">
+          </li>
+        </ul>
       </a-collapse-panel>
     </a-collapse>
   </div>
@@ -47,19 +56,22 @@ export default {
       activeKey: ['1'],//当前激活的key
       text: `这里是预留位置.`,
       draggableComponentList: [],//拖动组件
-      clickComponentList: [],//点击类型组件
+      drawComponentList: [],//绘制类型组件
+      chartComponentList: [],//图表类型
     };
   },
   watch: {
     'svgInfoData': {
       deep: true,
       handler (val) {
-        console.log(val);
         this.draggableComponentList = val.filter(m => {
-          return m.create_type == 'draggable'
+          return m.panelclass == 'draggable'
+        });
+        this.drawComponentList = val.filter(m => {
+          return m.panelclass == 'draw'
         });
-        this.clickComponentList = val.filter(m => {
-          return m.create_type == 'click'
+        this.chartComponentList = val.filter(m => {
+          return m.panelclass == 'chart'
         });
       }
     }
@@ -79,7 +91,8 @@ export default {
         TypeName: title,//选中的工具栏svg类型名称
         Title: title,//选中的工具栏svg标题
         Color: default_attr.color,//选中的工具栏svg颜色
-        CreateType: create_type//选中工具栏的创建方式
+        CreateType: create_type,//选中工具栏的创建方式
+        EChartsOption: default_attr.echarts_option
       };
       this.$store.setCurrentlySelectedToolBarAction(CurrentlySelectedToolBar);
     },
diff --git a/src/components/SvgComponents.vue b/src/components/SvgComponents.vue
index fe1a96a..f16d695 100644
--- a/src/components/SvgComponents.vue
+++ b/src/components/SvgComponents.vue
@@ -3,18 +3,40 @@
 -->
 <template>
   <component :is="component_prop.type"
-             :prop_data= component_prop></component>
+             :prop_data=component_prop></component>
 </template>
 <script>
+import { use } from "echarts/core";
+import { SVGRenderer } from "echarts/renderers";
+import { PieChart,BarChart } from "echarts/charts";
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent
+} from "echarts/components";
+import { THEME_KEY } from "vue-echarts";
+use([
+  SVGRenderer,
+  PieChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+  GridComponent,
+  BarChart
+]);
 let importComponents = {};
 export default {
-  props: ['svgInfoData','component_prop'],
+  props: ['svgInfoData', 'component_prop'],
   data () {
     return {
       componentTag: ''
     }
   },
   components: importComponents,
+  provide: {
+    [THEME_KEY]: "dark"
+  },
   methods: {
 
   },
diff --git a/src/main.js b/src/main.js
index ecb43d1..fc93bb5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,3 +1,6 @@
+/*
+ * @Author: yaolunmao
+ */
 /*
  * @Author: yaolunmao
  */
@@ -10,9 +13,11 @@ import './assets/css/index.css';
 import router from './router';
 import axios from 'axios';
 import { store } from './store/store.js';
+import ECharts from 'vue-echarts';
 const app = createApp(App);
 app.use(router);
 app.config.globalProperties.$store = store;
 app.config.globalProperties.$UCore = UCore;
 app.config.globalProperties.$axios = axios;
+app.component('v-chart', ECharts);
 app.use(Antd).mount('#app');
diff --git a/src/store/store.js b/src/store/store.js
index 037c352..e7cc1db 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -1,3 +1,6 @@
+/*
+ * @Author: yaolunmao
+ */
 /*
  * @Author: yaolunmao
  * 简单状态管理
@@ -12,7 +15,8 @@ export const store = {
       TypeName: '',//选中的工具栏svg类型名称
       Title: '',//选中的工具栏svg标题
       Color: '',//选中的工具栏svg颜色
-      CreateType: ''//选中工具栏的创建方式
+      CreateType: '',//选中工具栏的创建方式
+      EChartsOption:''//选中工具栏的图表默认option
     }
   }),
 
@@ -26,7 +30,8 @@ export const store = {
       TypeName: '',//选中的工具栏svg类型名称
       Title: '',//选中的工具栏svg标题
       Color: '',//选中的工具栏svg颜色
-      CreateType: ''//选中工具栏的创建方式
+      CreateType: '',//选中工具栏的创建方式
+      EChartsOption:''//选中工具栏的图表默认option
     }
   }
 }
diff --git a/src/views/CircuitEdit.vue b/src/views/CircuitEdit.vue
index 5d9d1c7..a334a9b 100644
--- a/src/views/CircuitEdit.vue
+++ b/src/views/CircuitEdit.vue
@@ -135,12 +135,13 @@ import RightToolBar from '@/components/RightToolBar.vue';
 // import SvgComponents from '@/components/SvgComponents.vue';
 import SvgComponents from '@/components/SvgComponents.vue';
 export default {
-  components: { LeftToolBar, RightToolBar, SvgComponents },
+  components: { LeftToolBar, RightToolBar, SvgComponents},
   data () {
     return {
       testAddSvg: {
         type: "testAddSvg",
         title: "测试新增组件",
+        panelclass:"draggable",
         template: "<path :fill=\"prop_data.svgColor\" :stroke=\"prop_data.svgColor\" stroke-width=\"5\" style=\"pointer-events:inherit\" d=\"m143.72081869586242,163.35565803158485 c14.617751633754164,-41.93617271978648 71.89058180534832,0 0,53.91793635401125 c-71.89058180534832,-53.91793635401125 -14.617751633754164,-95.85410907379776 0,-53.91793635401125 z\"  fill-opacity=\"1\" stroke-opacity=\"1\" transform=\"translate(-145,-180)\"></path>",
         props: ["prop_data"],
         default_attr: {
@@ -184,7 +185,6 @@ export default {
     },
     addSvgHandleOk () {
       this.svgInfoData[this.svgInfoData.length]=this.testAddSvg;
-      console.log(this.svgInfoData);
       this.addSvgVisible = false;
     },
     exportSvg () {
@@ -354,11 +354,8 @@ export default {
       this.$store.clearCurrentlySelectedToolBarAction();
     },
     testD () {
-      console.log(JSON.stringify(this.svgLists));
       alert(JSON.stringify(this.svgLists));
     },
-    testE () {
-    },
     testH () {
       localStorage.setItem('svginfo', JSON.stringify(this.svgLists));
       this.$router.push({
@@ -415,6 +412,7 @@ export default {
       if (_this.$store.state.CurrentlySelectedToolBar.Type == '' || _this.$store.state.CurrentlySelectedToolBar.CreateType != 'draggable') {
         return;
       }
+      let eChartsOption=_this.$store.state.CurrentlySelectedToolBar.EChartsOption;
       //根据类型和鼠标位置创建组件
       let svgItem = {
         id: _this.$UCore.GenUUid(),
@@ -424,6 +422,7 @@ export default {
         svgColor: _this.$store.state.CurrentlySelectedToolBar.Color,
         svgPositionX: e.offsetX,
         svgPositionY: e.offsetY,
+        echarts_option:eChartsOption?JSON.parse(eChartsOption):"",
         size: 1,
         angle: 0
         //translate:`translate(${this.mousePosition.positionX},${this.mousePosition.positionY})`