Browse Source

Merge branch 'main' of https://github.com/le5le-com/visualization-design

Wind-Breaker1 1 year ago
parent
commit
874d69d5aa

+ 1 - 1
index.html

@@ -27,7 +27,7 @@
       href="//at.alicdn.com/t/c/font_4042197_dopqcs38fz5.css"
       rel="stylesheet"
     />
-    <script src="//at.alicdn.com/t/c/font_4042197_dopqcs38fz5.js"></script>
+    <script src="//at.alicdn.com/t/c/font_4042197_4dwahu3kqx3.js"></script>
   </head>
   <body>
     <div id="app"></div>

+ 1 - 0
package.json

@@ -37,6 +37,7 @@
     "postcss-nested": "^6.0.1",
     "typescript": "^4.7.4",
     "vite": "^4.4.2",
+    "vite-plugin-monaco-editor": "^1.0.10",
     "vue-tsc": "^1.8.3"
   }
 }

+ 11 - 1
pnpm-lock.yaml

@@ -82,6 +82,9 @@ devDependencies:
   vite:
     specifier: ^4.4.2
     version: 4.4.2(@types/node@20.4.1)
+  vite-plugin-monaco-editor:
+    specifier: ^1.0.10
+    version: 1.0.10(monaco-editor@0.38.0)
   vue-tsc:
     specifier: ^1.8.3
     version: 1.8.3(typescript@4.7.4)
@@ -1609,7 +1612,6 @@ packages:
 
   /monaco-editor@0.38.0:
     resolution: {integrity: sha512-11Fkh6yzEmwx7O0YoLxeae0qEGFwmyPRlVxpg7oF9czOOCB/iCjdJrG5I67da5WiXK3YJCxoz9TJFE8Tfq/v9A==}
-    dev: false
 
   /ms@2.1.2:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
@@ -2042,6 +2044,14 @@ packages:
     engines: {node: '>= 0.10'}
     dev: false
 
+  /vite-plugin-monaco-editor@1.0.10(monaco-editor@0.38.0):
+    resolution: {integrity: sha512-7yTAFIE0SefjCmfnjrvXOl53wkxeSASc/ZIcB5tZeEK3vAmHhveV8y3f90Vp8b+PYdbUipjqf91mbFbSENkpcw==}
+    peerDependencies:
+      monaco-editor: 0.29.x
+    dependencies:
+      monaco-editor: 0.38.0
+    dev: true
+
   /vite@4.4.2(@types/node@20.4.1):
     resolution: {integrity: sha512-zUcsJN+UvdSyHhYa277UHhiJ3iq4hUBwHavOpsNUGsTgjBeoBlK8eDt+iT09pBq0h9/knhG/SPrZiM7cGmg7NA==}
     engines: {node: ^14.18.0 || >=16.0.0}

BIN
public/data.xlsx


File diff suppressed because it is too large
+ 0 - 0
public/js/echarts.min.js


+ 4 - 2
src/App.vue

@@ -12,8 +12,10 @@ const { getUser } = useUser();
 
 onBeforeMount(() => {
   getUser();
-  registerTheme();
-  changeTheme('le-dark');
+  setTimeout(() => {
+    registerTheme();
+    changeTheme('le-dark');
+  }, 1000);
 });
 </script>
 <style lang="postcss" scoped></style>

+ 0 - 2
src/services/common.ts

@@ -372,7 +372,6 @@ const tree = reactive({
 });
 
 export const getPenTree = () => {
-  // if (tree.patch) {
   tree.patch = false;
   const list = [];
   for (const item of meta2d.store.data.pens) {
@@ -383,7 +382,6 @@ export const getPenTree = () => {
     elem && list.push(elem);
   }
   tree.list = list;
-  // }
 
   return tree.list;
 };

+ 11 - 2
src/services/defaults.ts

@@ -2629,8 +2629,17 @@ export const formComponents = [
       },
       {
         name: '船型开关',
-        icon: 'l-pc', //l-chuanxingkaiguan
-        data: {},
+        icon: 'l-chuanxingkaiguan',
+        data: {
+          name: 'rockerSwitch',
+          width: 72,
+          height: 128,
+          disableInput: true,
+          offColor: '#BFBFBF',
+          onColor: '#1890ff',
+          color: '#4583FF', //66 33
+          background: '#4583FF33',
+        },
       },
       {
         name: '转换开关',

+ 4734 - 387
src/services/echarts.ts

@@ -37,20 +37,19 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                top: 20,
-                bottom: 40,
-                left: 40,
-                right: 20,
+                bottom: 16,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
               },
+              fontSize: 10,
               xAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
               },
               yAxis: {
                 type: 'value',
-                max: 100,
-                min: 0,
-                interval: 50,
               },
               series: [
                 {
@@ -59,35 +58,66 @@ export const charts = [
                 },
               ],
             },
-            max: 100,
+            max: 30,
           },
           realTimes: [
             {
               key: 'echarts.option.series.0.data.0',
-              label: '一月数据',
-              type: 'object',
+              label: '1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-40',
             },
             {
               key: 'echarts.option.series.0.data.1',
-              label: '二月数据',
-              type: 'object',
+              label: '2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '3月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-60',
             },
             {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
+              key: 'echarts.option.series.0.data.4',
+              label: '5月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-80',
             },
             {
-              key: 'echarts.max',
-              label: '最大数量',
-              type: 'number',
+              key: 'echarts.option.series.0.data.5',
+              label: '6月',
+              type: 'float',
+              enableMock: true,
+              mock: '60-100',
             },
           ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
         },
       },
       {
         name: '多折线图',
-        icon: 'l-line-chart',
+        icon: 'l-duozhexiantu',
         data: {
           name: 'echarts',
           width: 366,
@@ -97,20 +127,19 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                top: 20,
-                bottom: 40,
-                left: 40,
-                right: 20,
+                bottom: 16,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
               },
+              fontSize: 10,
               xAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
               },
               yAxis: {
                 type: 'value',
-                max: 100,
-                min: 0,
-                interval: 50,
               },
               series: [
                 {
@@ -123,35 +152,108 @@ export const charts = [
                 },
               ],
             },
-            max: 100,
+            max: 30,
           },
           realTimes: [
             {
-              key: 'echarts.option.series.0.data',
-              label: '数据1',
-              type: 'object',
+              key: 'echarts.option.series.0.data.0',
+              label: '折线一的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.0',
+              label: '折线二的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '折线一的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.1.data.1',
+              label: '折线二的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '折线一的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '8-80',
+            },
+            {
+              key: 'echarts.option.series.1.data.2',
+              label: '折线二的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '1-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '折线一的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.3',
+              label: '折线二的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.4',
+              label: '折线一的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
             },
             {
-              key: 'echarts.option.series.1.data',
-              label: '数据2',
-              type: 'object',
+              key: 'echarts.option.series.1.data.4',
+              label: '折线二的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
             },
             {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
+              key: 'echarts.option.series.0.data.5',
+              label: '折线一的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-100',
             },
             {
-              key: 'echarts.max',
-              label: '最大数量',
-              type: 'number',
+              key: 'echarts.option.series.1.data.5',
+              label: '折线二的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '30-80',
             },
           ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
         },
       },
       {
-        name: '时间动态数据折线图',
-        icon: 'l-line-chart',
+        name: '折线趋势图',
+        icon: 'l-zhexiantuqushitu',
         data: {
           name: 'echarts',
           width: 366,
@@ -161,14 +263,16 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                top: 20,
-                bottom: 40,
-                left: 40,
-                right: 20,
+                bottom: 16,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
               },
+              fontSize: 10,
               xAxis: {
                 type: 'category',
-                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                data: [],
               },
               yAxis: {
                 type: 'value',
@@ -176,63 +280,36 @@ export const charts = [
               series: [
                 {
                   type: 'line',
-                  data: [40, 20, 90, 60, 70, 80],
+                  data: [],
                 },
               ],
             },
             replaceMode: 0,
-            max: 100,
+            max: 30,
           },
           realTimes: [
-            {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
-            },
             {
               key: 'echarts.option.series.0.data',
-              label: '实时数据',
-              type: 'object',
-            },
-            {
-              key: 'echarts.max',
-              label: '最大数量',
-              type: 'number',
-            },
-            {
-              key: 'echarts.replaceMode',
-              label: '模式',
-              type: 'number',
+              label: '数据点',
+              type: 'float',
+              enableMock: true,
+              mock: '0-100',
             },
           ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
         },
       },
-    ],
-  },
-  {
-    name: '面积图',
-    show: true,
-    list: [
-      {
-        name: '基础面积图',
-        icon: 'l-line-chart',
-        data: {
-          name: 'echarts',
-          width: 366,
-          height: 206,
-          externElement: true,
-          disableAnchor: true,
-        },
-      },
-    ],
-  },
-  {
-    name: '柱状图',
-    show: true,
-    list: [
       {
-        name: '基础柱状图',
-        icon: 'l-line-chart',
+        name: '基础曲线图',
+        icon: 'l-quxian',
         data: {
           name: 'echarts',
           width: 366,
@@ -242,52 +319,88 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                top: 20,
-                bottom: 40,
-                left: 40,
-                right: 20,
+                bottom: 16,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
               },
+              fontSize: 10,
               xAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
               },
               yAxis: {
                 type: 'value',
-                max: 100,
-                min: 0,
-                interval: 50,
               },
               series: [
                 {
-                  type: 'bar',
+                  type: 'line',
+                  smooth: true,
                   data: [40, 20, 90, 60, 70, 80],
                 },
               ],
             },
-            max: 100,
+            max: 30,
           },
           realTimes: [
             {
-              key: 'echarts.option.series.0.data',
-              label: '数据',
-              type: 'object',
+              key: 'echarts.option.series.0.data.0',
+              label: '1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-40',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '3月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-60',
             },
             {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
+              key: 'echarts.option.series.0.data.4',
+              label: '5月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-80',
             },
             {
-              key: 'echarts.max',
-              label: '最大数量',
-              type: 'number',
+              key: 'echarts.option.series.0.data.5',
+              label: '6月',
+              type: 'float',
+              enableMock: true,
+              mock: '60-100',
             },
           ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
         },
       },
       {
-        name: '双柱状图',
-        icon: 'l-line-chart',
+        name: '多曲线图',
+        icon: 'l-duoquxiantu',
         data: {
           name: 'echarts',
           width: 366,
@@ -297,419 +410,4653 @@ export const charts = [
           echarts: {
             option: {
               grid: {
-                top: 20,
-                bottom: 40,
-                left: 40,
-                right: 20,
+                bottom: 16,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
               },
+              fontSize: 10,
               xAxis: {
                 type: 'category',
                 data: ['1月', '2月', '3月', '4月', '5月', '6月'],
               },
               yAxis: {
                 type: 'value',
-                max: 100,
-                min: 0,
-                interval: 50,
               },
               series: [
                 {
-                  type: 'bar',
-                  data: [40, 20, 90, 60, 70, 80],
+                  type: 'line',
+                  smooth: true,
+                  data: [40, 35, 80, 40, 45, 25],
                 },
                 {
-                  type: 'bar',
-                  data: [50, 70, 20, 30, 70, 40],
+                  type: 'line',
+                  smooth: true,
+                  data: [25, 40, 20, 30, 25, 40],
                 },
               ],
             },
-            max: 100,
+            max: 30,
           },
           realTimes: [
             {
-              key: 'echarts.option.series.0.data',
-              label: '数据1',
-              type: 'object',
+              key: 'echarts.option.series.0.data.0',
+              label: '折线一的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.0',
+              label: '折线二的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '折线一的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.1.data.1',
+              label: '折线二的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '折线一的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '8-80',
+            },
+            {
+              key: 'echarts.option.series.1.data.2',
+              label: '折线二的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '1-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '折线一的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.3',
+              label: '折线二的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.4',
+              label: '折线一的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
             },
             {
-              key: 'echarts.option.series.1.data',
-              label: '数据2',
-              type: 'object',
+              key: 'echarts.option.series.1.data.4',
+              label: '折线二的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
             },
             {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
+              key: 'echarts.option.series.0.data.5',
+              label: '折线一的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-100',
             },
             {
-              key: 'echarts.max',
-              label: '最大数量',
-              type: 'number',
+              key: 'echarts.option.series.1.data.5',
+              label: '折线二的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '30-80',
             },
           ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
         },
       },
-    ],
-  },
-  {
-    name: '条形图',
-    show: true,
-    list: [],
-  },
-  {
-    name: '饼环图',
-    show: true,
-    list: [
       {
-        name: '饼图',
-        icon: 'l-pie-chart',
+        name: '曲线趋势图',
+        icon: 'l-quxiantuqushitu',
         data: {
-          width: 300,
-          height: 200,
-          disableAnchor: true,
-          externElement: true,
           name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
           echarts: {
             option: {
-              tooltip: {
-                trigger: 'item',
+              grid: {
+                bottom: 16,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
+              },
+              fontSize: 10,
+              xAxis: {
+                type: 'category',
+                data: [],
+              },
+              yAxis: {
+                type: 'value',
               },
               series: [
                 {
-                  type: 'pie',
-                  radius: ['50%', '70%'],
-                  label: {
-                    color: '#ffffff',
-                  },
-                  data: [
-                    { value: 335, name: '2D' },
-                    { value: 310, name: '3D' },
-                    { value: 234, name: '大屏' },
-                    { value: 135, name: '物联网平台' },
-                    { value: 1548, name: '图形库' },
-                  ],
+                  type: 'line',
+                  smooth: true,
+                  data: [],
                 },
               ],
             },
-            replaceMode: ReplaceMode.Replace,
+            replaceMode: 0,
+            max: 30,
           },
           realTimes: [
             {
               key: 'echarts.option.series.0.data',
-              label: '数据',
-              type: 'object',
-            },
-            {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
+              label: '数据点',
+              type: 'float',
+              enableMock: true,
+              mock: '0-100',
             },
           ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
         },
       },
-    ],
-  },
-  {
-    name: '散点图',
-    show: true,
-    list: [
       {
-        name: '散点图',
-        icon: 'l-sandiantu',
+        name: '阶梯折线图',
+        icon: 'l-jietizhexian',
         data: {
-          width: 300,
-          height: 200,
-          disableAnchor: true,
-          externElement: true,
           name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
           echarts: {
             option: {
               grid: {
-                top: 10,
-                bottom: 20,
-                left: 40,
-                right: 10,
+                bottom: 16,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
               },
+              fontSize: 10,
               xAxis: {
-                axisLabel: {
-                  fontSize: 12,
-                  color: '#ffffff',
-                },
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
               },
               yAxis: {
-                axisLabel: {
-                  fontSize: 12,
-                  color: '#ffffff',
-                },
+                type: 'value',
               },
               series: [
                 {
-                  symbolSize: 10,
-                  data: [
-                    [10.0, 8.04],
-                    [8.07, 6.95],
-                    [13.0, 7.58],
-                    [9.05, 8.81],
-                    [11.0, 8.33],
-                    [14.0, 7.66],
-                    [13.4, 6.81],
-                    [10.0, 6.33],
-                    [14.0, 8.96],
-                    [12.5, 6.82],
-                    [9.15, 7.2],
-                    [11.5, 7.2],
-                    [3.03, 4.23],
-                    [12.2, 7.83],
-                    [2.02, 4.47],
-                    [1.05, 3.33],
-                    [4.05, 4.96],
-                    [6.03, 7.24],
-                    [12.0, 6.26],
-                    [12.0, 8.84],
-                    [7.08, 5.82],
-                    [5.02, 5.68],
-                  ],
-                  type: 'scatter',
+                  type: 'line',
+                  step: 'start',
+                  data: [40, 20, 90, 60, 70, 80],
                 },
               ],
             },
-            replaceMode: ReplaceMode.Replace,
+            max: 30,
           },
           realTimes: [
             {
-              key: 'echarts.option.series.0.data',
-              label: '数据',
-              type: 'object',
+              key: 'echarts.option.series.0.data.0',
+              label: '1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-40',
             },
             {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
+              key: 'echarts.option.series.0.data.1',
+              label: '2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
             },
-          ],
-        },
-      },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '3月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-60',
+            },
+            {
+              key: 'echarts.option.series.0.data.4',
+              label: '5月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-80',
+            },
+            {
+              key: 'echarts.option.series.0.data.5',
+              label: '6月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-60',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
     ],
   },
   {
-    name: '雷达图',
+    name: '面积图',
     show: true,
     list: [
       {
-        name: '雷达图',
-        icon: 'l-leidatu',
+        name: '基础面积图',
+        icon: 'l-mianjitu',
         data: {
-          width: 300,
-          height: 200,
-          disableAnchor: true,
-          externElement: true,
           name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
           echarts: {
             option: {
               grid: {
-                top: 20,
-                bottom: 30,
-                left: 40,
-                right: 10,
+                bottom: 16,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
               },
-              radar: {
-                // shape: 'circle',
-                indicator: [
-                  { name: 'Sales', max: 6500 },
-                  { name: 'Administration', max: 16000 },
-                  { name: 'Information Technology', max: 30000 },
-                  { name: 'Customer Support', max: 38000 },
-                  { name: 'Development', max: 52000 },
-                  { name: 'Marketing', max: 25000 },
-                ],
+              fontSize: 10,
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              yAxis: {
+                type: 'value',
               },
               series: [
                 {
-                  name: 'Budget vs spending',
-                  type: 'radar',
-                  data: [
-                    {
-                      value: [4200, 3000, 20000, 35000, 50000, 18000],
-                      name: 'Allocated Budget',
-                    },
-                    {
-                      value: [5000, 14000, 28000, 26000, 42000, 21000],
-                      name: 'Actual Spending',
-                    },
-                  ],
+                  type: 'line',
+                  data: [40, 20, 90, 60, 70, 80],
+                  areaStyle: { opacity: 0.3 },
+                  smooth: true,
                 },
               ],
             },
-            replaceMode: ReplaceMode.Replace,
+            max: 30,
           },
           realTimes: [
             {
-              key: 'echarts.option.series.0.data',
-              label: '数据',
-              type: 'object',
+              key: 'echarts.option.series.0.data.0',
+              label: '1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-40',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '3月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-60',
+            },
+            {
+              key: 'echarts.option.series.0.data.4',
+              label: '5月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-80',
             },
             {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
+              key: 'echarts.option.series.0.data.5',
+              label: '6月',
+              type: 'float',
+              enableMock: true,
+              mock: '60-100',
             },
           ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
         },
       },
-    ],
-  },
-  {
-    name: '关系图',
-    show: true,
-    list: [],
-  },
-  {
-    name: '桑葚图',
-    show: true,
-    list: [
       {
-        name: '桑基图',
-        icon: 'l-sangshentu',
+        name: '堆叠面积图',
+        icon: 'l-duidiemianjitu',
         data: {
-          width: 300,
-          height: 200,
-          disableAnchor: true,
-          externElement: true,
           name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
           echarts: {
             option: {
-              series: {
-                type: 'sankey',
-                layout: 'none',
-                emphasis: {
-                  focus: 'adjacency',
-                },
-                data: [
-                  {
-                    name: 'a',
-                  },
-                  {
-                    name: 'b',
-                  },
-                  {
-                    name: 'a1',
-                  },
-                  {
-                    name: 'a2',
-                  },
-                  {
-                    name: 'b1',
-                  },
-                  {
-                    name: 'c',
-                  },
-                ],
-                links: [
-                  {
-                    source: 'a',
-                    target: 'a1',
-                    value: 5,
-                  },
-                  {
-                    source: 'a',
-                    target: 'a2',
-                    value: 3,
-                  },
-                  {
-                    source: 'b',
-                    target: 'b1',
-                    value: 8,
-                  },
-                  {
-                    source: 'a',
-                    target: 'b1',
-                    value: 3,
-                  },
-                  {
-                    source: 'b1',
-                    target: 'a1',
-                    value: 1,
-                  },
-                  {
-                    source: 'b1',
-                    target: 'c',
-                    value: 2,
-                  },
-                ],
-                lineStyle: {
-                  color: 'source',
-                  curveness: 0.5,
+              grid: {
+                bottom: 16,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
+              },
+              fontSize: 10,
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              yAxis: {
+                type: 'value',
+              },
+              series: [
+                {
+                  type: 'line',
+                  areaStyle: { opacity: 0.3 },
+                  smooth: true,
+                  data: [40, 35, 80, 40, 45, 25],
                 },
-                label: {
-                  color: '#ffffff',
-                  fontSize: 10,
+                {
+                  type: 'line',
+                  areaStyle: { opacity: 0.3 },
+                  smooth: true,
+                  data: [25, 40, 20, 30, 25, 40],
                 },
-              },
+              ],
             },
-            replaceMode: ReplaceMode.Replace,
+            max: 30,
           },
           realTimes: [
             {
-              key: 'echarts.option.series.0.data',
-              label: '数据',
-              type: 'object',
+              key: 'echarts.option.series.0.data.0',
+              label: '折线一的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.0',
+              label: '折线二的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '折线一的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.1.data.1',
+              label: '折线二的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '折线一的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '8-80',
             },
             {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
+              key: 'echarts.option.series.1.data.2',
+              label: '折线二的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '1-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '折线一的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.3',
+              label: '折线二的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.4',
+              label: '折线一的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.4',
+              label: '折线二的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.5',
+              label: '折线一的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.5',
+              label: '折线二的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '30-80',
             },
           ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
         },
       },
     ],
   },
   {
-    name: '仪表盘',
+    name: '柱状图',
     show: true,
     list: [
       {
-        name: '仪表盘',
-        icon: 'l-dashboard-chart',
+        name: '基础柱状图',
+        icon: 'l-bar-chart',
         data: {
-          width: 200,
-          height: 200,
-          disableAnchor: true,
-          externElement: true,
           name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
           echarts: {
             option: {
-              tooltip: {
-                formatter: '{a} <br/>{b} : {c}%',
+              grid: {
+                bottom: 16,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
+              },
+              fontSize: 10,
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              yAxis: {
+                type: 'value',
+                max: 100,
+                min: 0,
               },
               series: [
                 {
-                  type: 'gauge',
-                  axisLine: {
-                    roundCap: true,
-                  },
-                  progress: {
-                    show: true,
-                    roundCap: true,
-                  },
-                  data: [{ value: 70 }],
+                  type: 'bar',
+                  data: [40, 20, 90, 60, 70, 80],
                 },
               ],
             },
-            replaceMode: ReplaceMode.Replace,
+            max: 100,
           },
           realTimes: [
             {
-              key: 'echarts.option.series.0.data',
-              label: '数据',
-              type: 'object',
+              key: 'echarts.option.series.0.data.0',
+              label: '1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-40',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '3月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-60',
+            },
+            {
+              key: 'echarts.option.series.0.data.4',
+              label: '5月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-80',
             },
             {
-              key: 'echarts.option',
-              label: 'echarts',
-              type: 'object',
+              key: 'echarts.option.series.0.data.5',
+              label: '6月',
+              type: 'float',
+              enableMock: true,
+              mock: '60-100',
             },
           ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '分组柱状图',
+        icon: 'l-fenzuzhuzhuangtu',
+        data: {
+          name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              grid: {
+                bottom: 16,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
+              },
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              yAxis: {
+                type: 'value',
+              },
+              series: [
+                {
+                  type: 'bar',
+                  data: [40, 35, 80, 40, 45, 25],
+                },
+                {
+                  type: 'bar',
+                  data: [25, 40, 20, 30, 25, 40],
+                },
+              ],
+            },
+            max: 30,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0',
+              label: '分组一的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.0',
+              label: '分组二的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '分组一的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.1.data.1',
+              label: '分组二的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '分组一的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '8-80',
+            },
+            {
+              key: 'echarts.option.series.1.data.2',
+              label: '分组二的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '1-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '分组一的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.3',
+              label: '分组二的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.4',
+              label: '分组一的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.4',
+              label: '分组二的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.5',
+              label: '分组一的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.5',
+              label: '分组二的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '30-80',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '堆叠柱状图',
+        icon: 'l-duidiezhuzhuangtu',
+        data: {
+          name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              grid: {
+                bottom: 16,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
+              },
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              yAxis: {
+                type: 'value',
+              },
+              series: [
+                {
+                  type: 'bar',
+                  stack: 'one',
+                  data: [40, 35, 80, 40, 45, 25],
+                },
+                {
+                  type: 'bar',
+                  stack: 'one',
+                  data: [25, 40, 20, 30, 25, 40],
+                },
+              ],
+            },
+            max: 30,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0',
+              label: '分组一的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.0',
+              label: '分组二的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '分组一的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.1.data.1',
+              label: '分组二的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '分组一的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '8-80',
+            },
+            {
+              key: 'echarts.option.series.1.data.2',
+              label: '分组二的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '1-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '分组一的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.3',
+              label: '分组二的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.4',
+              label: '分组一的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.4',
+              label: '分组二的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.5',
+              label: '分组一的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.5',
+              label: '分组二的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '30-80',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+  {
+    name: '条形图',
+    show: true,
+    list: [
+      {
+        name: '基础条形图',
+        icon: 'l-tiaoxingtu',
+        data: {
+          name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              grid: {
+                bottom: 16,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
+              },
+              fontSize: 10,
+              yAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              xAxis: {
+                type: 'value',
+                max: 100,
+                min: 0,
+              },
+              series: [
+                {
+                  type: 'bar',
+                  data: [40, 20, 90, 60, 70, 80],
+                },
+              ],
+            },
+            max: 100,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0',
+              label: '1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-40',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '3月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-60',
+            },
+            {
+              key: 'echarts.option.series.0.data.4',
+              label: '5月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-80',
+            },
+            {
+              key: 'echarts.option.series.0.data.5',
+              label: '6月',
+              type: 'float',
+              enableMock: true,
+              mock: '60-100',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '分组条形图',
+        icon: 'l-fenzutiaoxingtu',
+        data: {
+          name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              grid: {
+                top: 20,
+                bottom: 40,
+                left: 40,
+                right: 20,
+              },
+              yAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              xAxis: {
+                type: 'value',
+                max: 100,
+                min: 0,
+              },
+              series: [
+                {
+                  type: 'bar',
+                  data: [40, 35, 80, 40, 45, 25],
+                },
+                {
+                  type: 'bar',
+                  data: [25, 40, 20, 30, 25, 40],
+                },
+              ],
+            },
+            max: 30,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0',
+              label: '分组一的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.0',
+              label: '分组二的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '分组一的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.1.data.1',
+              label: '分组二的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '分组一的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '8-80',
+            },
+            {
+              key: 'echarts.option.series.1.data.2',
+              label: '分组二的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '1-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '分组一的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.3',
+              label: '分组二的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.4',
+              label: '分组一的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.4',
+              label: '分组二的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.5',
+              label: '分组一的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.5',
+              label: '分组二的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '30-80',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '堆叠条形图',
+        icon: 'l-duidietiaoxingtu',
+        data: {
+          name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              grid: {
+                bottom: 16,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
+              },
+              yAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              xAxis: {
+                type: 'value',
+                max: 100,
+                min: 0,
+              },
+              series: [
+                {
+                  type: 'bar',
+                  stack: 'one',
+                  data: [40, 35, 80, 40, 45, 25],
+                },
+                {
+                  type: 'bar',
+                  stack: 'one',
+                  data: [25, 40, 20, 30, 25, 40],
+                },
+              ],
+            },
+            max: 30,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0',
+              label: '分组一的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.0',
+              label: '分组二的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '分组一的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.1.data.1',
+              label: '分组二的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '分组一的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '8-80',
+            },
+            {
+              key: 'echarts.option.series.1.data.2',
+              label: '分组二的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '1-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '分组一的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.3',
+              label: '分组二的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.4',
+              label: '分组一的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.4',
+              label: '分组二的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.0.data.5',
+              label: '分组一的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.5',
+              label: '分组二的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '30-80',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '正负条形图',
+        icon: 'l-zhengfutiaoxingtu',
+        data: {
+          name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              grid: {
+                bottom: 16,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
+              },
+              yAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              xAxis: {
+                type: 'value',
+                max: 100,
+                min: -50,
+              },
+              series: [
+                {
+                  type: 'bar',
+                  stack: 'one',
+                  data: [40, 35, 80, 40, 45, 25],
+                },
+                {
+                  type: 'bar',
+                  stack: 'one',
+                  data: [25, 40, 20, 30, 25, 40],
+                },
+                {
+                  type: 'bar',
+                  stack: 'one',
+                  data: [-5, -30, -10, -20, -25, -16],
+                },
+              ],
+            },
+            max: 30,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0',
+              label: '分组一的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.0',
+              label: '分组二的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.2.data.0',
+              label: '分组三的1月',
+              type: 'float',
+              enableMock: true,
+              mock: '-10--2',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '分组一的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.1.data.1',
+              label: '分组二的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-70',
+            },
+            {
+              key: 'echarts.option.series.2.data.1',
+              label: '分组三的2月',
+              type: 'float',
+              enableMock: true,
+              mock: '-30--10',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '分组一的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '8-80',
+            },
+            {
+              key: 'echarts.option.series.1.data.2',
+              label: '分组二的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '1-70',
+            },
+            {
+              key: 'echarts.option.series.2.data.2',
+              label: '分组三的3月',
+              type: 'float',
+              enableMock: true,
+              mock: '-30--1',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '分组一的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.3',
+              label: '分组二的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.2.data.3',
+              label: '分组三的4月',
+              type: 'float',
+              enableMock: true,
+              mock: '-50--10',
+            },
+            {
+              key: 'echarts.option.series.0.data.4',
+              label: '分组一的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.4',
+              label: '分组二的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-70',
+            },
+            {
+              key: 'echarts.option.series.2.data.4',
+              label: '分组三的5月',
+              type: 'float',
+              enableMock: true,
+              mock: '-40--10',
+            },
+            {
+              key: 'echarts.option.series.0.data.5',
+              label: '分组一的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-100',
+            },
+            {
+              key: 'echarts.option.series.1.data.5',
+              label: '分组二的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '30-80',
+            },
+            {
+              key: 'echarts.option.series.2.data.5',
+              label: '分组三的6月',
+              type: 'float',
+              enableMock: true,
+              mock: '-30--20',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+  {
+    name: '饼环图',
+    show: true,
+    list: [
+      {
+        name: '饼图',
+        icon: 'l-pie-chart',
+        data: {
+          width: 300,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              tooltip: {
+                trigger: 'item',
+              },
+              series: [
+                {
+                  type: 'pie',
+                  radius: '50%',
+                  label: {
+                    color: '#ffffff',
+                  },
+                  data: [
+                    { value: 335, name: '2D' },
+                    { value: 310, name: '3D' },
+                    { value: 234, name: '大屏' },
+                    { value: 135, name: '物联网平台' },
+                    { value: 1548, name: '图形库' },
+                  ],
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0.value',
+              label: '2D',
+              type: 'integer',
+              enableMock: true,
+              mock: '300-1000',
+            },
+            {
+              key: 'echarts.option.series.0.data.1.value',
+              label: '3D',
+              type: 'integer',
+              enableMock: true,
+              mock: '300-1000',
+            },
+            {
+              key: 'echarts.option.series.0.data.2.value',
+              label: '大屏',
+              type: 'integer',
+              enableMock: true,
+              mock: '300-1000',
+            },
+            {
+              key: 'echarts.option.series.0.data.3.value',
+              label: '物联网平台',
+              type: 'integer',
+              enableMock: true,
+              mock: '300-1000',
+            },
+            {
+              key: 'echarts.option.series.0.data.4.value',
+              label: '图形库',
+              type: 'integer',
+              enableMock: true,
+              mock: '300-1000',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '环图',
+        icon: 'l-huanxingtu',
+        data: {
+          width: 300,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              tooltip: {
+                trigger: 'item',
+              },
+              series: [
+                {
+                  type: 'pie',
+                  radius: ['50%', '70%'],
+                  label: {
+                    color: '#ffffff',
+                  },
+                  data: [
+                    { value: 335, name: '2D' },
+                    { value: 310, name: '3D' },
+                    { value: 234, name: '大屏' },
+                    { value: 135, name: '物联网平台' },
+                    { value: 1548, name: '图形库' },
+                  ],
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0.value',
+              label: '2D',
+              type: 'integer',
+              enableMock: true,
+              mock: '300-1000',
+            },
+            {
+              key: 'echarts.option.series.0.data.1.value',
+              label: '3D',
+              type: 'integer',
+              enableMock: true,
+              mock: '300-1000',
+            },
+            {
+              key: 'echarts.option.series.0.data.2.value',
+              label: '大屏',
+              type: 'integer',
+              enableMock: true,
+              mock: '300-1000',
+            },
+            {
+              key: 'echarts.option.series.0.data.3.value',
+              label: '物联网平台',
+              type: 'integer',
+              enableMock: true,
+              mock: '300-1000',
+            },
+            {
+              key: 'echarts.option.series.0.data.4.value',
+              label: '图形库',
+              type: 'integer',
+              enableMock: true,
+              mock: '300-1000',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '圆角环图',
+        icon: 'l-yuanjiaohuanxingtu',
+        data: {
+          width: 300,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              tooltip: {
+                trigger: 'item',
+              },
+              series: [
+                {
+                  type: 'pie',
+                  radius: ['50%', '70%'],
+                  label: {
+                    color: '#ffffff',
+                  },
+                  itemStyle: {
+                    borderRadius: 4,
+                    borderWidth: 1,
+                  },
+                  data: [
+                    { value: 335, name: '2D' },
+                    { value: 310, name: '3D' },
+                    { value: 234, name: '大屏' },
+                    { value: 135, name: '物联网平台' },
+                    { value: 1548, name: '图形库' },
+                  ],
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0.value',
+              label: '2D',
+              type: 'integer',
+              enableMock: true,
+              mock: '300-1000',
+            },
+            {
+              key: 'echarts.option.series.0.data.1.value',
+              label: '3D',
+              type: 'integer',
+              enableMock: true,
+              mock: '300-1000',
+            },
+            {
+              key: 'echarts.option.series.0.data.2.value',
+              label: '大屏',
+              type: 'integer',
+              enableMock: true,
+              mock: '300-1000',
+            },
+            {
+              key: 'echarts.option.series.0.data.3.value',
+              label: '物联网平台',
+              type: 'integer',
+              enableMock: true,
+              mock: '300-1000',
+            },
+            {
+              key: 'echarts.option.series.0.data.4.value',
+              label: '图形库',
+              type: 'integer',
+              enableMock: true,
+              mock: '300-1000',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+  {
+    name: '散点图',
+    show: true,
+    list: [
+      {
+        name: '散点图',
+        icon: 'l-sandiantu',
+        data: {
+          width: 300,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              grid: {
+                bottom: 12,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
+              },
+              xAxis: {
+                axisLabel: {
+                  fontSize: 12,
+                  color: '#ffffff',
+                },
+              },
+              yAxis: {
+                axisLabel: {
+                  fontSize: 12,
+                  color: '#ffffff',
+                },
+              },
+              series: [
+                {
+                  symbolSize: 10,
+                  data: [
+                    [10.0, 8.04],
+                    [8.07, 6.95],
+                    [13.0, 7.58],
+                    [9.05, 8.81],
+                    [11.0, 8.33],
+                    [14.0, 7.66],
+                    [13.4, 6.81],
+                    [10.0, 6.33],
+                    [14.0, 8.96],
+                    [12.5, 6.82],
+                    [9.15, 7.2],
+                    [11.5, 7.2],
+                    [3.03, 4.23],
+                    [12.2, 7.83],
+                    [2.02, 4.47],
+                    [1.05, 3.33],
+                    [4.05, 4.96],
+                    [6.03, 7.24],
+                    [12.0, 6.26],
+                    [12.0, 8.84],
+                    [7.08, 5.82],
+                    [5.02, 5.68],
+                  ],
+                  type: 'scatter',
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0.0',
+              label: '点1.X',
+              type: 'float',
+              enableMock: true,
+              mock: '10.00-16',
+            },
+            {
+              key: 'echarts.option.series.0.data.0.1',
+              label: '点1.Y',
+              type: 'float',
+              enableMock: true,
+              mock: '10.00-16',
+            },
+            {
+              key: 'echarts.option.series.0.data.1.0',
+              label: '点2.X',
+              type: 'float',
+              enableMock: true,
+              mock: '10.00-16',
+            },
+            {
+              key: 'echarts.option.series.0.data.1.1',
+              label: '点2.Y',
+              type: 'float',
+              enableMock: true,
+              mock: '10.00-16',
+            },
+            {
+              key: 'echarts.option.series.0.data.2.0',
+              label: '点3.X',
+              type: 'float',
+              enableMock: true,
+              mock: '10.00-16',
+            },
+            {
+              key: 'echarts.option.series.0.data.2.1',
+              label: '点3.Y',
+              type: 'float',
+              enableMock: true,
+              mock: '10.00-16',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '涟漪散点图',
+        icon: 'l-lianyisandianyu',
+        data: {
+          width: 300,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              grid: {
+                bottom: 12,
+                left: 16,
+                right: 16,
+                top: 24,
+                containLabel: true,
+              },
+              xAxis: {
+                axisLabel: {
+                  fontSize: 12,
+                  color: '#ffffff',
+                },
+              },
+              yAxis: {
+                axisLabel: {
+                  fontSize: 12,
+                  color: '#ffffff',
+                },
+              },
+              series: [
+                {
+                  type: 'effectScatter',
+                  symbolSize: 8,
+                  data: [
+                    [12.7, 15.2],
+                    [13.4, 4],
+                    [15.4, 2],
+                  ],
+                },
+                {
+                  symbolSize: 10,
+                  data: [
+                    [10.0, 8.04],
+                    [8.07, 6.95],
+                    [13.0, 7.58],
+                    [9.05, 8.81],
+                    [11.0, 8.33],
+                    [14.0, 7.66],
+                    [13.4, 6.81],
+                    [10.0, 6.33],
+                    [14.0, 8.96],
+                    [12.5, 6.82],
+                    [9.15, 7.2],
+                    [11.5, 7.2],
+                    [3.03, 4.23],
+                    [12.2, 7.83],
+                    [2.02, 4.47],
+                    [1.05, 3.33],
+                    [4.05, 4.96],
+                    [6.03, 7.24],
+                    [12.0, 6.26],
+                    [12.0, 8.84],
+                    [7.08, 5.82],
+                    [5.02, 5.68],
+                  ],
+                  type: 'scatter',
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0.0',
+              label: '点1.X',
+              type: 'float',
+              enableMock: true,
+              mock: '10.00-16',
+            },
+            {
+              key: 'echarts.option.series.0.data.0.1',
+              label: '点1.Y',
+              type: 'float',
+              enableMock: true,
+              mock: '10.00-16',
+            },
+            {
+              key: 'echarts.option.series.0.data.1.0',
+              label: '点2.X',
+              type: 'float',
+              enableMock: true,
+              mock: '10.00-16',
+            },
+            {
+              key: 'echarts.option.series.0.data.1.1',
+              label: '点2.Y',
+              type: 'float',
+              enableMock: true,
+              mock: '10.00-16',
+            },
+            {
+              key: 'echarts.option.series.0.data.2.0',
+              label: '点3.X',
+              type: 'float',
+              enableMock: true,
+              mock: '10.00-16',
+            },
+            {
+              key: 'echarts.option.series.0.data.2.1',
+              label: '点3.Y',
+              type: 'float',
+              enableMock: true,
+              mock: '10.00-16',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+  {
+    name: '雷达图',
+    show: true,
+    list: [
+      {
+        name: '雷达图',
+        icon: 'l-leidatu',
+        data: {
+          width: 300,
+          height: 300,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              radar: {
+                indicator: [
+                  { name: '销售', max: 65000 },
+                  { name: '管理', max: 16000 },
+                  { name: '数据', max: 30000 },
+                  { name: '支持', max: 38000 },
+                  { name: '开发', max: 52000 },
+                  { name: '营销', max: 25000 },
+                ],
+                splitLine: {
+                  lineStyle: {
+                    opacity: 0.3,
+                  },
+                },
+                splitArea: {
+                  show: false,
+                },
+                axisLine: {
+                  lineStyle: {
+                    opacity: 0.1,
+                  },
+                },
+              },
+              series: [
+                {
+                  type: 'radar',
+                  lineStyle: { width: 1, opacity: 0.5 },
+                  areaStyle: { opacity: 0.1 },
+                  data: [
+                    {
+                      value: [52000, 3000, 20000, 35000, 50000, 18000],
+                      name: '预算',
+                    },
+                    {
+                      value: [60000, 14000, 28000, 26000, 42000, 21000],
+                      name: '消费',
+                    },
+                  ],
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0.value.0',
+              label: '预算.销售',
+              type: 'integer',
+              enableMock: true,
+              mock: '40000-65000',
+            },
+            {
+              key: 'echarts.option.series.0.data.0.value.1',
+              label: '预算.管理',
+              type: 'integer',
+              enableMock: true,
+              mock: '14000-16000',
+            },
+            {
+              key: 'echarts.option.series.0.data.0.value.2',
+              label: '预算.数据',
+              type: 'integer',
+              enableMock: true,
+              mock: '20000-30000',
+            },
+            {
+              key: 'echarts.option.series.0.data.0.value.3',
+              label: '预算.支持',
+              type: 'integer',
+              enableMock: true,
+              mock: '30000-38000',
+            },
+            {
+              key: 'echarts.option.series.0.data.0.value.4',
+              label: '预算.开发',
+              type: 'integer',
+              enableMock: true,
+              mock: '30000-52000',
+            },
+            {
+              key: 'echarts.option.series.0.data.0.value.5',
+              label: '预算.营销',
+              type: 'integer',
+              enableMock: true,
+              mock: '10000-25000',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '圆形雷达图',
+        icon: 'l-yuanxingleidatu',
+        data: {
+          width: 300,
+          height: 300,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              radar: {
+                shape: 'circle',
+                indicator: [
+                  { name: '销售', max: 65000 },
+                  { name: '管理', max: 16000 },
+                  { name: '数据', max: 30000 },
+                  { name: '支持', max: 38000 },
+                  { name: '开发', max: 52000 },
+                  { name: '营销', max: 25000 },
+                ],
+                splitLine: {
+                  lineStyle: {
+                    opacity: 0.3,
+                  },
+                },
+                splitArea: {
+                  show: false,
+                },
+                axisLine: {
+                  lineStyle: {
+                    opacity: 0.1,
+                  },
+                },
+              },
+              series: [
+                {
+                  type: 'radar',
+                  lineStyle: { width: 1, opacity: 0.5 },
+                  areaStyle: { opacity: 0.1 },
+                  data: [
+                    {
+                      value: [52000, 3000, 20000, 35000, 50000, 18000],
+                      name: '预算',
+                    },
+                    {
+                      value: [60000, 14000, 28000, 26000, 42000, 21000],
+                      name: '消费',
+                    },
+                  ],
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0.value.0',
+              label: '预算.销售',
+              type: 'integer',
+              enableMock: true,
+              mock: '40000-65000',
+            },
+            {
+              key: 'echarts.option.series.0.data.0.value.1',
+              label: '预算.管理',
+              type: 'integer',
+              enableMock: true,
+              mock: '14000-16000',
+            },
+            {
+              key: 'echarts.option.series.0.data.0.value.2',
+              label: '预算.数据',
+              type: 'integer',
+              enableMock: true,
+              mock: '20000-30000',
+            },
+            {
+              key: 'echarts.option.series.0.data.0.value.3',
+              label: '预算.支持',
+              type: 'integer',
+              enableMock: true,
+              mock: '30000-38000',
+            },
+            {
+              key: 'echarts.option.series.0.data.0.value.4',
+              label: '预算.开发',
+              type: 'integer',
+              enableMock: true,
+              mock: '30000-52000',
+            },
+            {
+              key: 'echarts.option.series.0.data.0.value.5',
+              label: '预算.营销',
+              type: 'integer',
+              enableMock: true,
+              mock: '10000-25000',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+  {
+    name: '关系图',
+    show: true,
+    list: [
+      {
+        name: '力引导布局',
+        icon: 'l-liyindaobuju',
+        data: {
+          width: 300,
+          height: 300,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              tooltip: {},
+              series: [
+                {
+                  type: 'graph',
+                  layout: 'force',
+                  data: [
+                    {
+                      id: '0',
+                      name: '1',
+                      symbolSize: 6,
+                      category: 0,
+                    },
+                    {
+                      id: '1',
+                      name: '2',
+                      symbolSize: 6,
+                      category: 0,
+                    },
+                    {
+                      id: '2',
+                      name: '3',
+                      symbolSize: 6,
+                      category: 0,
+                    },
+                    {
+                      id: '3',
+                      name: '4',
+                      symbolSize: 6,
+                      category: 0,
+                    },
+                    {
+                      id: '4',
+                      name: '5',
+                      symbolSize: 6,
+                      category: 0,
+                    },
+                    {
+                      id: '5',
+                      name: '6',
+                      symbolSize: 6,
+                      category: 0,
+                    },
+                    {
+                      id: '6',
+                      name: '7',
+                      symbolSize: 6,
+                      category: 1,
+                    },
+                    {
+                      id: '7',
+                      name: '8',
+                      symbolSize: 6,
+                      category: 1,
+                    },
+                    {
+                      id: '8',
+                      name: '9',
+                      symbolSize: 6,
+                      category: 2,
+                    },
+                    {
+                      id: '9',
+                      name: '10',
+                      symbolSize: 6,
+                      category: 2,
+                    },
+                    {
+                      id: '10',
+                      name: '11',
+                      symbolSize: 6,
+                      category: 2,
+                    },
+                    {
+                      id: '11',
+                      name: '12',
+                      symbolSize: 6,
+                      category: 2,
+                    },
+                    {
+                      id: '12',
+                      name: '13',
+                      symbolSize: 6,
+                      category: 2,
+                    },
+                    {
+                      id: '13',
+                      name: '14',
+                      symbolSize: 6,
+                      category: 3,
+                    },
+                    {
+                      id: '14',
+                      name: '15',
+                      symbolSize: 6,
+                      category: 3,
+                    },
+                    {
+                      id: '15',
+                      name: '16',
+                      symbolSize: 6,
+                      category: 3,
+                    },
+                    {
+                      id: '16',
+                      name: '17',
+                      symbolSize: 6,
+                      category: 3,
+                    },
+                    {
+                      id: '17',
+                      name: '18',
+                      symbolSize: 6,
+                      category: 3,
+                    },
+                    {
+                      id: '18',
+                      name: '19',
+                      symbolSize: 6,
+                      category: 3,
+                    },
+                  ],
+                  links: [
+                    { source: '0', target: '3' },
+                    { source: '1', target: '3' },
+                    { source: '2', target: '3' },
+                    { source: '3', target: '5' },
+                    { source: '4', target: '3' },
+                    { source: '5', target: '8' },
+                    { source: '6', target: '5' },
+                    { source: '7', target: '5' },
+                    { source: '8', target: '10' },
+                    { source: '9', target: '8' },
+                    { source: '10', target: '12' },
+                    { source: '11', target: '12' },
+                    { source: '12', target: '10' },
+                    { source: '13', target: '12' },
+                    { source: '14', target: '9' },
+                    { source: '15', target: '14' },
+                    { source: '16', target: '8' },
+                    { source: '17', target: '12' },
+                    { source: '18', target: '8' },
+                  ],
+                  categories: [
+                    { name: 'A' },
+                    { name: 'B' },
+                    { name: 'C' },
+                    { name: 'D' },
+                  ],
+                  roam: true,
+                  force: {
+                    repulsion: 30,
+                    gravity: 0.03,
+                    edgeLength: 50,
+                    layoutAnimation: true,
+                  },
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: 'data',
+              type: 'array',
+            },
+            {
+              key: 'echarts.option.series.0.links',
+              label: 'links',
+              type: 'array',
+            },
+            {
+              key: 'echarts.option.series.0.categories',
+              label: 'categories',
+              type: 'array',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '知识图谱',
+        icon: 'l-zhishitupu',
+        data: {
+          width: 400,
+          height: 400,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              tooltip: {},
+              series: [
+                {
+                  type: 'graph',
+                  symbolSize: 58,
+                  layout: 'force',
+                  data: [
+                    {
+                      name: '操作系统',
+                      category: 0,
+                    },
+                    {
+                      name: '浏览器',
+                      category: 0,
+                    },
+                    {
+                      name: 'HTML',
+                      category: 0,
+                    },
+                    {
+                      name: 'JavaScript',
+                      category: 0,
+                    },
+                    {
+                      name: 'CSS',
+                      category: 0,
+                    },
+                    {
+                      name: 'Chrome',
+                      category: 1,
+                    },
+                    {
+                      name: 'IE',
+                      category: 1,
+                    },
+                    {
+                      name: 'Firefox',
+                      category: 1,
+                    },
+                    {
+                      name: 'Safari',
+                      category: 1,
+                    },
+                  ],
+
+                  links: [
+                    {
+                      source: '浏览器',
+                      target: '操作系统',
+                      name: '包含',
+                      lineStyle: { color: '#4583ff' },
+                    },
+                    {
+                      source: 'HTML',
+                      target: '浏览器',
+                      name: '实现',
+                      lineStyle: { color: '#4583ff' },
+                    },
+                    {
+                      source: 'CSS',
+                      target: '浏览器',
+                      name: '实现',
+                      lineStyle: { color: '#4583ff' },
+                    },
+                    {
+                      source: 'JavaScript',
+                      target: '浏览器',
+                      name: '实现',
+                      lineStyle: { color: '#4583ff' },
+                    },
+                    {
+                      source: 'Chrome',
+                      target: '浏览器',
+                      name: '属于',
+                      lineStyle: { color: '#4583ff' },
+                    },
+                    {
+                      source: 'IE',
+                      target: '浏览器',
+                      name: '属于',
+                      lineStyle: { color: '#4583ff' },
+                    },
+                    {
+                      source: 'Firefox',
+                      target: '浏览器',
+                      name: '属于',
+                      lineStyle: { color: '#4583ff' },
+                    },
+                    {
+                      source: 'Safari',
+                      target: '浏览器',
+                      name: '属于',
+                      lineStyle: { color: '#4583ff' },
+                    },
+                    {
+                      source: 'Chrome',
+                      target: 'JavaScript',
+                      name: '关联',
+                      lineStyle: { color: '#4583ff' },
+                    },
+                  ],
+                  categories: [
+                    {
+                      name: 'A',
+                      itemStyle: {
+                        color: '#4583ff',
+                      },
+                    },
+                    { name: 'B' },
+                    { name: 'C' },
+                    { name: 'D' },
+                  ],
+                  roam: true,
+                  edgeSymbol: ['', 'arrow'],
+                  label: {
+                    show: true,
+                  },
+                  edgeLabel: {
+                    normal: {
+                      show: true,
+                      color: '#4583ff',
+                      formatter(x) {
+                        return x.data.name;
+                      },
+                    },
+                  },
+                  force: {
+                    repulsion: 500,
+                    edgeLength: 120,
+                  },
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: 'data',
+              type: 'array',
+            },
+            {
+              key: 'echarts.option.series.0.links',
+              label: 'links',
+              type: 'array',
+            },
+            {
+              key: 'echarts.option.series.0.categories',
+              label: 'categories',
+              type: 'array',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+  {
+    name: '桑葚图',
+    show: true,
+    list: [
+      {
+        name: '桑基图',
+        icon: 'l-sangjitu',
+        data: {
+          width: 300,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              series: {
+                right: 30.0,
+                type: 'sankey',
+                layout: 'none',
+                emphasis: {
+                  focus: 'adjacency',
+                },
+                data: [
+                  {
+                    name: 'a',
+                  },
+                  {
+                    name: 'b',
+                  },
+                  {
+                    name: 'a1',
+                  },
+                  {
+                    name: 'a2',
+                  },
+                  {
+                    name: 'b1',
+                  },
+                  {
+                    name: 'c',
+                  },
+                ],
+                links: [
+                  {
+                    source: 'a',
+                    target: 'a1',
+                    value: 5,
+                  },
+                  {
+                    source: 'a',
+                    target: 'a2',
+                    value: 3,
+                  },
+                  {
+                    source: 'b',
+                    target: 'b1',
+                    value: 8,
+                  },
+                  {
+                    source: 'a',
+                    target: 'b1',
+                    value: 3,
+                  },
+                  {
+                    source: 'b1',
+                    target: 'a1',
+                    value: 1,
+                  },
+                  {
+                    source: 'b1',
+                    target: 'c',
+                    value: 2,
+                  },
+                ],
+                lineStyle: {
+                  color: 'source',
+                  curveness: 0.5,
+                },
+                label: {
+                  color: '#ffffff',
+                  fontSize: 10,
+                },
+              },
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.data',
+              label: 'data',
+              type: 'array',
+            },
+            {
+              key: 'echarts.option.series.links',
+              label: 'links',
+              type: 'array',
+            },
+            {
+              key: 'echarts.option.series.links.0.value',
+              label: 'a->a1',
+              type: 'integer',
+              enableMock: true,
+              mock: '3-8',
+            },
+            {
+              key: 'echarts.option.series.links.1.value',
+              label: 'a->a2',
+              type: 'integer',
+              enableMock: true,
+              mock: '1-8',
+            },
+            {
+              key: 'echarts.option.series.links.2.value',
+              label: 'b->b1',
+              type: 'integer',
+              enableMock: true,
+              mock: '1-8',
+            },
+            {
+              key: 'echarts.option.series.links.3.value',
+              label: 'a->b1',
+              type: 'integer',
+              enableMock: true,
+              mock: '1-8',
+            },
+            {
+              key: 'echarts.option.series.links.4.value',
+              label: 'b1->a1',
+              type: 'integer',
+              enableMock: true,
+              mock: '1-8',
+            },
+            {
+              key: 'echarts.option.series.links.5.value',
+              label: 'b1->c',
+              type: 'integer',
+              enableMock: true,
+              mock: '1-8',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '自定义桑基图',
+        icon: 'l-sangshentu',
+        data: {
+          width: 400,
+          height: 500,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              series: {
+                right: 30.0,
+                type: 'sankey',
+                layout: 'none',
+                layoutIterations: 0,
+                emphasis: {
+                  focus: 'adjacency',
+                },
+                lineStyle: {
+                  color: 'source',
+                  opacity: 0.45,
+                  curveness: 0.5,
+                },
+
+                label: {
+                  color: '#fff',
+                  fontSize: 10,
+                },
+                data: [
+                  {
+                    name: '华中',
+                    itemStyle: {
+                      color: 'rgba(0,176,80)',
+                      borderColor: 'rgba(0,176,80)',
+                    },
+                  },
+                  {
+                    name: '华南',
+                    itemStyle: {
+                      color: 'rgba(112,48,160)',
+                      borderColor: 'rgba(112,48,160)',
+                    },
+                  },
+                  {
+                    name: '华东',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '华北',
+                    itemStyle: {
+                      color: 'rgba(198,89,17)',
+                      borderColor: 'rgba(198,89,17)',
+                    },
+                  },
+
+                  {
+                    name: '西北',
+                    itemStyle: {
+                      color: 'rgba(112,173,71)',
+                      borderColor: 'rgba(112,173,71)',
+                    },
+                  },
+                  {
+                    name: '西南',
+                    itemStyle: {
+                      color: 'rgba(117,113,113)',
+                      borderColor: 'rgba(117,113,113)',
+                    },
+                  },
+                  {
+                    name: '北京',
+                    itemStyle: {
+                      color: 'rgba(198,89,17)',
+                      borderColor: 'rgba(198,89,17)',
+                    },
+                  },
+                  {
+                    name: '上海',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '武汉',
+                    itemStyle: {
+                      color: 'rgba(0,176,80)',
+                      borderColor: 'rgba(0,176,80)',
+                    },
+                  },
+                  {
+                    name: '济南',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '东莞',
+                    itemStyle: {
+                      color: 'rgba(112,48,160)',
+                      borderColor: 'rgba(112,48,160)',
+                    },
+                  },
+                  {
+                    name: '珠海',
+                    itemStyle: {
+                      color: 'rgba(112,48,160)',
+                      borderColor: 'rgba(112,48,160)',
+                    },
+                  },
+                  {
+                    name: '青岛',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '无锡',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '厦门',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '成都',
+                    itemStyle: {
+                      color: 'rgba(0,176,80)',
+                      borderColor: 'rgba(0,176,80)',
+                    },
+                  },
+                  {
+                    name: '杭州',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '金华',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '南京',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '西安',
+                    itemStyle: {
+                      color: 'rgba(112,173,71)',
+                      borderColor: 'rgba(112,173,71)',
+                    },
+                  },
+                  {
+                    name: '中山',
+                    itemStyle: {
+                      color: 'rgba(112,48,160)',
+                      borderColor: 'rgba(112,48,160)',
+                    },
+                  },
+                  {
+                    name: '天津',
+                    itemStyle: {
+                      color: 'rgba(198,89,17)',
+                      borderColor: 'rgba(198,89,17)',
+                    },
+                  },
+                  {
+                    name: '苏州',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '威海',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '银川',
+                    itemStyle: {
+                      color: 'rgba(112,173,71)',
+                      borderColor: 'rgba(112,173,71)',
+                    },
+                  },
+                  {
+                    name: '贵阳',
+                    itemStyle: {
+                      color: 'rgba(0,176,80)',
+                      borderColor: 'rgba(0,176,80)',
+                    },
+                  },
+                  {
+                    name: '佛山',
+                    itemStyle: {
+                      color: 'rgba(112,48,160)',
+                      borderColor: 'rgba(112,48,160)',
+                    },
+                  },
+                  {
+                    name: '东营',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '舟山',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '郑州',
+                    itemStyle: {
+                      color: 'rgba(0,176,80)',
+                      borderColor: 'rgba(0,176,80)',
+                    },
+                  },
+                  {
+                    name: '烟台',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '嘉兴',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '三亚',
+                    itemStyle: {
+                      color: 'rgba(112,48,160)',
+                      borderColor: 'rgba(112,48,160)',
+                    },
+                  },
+                  {
+                    name: '宁波',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '潍坊',
+                    itemStyle: {
+                      color: 'rgba(198,89,17)',
+                      borderColor: 'rgba(198,89,17)',
+                    },
+                  },
+                  {
+                    name: '合肥',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '湖州',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '枣庄',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '太原',
+                    itemStyle: {
+                      color: 'rgba(198,89,17)',
+                      borderColor: 'rgba(198,89,17)',
+                    },
+                  },
+                  {
+                    name: '海口',
+                    itemStyle: {
+                      color: 'rgba(112,48,160)',
+                      borderColor: 'rgba(112,48,160)',
+                    },
+                  },
+                  {
+                    name: '长沙',
+                    itemStyle: {
+                      color: 'rgba(0,176,80)',
+                      borderColor: 'rgba(0,176,80)',
+                    },
+                  },
+                  {
+                    name: '淄博',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '聊城',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '常州',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '济宁',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '南宁',
+                    itemStyle: {
+                      color: 'rgba(112,48,160)',
+                      borderColor: 'rgba(112,48,160)',
+                    },
+                  },
+                  {
+                    name: '梅州',
+                    itemStyle: {
+                      color: 'rgba(112,48,160)',
+                      borderColor: 'rgba(112,48,160)',
+                    },
+                  },
+                  {
+                    name: '遵义',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '南昌',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '宿迁',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '福州',
+                    itemStyle: {
+                      color: 'rgba(48,84,150)',
+                      borderColor: 'rgba(48,84,150)',
+                    },
+                  },
+                  {
+                    name: '桂林',
+                    itemStyle: {
+                      color: 'rgba(112,48,160)',
+                      borderColor: 'rgba(112,48,160)',
+                    },
+                  },
+                  {
+                    name: '广州',
+                    itemStyle: {
+                      color: 'rgba(112,48,160)',
+                      borderColor: 'rgba(112,48,160)',
+                    },
+                  },
+                  {
+                    name: '深圳',
+                    itemStyle: {
+                      color: 'rgba(112,48,160)',
+                      borderColor: 'rgba(112,48,160)',
+                    },
+                  },
+                  {
+                    name: '惠州',
+                    itemStyle: {
+                      color: 'rgba(112,48,160)',
+                      borderColor: 'rgba(112,48,160)',
+                    },
+                  },
+                  {
+                    name: '拉萨',
+                    itemStyle: {
+                      color: 'rgba(117,113,113)',
+                      borderColor: 'rgba(117,113,113)',
+                    },
+                  },
+                ],
+                links: [
+                  { source: '武汉', target: '华中', value: 1 },
+                  { source: '深圳', target: '华南', value: 1 },
+                  { source: '北京', target: '华北', value: 1 },
+                  { source: '广州', target: '华南', value: 1 },
+                  { source: '上海', target: '华东', value: 1 },
+                  { source: '济南', target: '华东', value: 1 },
+                  { source: '东莞', target: '华南', value: 1 },
+                  { source: '珠海', target: '华南', value: 1 },
+                  { source: '青岛', target: '华东', value: 1 },
+                  { source: '无锡', target: '华东', value: 1 },
+                  { source: '厦门', target: '华东', value: 1 },
+                  { source: '成都', target: '华中', value: 1 },
+                  { source: '杭州', target: '华东', value: 1 },
+                  { source: '金华', target: '华东', value: 1 },
+                  { source: '南京', target: '华东', value: 1 },
+                  { source: '西安', target: '西北', value: 1 },
+                  { source: '中山', target: '华南', value: 1 },
+                  { source: '天津', target: '华北', value: 1 },
+                  { source: '苏州', target: '华东', value: 1 },
+                  { source: '威海', target: '华东', value: 1 },
+                  { source: '银川', target: '西北', value: 1 },
+                  { source: '贵阳', target: '华中', value: 1 },
+                  { source: '佛山', target: '华南', value: 1 },
+                  { source: '东营', target: '华东', value: 1 },
+                  { source: '舟山', target: '华东', value: 1 },
+                  { source: '郑州', target: '华中', value: 1 },
+                  { source: '烟台', target: '华东', value: 1 },
+                  { source: '嘉兴', target: '华东', value: 1 },
+                  { source: '三亚', target: '华南', value: 1 },
+                  { source: '宁波', target: '华东', value: 1 },
+                  { source: '潍坊', target: '华北', value: 1 },
+                  { source: '合肥', target: '华东', value: 1 },
+                  { source: '湖州', target: '华东', value: 1 },
+                  { source: '枣庄', target: '华东', value: 1 },
+                  { source: '太原', target: '华北', value: 1 },
+                  { source: '海口', target: '华南', value: 1 },
+                  { source: '长沙', target: '华中', value: 1 },
+                  { source: '淄博', target: '华东', value: 1 },
+                  { source: '聊城', target: '华东', value: 1 },
+                  { source: '常州', target: '华东', value: 1 },
+                  { source: '济宁', target: '华东', value: 1 },
+                  { source: '南宁', target: '华南', value: 1 },
+                  { source: '梅州', target: '华南', value: 1 },
+                  { source: '遵义', target: '华东', value: 1 },
+                  { source: '南昌', target: '华东', value: 1 },
+                  { source: '宿迁', target: '华东', value: 1 },
+                  { source: '福州', target: '华东', value: 1 },
+                  { source: '桂林', target: '华南', value: 1 },
+                  { source: '惠州', target: '华南', value: 1 },
+                  { source: '拉萨', target: '西南', value: 1 },
+                ],
+              },
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.data',
+              label: 'data',
+              type: 'array',
+            },
+            {
+              key: 'echarts.option.series.links',
+              label: 'links',
+              type: 'array',
+            },
+            {
+              key: 'echarts.option.series.links.0.value',
+              label: '武汉->华中',
+              type: 'integer',
+              enableMock: true,
+              mock: '1-18',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+  {
+    name: '仪表盘',
+    show: true,
+    list: [
+      {
+        name: '基础仪表盘',
+        icon: 'l-dashboard-chart',
+        data: {
+          width: 300,
+          height: 300,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              fontSize: 10,
+              series: [
+                {
+                  type: 'gauge',
+                  radius: '100%',
+                  axisLine: {
+                    roundCap: true,
+                    lineStyle: {
+                      color: [[1, 'rgba(107,157,215,.25)']],
+                      width: 8,
+                    },
+                  },
+                  axisTick: {
+                    distance: 4,
+                    lineStyle: {
+                      color: '#6B9DD7',
+                    },
+                  },
+                  splitLine: {
+                    distance: 4,
+                    lineStyle: {
+                      width: 2,
+                      color: 'rgb(107,157,215)',
+                    },
+                  },
+                  detail: {
+                    color: '#0c56eb',
+                  },
+                  progress: {
+                    show: true,
+                    roundCap: true,
+                    width: 8,
+                  },
+                  axisLabel: {
+                    color: '#ddd',
+                  },
+                  itemStyle: {
+                    color: '#0c56eb',
+                  },
+                  pointer: {
+                    itemStyle: {
+                      borderWidth: 0,
+                    },
+                  },
+                  data: [{ value: 70 }],
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0.value',
+              label: '值',
+              type: 'integer',
+              enableMock: true,
+              mock: '30-80',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '圆盘仪表盘',
+        icon: 'l-yuanpanyibiaopan',
+        data: {
+          width: 300,
+          height: 300,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              fontSize: 10,
+              series: [
+                {
+                  name: '最外部进度条',
+                  type: 'gauge',
+                  radius: '96%',
+                  splitNumber: 10,
+                  axisLine: {
+                    lineStyle: {
+                      color: [[1, 'rgba(107,157,215,.25)']],
+                      width: 8,
+                    },
+                  },
+                  progress: {
+                    show: true,
+                    width: 8,
+                  },
+                  axisTick: {
+                    distance: 8,
+                    splitNumber: 5,
+                    lineStyle: {
+                      color: '#42E5FB',
+                      width: 1,
+                    },
+                    length: 8,
+                  },
+                  splitLine: {
+                    distance: 8,
+                    length: 15,
+                    lineStyle: {
+                      width: 2,
+                      color: '#42E5FB',
+                    },
+                  },
+                  axisLabel: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    show: false,
+                  },
+                  detail: {
+                    color: '#ACCFFF',
+                    fontSize: 16,
+                    fontWeight: 400,
+                    offsetCenter: [0, '24%'],
+                  },
+                  data: [{ value: 60 }],
+                  pointer: {
+                    length: '40%',
+                    radius: '20%',
+                    width: 4,
+                    itemStyle: {
+                      color: '#45CAED',
+                      borderWidth: 0,
+                    },
+                  },
+                },
+                {
+                  name: '指针上的圆',
+                  type: 'pie',
+                  z: 5,
+                  hoverAnimation: false,
+                  legendHoverLink: false,
+                  radius: ['0%', '6%'],
+                  center: ['50%', '50%'],
+                  label: {
+                    normal: {
+                      show: false,
+                    },
+                  },
+                  labelLine: {
+                    normal: {
+                      show: false,
+                    },
+                  },
+                  data: [
+                    {
+                      value: 10,
+                      itemStyle: {
+                        normal: {
+                          color: '#45CAED',
+                          borderWidth: 0,
+                        },
+                      },
+                    },
+                  ],
+                },
+                {
+                  name: '外层透明圆',
+                  type: 'pie',
+                  radius: '60%',
+                  startAngle: 0,
+                  endAngle: 360,
+                  hoverAnimation: false,
+                  center: ['50%', '50%'],
+                  avoidLabelOverlap: false,
+                  label: {
+                    show: false,
+                  },
+                  labelLine: {
+                    show: false,
+                  },
+                  data: [
+                    {
+                      value: 1,
+                    },
+                  ],
+                  itemStyle: {
+                    normal: {
+                      color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                          {
+                            offset: 0,
+                            color: '#17A1FF',
+                          },
+                          {
+                            offset: 1,
+                            color: 'rgba(17, 90, 233, 0.16)',
+                          },
+                        ],
+                      },
+                      opacity: 0.2,
+                    },
+                  },
+                },
+                {
+                  name: '内圆',
+                  type: 'pie',
+                  radius: '48%',
+                  center: ['50%', '50%'],
+                  startAngle: 0,
+                  endAngle: 360,
+                  label: {
+                    show: false,
+                  },
+                  labelLine: {
+                    show: false,
+                  },
+                  data: [
+                    {
+                      value: 1,
+                    },
+                  ],
+                  itemStyle: {
+                    color: {
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: '#23A6FF',
+                        },
+                        {
+                          offset: 1,
+                          color: 'rgba(17, 90, 233, 0.21)  ',
+                        },
+                      ],
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      type: 'linear',
+                      global: false,
+                    },
+                    opacity: 0.5,
+                    borderWidth: 0,
+                  },
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0.value',
+              label: '值',
+              type: 'integer',
+              enableMock: true,
+              mock: '30-80',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '进度仪表盘',
+        icon: 'l-jinduyibiaopan',
+        data: {
+          width: 300,
+          height: 300,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              fontSize: 10,
+              series: [
+                {
+                  name: '最外部环',
+                  type: 'gauge',
+                  radius: '96%',
+                  splitNumber: 10,
+                  axisLine: {
+                    lineStyle: {
+                      color: [[1, '#33507A']],
+                      width: 8,
+                    },
+                  },
+                  axisTick: {
+                    distance: 8,
+                    splitNumber: 10,
+                    lineStyle: {
+                      color: '#42E5FB',
+                      width: 1,
+                    },
+                    length: 8,
+                  },
+                  splitLine: {
+                    distance: 8,
+                    length: 15,
+                    lineStyle: {
+                      width: 2,
+                      color: '#42E5FB',
+                    },
+                  },
+                  axisLabel: {
+                    show: false,
+                  },
+
+                  itemStyle: {
+                    show: false,
+                  },
+                  detail: {
+                    show: false,
+                  },
+                  title: {
+                    show: false,
+                  },
+                  data: [],
+                  pointer: {
+                    show: false,
+                  },
+                },
+                {
+                  name: '仪表盘',
+                  type: 'gauge',
+                  radius: '70%',
+                  z: 4,
+                  axisLine: {
+                    lineStyle: {
+                      color: [[1, 'rgba(0,0,0,0)']],
+                      width: 20,
+                    },
+                  },
+                  axisLabel: {
+                    show: false,
+                  },
+                  axisTick: {
+                    show: false,
+                  },
+                  splitLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    color: 'rgba(0,191,194,0.5)',
+                  },
+                  progress: {
+                    width: 20,
+                    show: true,
+                  },
+                  detail: {
+                    offsetCenter: [0, 50],
+                    textStyle: {
+                      padding: [0, 0, 0, 0],
+                      fontSize: 30,
+                      color: '#468EFD',
+                    },
+                  },
+                  data: [
+                    {
+                      value: 36,
+                    },
+                  ],
+                  pointer: {
+                    width: 3,
+                    itemStyle: {
+                      borderWidth: 0,
+                    },
+                  },
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.1.data.0.value',
+              label: '值',
+              type: 'integer',
+              enableMock: true,
+              mock: '30-80',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '蓝色科技1',
+        icon: 'l-lansekeji1',
+        data: {
+          width: 300,
+          height: 300,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              fontSize: 10,
+              series: [
+                {
+                  type: 'gauge',
+                  radius: '98%',
+                  splitNumber: 10,
+                  axisLine: {
+                    lineStyle: {
+                      color: [[1, 'rgba(107,157,215,.25)']],
+                      width: 8,
+                    },
+                  },
+                  axisLabel: {
+                    color: '#4d5bd1',
+                    distance: 16,
+                  },
+                  axisTick: {
+                    distance: 16,
+                    splitNumber: 5,
+                    lineStyle: {
+                      color: '#468EFD',
+                      width: 1,
+                    },
+                    length: 8,
+                  },
+                  splitLine: {
+                    distance: 16,
+                    length: 16,
+                    lineStyle: {
+                      color: '#468EFD',
+                    },
+                  },
+                  itemStyle: {
+                    show: false,
+                    color: '#0c56eb',
+                  },
+                  progress: {
+                    show: true,
+                  },
+                  detail: {
+                    offsetCenter: [0, 50],
+                    textStyle: {
+                      padding: [0, 0, 0, 0],
+                      fontSize: 18,
+                      fontWeight: '700',
+                      color: '#0c56eb',
+                    },
+                  },
+
+                  data: [
+                    {
+                      value: 58,
+                    },
+                  ],
+                  pointer: {
+                    length: '75%',
+                    radius: '20%',
+                    width: 5,
+                    itemStyle: {
+                      borderWidth: 0,
+                    },
+                  },
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0.value',
+              label: '值',
+              type: 'integer',
+              enableMock: true,
+              mock: '30-80',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '蓝色科技2',
+        icon: 'l-lansekeji2',
+        data: {
+          width: 300,
+          height: 300,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              fontSize: 10,
+              series: [
+                {
+                  type: 'gauge',
+                  radius: '60%',
+                  splitNumber: 10,
+                  axisLine: {
+                    lineStyle: {
+                      color: [[1, 'rgba(107,157,215,.25)']],
+                      width: 8,
+                    },
+                  },
+                  axisLabel: {
+                    color: '#4d5bd1',
+                    distance: 16,
+                  },
+                  axisTick: {
+                    distance: -50,
+                    splitNumber: 5,
+                    lineStyle: {
+                      color: '#468EFD',
+                      width: 1,
+                    },
+                    length: 8,
+                  },
+                  splitLine: {
+                    distance: -58,
+                    length: 16,
+                    lineStyle: {
+                      color: '#468EFD',
+                    },
+                  },
+                  itemStyle: {
+                    show: false,
+                    color: '#0c56eb',
+                  },
+                  progress: {
+                    show: true,
+                  },
+                  detail: {
+                    offsetCenter: [0, 50],
+                    textStyle: {
+                      padding: [0, 0, 0, 0],
+                      fontSize: 18,
+                      fontWeight: '700',
+                      color: '#0c56eb',
+                    },
+                  },
+                  data: [
+                    {
+                      value: 58,
+                    },
+                  ],
+                  pointer: {
+                    length: '75%',
+                    radius: '20%',
+                    width: 5,
+                    itemStyle: {
+                      borderWidth: 0,
+                    },
+                  },
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0.value',
+              label: '值',
+              type: 'integer',
+              enableMock: true,
+              mock: '30-80',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '蓝色科技3',
+        icon: 'l-lansekeji3',
+        data: {
+          width: 300,
+          height: 300,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              fontSize: 10,
+              series: [
+                {
+                  name: '最外部进度条',
+                  type: 'gauge',
+                  radius: '100%',
+                  z: 3,
+                  axisLine: {
+                    lineStyle: {
+                      color: [[1, 'rgba(28,128,245,0)']],
+                      width: 3,
+                    },
+                  },
+                  axisLabel: {
+                    show: false,
+                  },
+                  axisTick: {
+                    show: false,
+                  },
+                  splitLine: {
+                    show: false,
+                  },
+                  pointer: {
+                    show: false,
+                  },
+                  progress: {
+                    show: true,
+                    width: 5,
+                    itemStyle: {
+                      color: 'rgba(133,165,255,0.3)',
+                      borderWidth: 0,
+                    },
+                  },
+                  detail: {
+                    offsetCenter: [0, 2],
+                    textStyle: {
+                      fontSize: 16,
+                      fontWeight: 400,
+                      color: '#EDFFFD',
+                    },
+                  },
+                  data: [
+                    {
+                      value: 40,
+                    },
+                  ],
+                },
+                {
+                  name: '刻度线',
+                  type: 'gauge',
+                  radius: '80%',
+                  splitNumber: 10,
+                  axisLine: {
+                    lineStyle: {
+                      color: [[1, '#0063E7']],
+                      width: -3,
+                    },
+                  },
+                  axisLabel: {
+                    color: '#69b1ff',
+                    distance: 8,
+                    fontSize: 12,
+                  },
+                  axisTick: {
+                    distance: 6,
+                    splitNumber: 5,
+                    lineStyle: {
+                      color: '#002c8c',
+                      width: 1,
+                    },
+                    length: 4,
+                  },
+                  splitLine: {
+                    distance: 6,
+                    length: 10,
+                    lineStyle: {
+                      color: '#002c8c',
+                      width: 2,
+                    },
+                  },
+                  progress: {
+                    show: true,
+                    width: 60,
+                    itemStyle: {
+                      color: 'rgba(145,207,255,0.12)',
+                      borderWidth: 0,
+                    },
+                  },
+                  detail: {
+                    show: false,
+                  },
+                  pointer: {
+                    length: '100%',
+                    radius: '20%',
+                    width: 3,
+                    itemStyle: {
+                      borderWidth: 0,
+                      color: 'rgba(69,131,255,0.3)',
+                    },
+                  },
+                  anchor: {
+                    show: true,
+                    showAbove: true,
+                    size: 50,
+                    itemStyle: {
+                      color: 'rgb(42,65,111)',
+                    },
+                  },
+                  data: [
+                    {
+                      value: 40,
+                    },
+                  ],
+                },
+              ],
+            },
+            replaceMode: ReplaceMode.Replace,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.1.data.0.value',
+              label: '值',
+              type: 'integer',
+              enableMock: true,
+              mock: '30-80',
+              triggers: [
+                {
+                  name: '触发器1',
+                  conditionType: 'and',
+                  conditions: [],
+                  actions: [
+                    {
+                      action: 5,
+                      params: '',
+                      value:
+                        "let v = pen.echarts.option.series[1].data[0].value;meta2d.setValue({id:pen.id,'echarts.option.series.0.data.0.value':v},{doEvent:false});",
+                      targetType: 'id',
+                      props: [],
+                      input: '',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+  {
+    name: '地图',
+    show: true,
+    list: [
+      {
+        name: '中国地图',
+        icon: 'l-line-chart',
+        data: {
+          name: 'echarts',
+          width: 500,
+          height: 400,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            geoName: 'china',
+            geoUrl:
+              'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full',
+            option: {
+              tooltip: {},
+              geo: {
+                map: 'china',
+                zoom: 1.6,
+                center: [105, 35],
+
+                label: {
+                  normal: {
+                    show: false,
+                  },
+                  emphasis: {
+                    show: false,
+                  },
+                },
+                // 地图区域的样式设置
+                itemStyle: {
+                  normal: {
+                    borderColor: 'rgba(26,82,231, 1)',
+                    borderWidth: 1,
+                    areaColor: 'rgba(7, 52, 126, 0.3)',
+                  },
+                  emphasis: {
+                    areaColor: '#1677ff80',
+                    borderColor: '#1677ff',
+                  },
+                },
+              },
+              series: [
+                {
+                  name: '涟漪散点',
+                  tooltip: {
+                    show: false,
+                  },
+                  type: 'effectScatter',
+                  coordinateSystem: 'geo',
+                  data: [{ name: '武汉', value: [114.31, 30.52] }],
+                  symbolSize: 8,
+                  showEffectOn: 'render',
+                  rippleEffect: {
+                    brushType: 'stroke',
+                  },
+                  hoverAnimation: true,
+                  label: {
+                    show: true,
+                    formatter: '{b}',
+                    position: 'bottom',
+                    color: 'yellow',
+                    offset: [0, 4],
+                  },
+                  itemStyle: {
+                    normal: {
+                      color: 'yellow',
+                      shadowBlur: 10,
+                      shadowColor: 'yellow',
+                    },
+                  },
+                  zlevel: 1,
+                },
+                {
+                  name: '散点',
+                  tooltip: {
+                    show: false,
+                  },
+                  type: 'scatter',
+                  coordinateSystem: 'geo',
+                  data: [
+                    { name: '北京', value: [116.4551, 40.2539] },
+                    { name: '上海', value: [121.4648, 31.2891] },
+                    { name: '广州', value: [113.12244, 23.009505] },
+                    { name: '杭州', value: [119.5313, 29.8773] },
+                    { name: '成都', value: [103.9526, 30.7617] },
+                  ],
+                  symbolSize: 8,
+                  label: {
+                    show: true,
+                    formatter: '{b}',
+                    position: 'bottom',
+                    color: '#36cfc9',
+                    offset: [0, -2],
+                  },
+                  itemStyle: {
+                    normal: {
+                      color: '#36cfc9',
+                    },
+                  },
+                  zlevel: 1,
+                },
+                {
+                  name: '数据',
+                  tooltip: { formatter: '{b}' },
+                  animation: false,
+                  type: 'scatter',
+                  coordinateSystem: 'geo',
+                  symbol: 'pin',
+                  symbolSize: 40,
+                  label: {
+                    normal: {
+                      show: true,
+                      formatter: '{b}',
+                      textStyle: {
+                        color: '#fff',
+                        fontSize: 9,
+                      },
+                    },
+                  },
+                  itemStyle: {
+                    normal: {
+                      color: '#F62157',
+                    },
+                  },
+                  zlevel: 6,
+                  data: [
+                    { name: 128, value: [114.31, 30.52] },
+                    { name: 96, value: [116.4551, 40.2539] },
+                    { name: 94, value: [121.4648, 31.2891] },
+                    { name: 86, value: [113.12244, 23.009505] },
+                    { name: 92, value: [119.5313, 29.8773] },
+                    { name: 82, value: [103.9526, 30.7617] },
+                  ],
+                },
+              ],
+            },
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.2.data.0.name',
+              label: '武汉',
+              type: 'integer',
+              enableMock: true,
+              mock: '100-150',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '湖北地图',
+        icon: 'l-line-chart',
+        data: {
+          name: 'echarts',
+          width: 500,
+          height: 400,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            geoName: 'hubei',
+            geoUrl:
+              'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=420000_full',
+            option: {
+              tooltip: {},
+              geo: {
+                map: 'hubei',
+                zoom: 1.2,
+                label: {
+                  normal: {
+                    show: false,
+                  },
+                  emphasis: {
+                    show: false,
+                  },
+                },
+                // 地图区域的样式设置
+                itemStyle: {
+                  normal: {
+                    areaColor: {
+                      x: 0,
+                      y: 0,
+                      x2: 0,
+                      y2: 1,
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: '#001d66a0',
+                        },
+                        {
+                          offset: 1,
+                          color: '#061E3Da0',
+                        },
+                      ],
+                    },
+                    borderColor: 'rgba(26,82,231, 1)',
+                    borderWidth: 1,
+                  },
+                  emphasis: {
+                    areaColor: '#1677ff80',
+                    borderColor: '#1677ff',
+                  },
+                },
+              },
+              series: [
+                {
+                  name: '涟漪',
+                  tooltip: {
+                    show: false,
+                  },
+                  type: 'effectScatter',
+                  coordinateSystem: 'geo',
+                  data: [
+                    { name: '武汉', value: [114.31, 30.52] },
+                    { name: '襄阳', value: [112.12207, 31.933056] },
+                    { name: '宜昌', value: [111.309082, 30.588625] },
+                    { name: '荆州', value: [112.24292, 30.266177] },
+                  ],
+                  rippleEffect: {
+                    scale: 10,
+                    brushType: 'stroke',
+                  },
+                  showEffectOn: 'render',
+                  itemStyle: {
+                    normal: {
+                      shadowColor: '#0ff',
+                      shadowBlur: 10,
+                      shadowOffsetX: 0,
+                      shadowOffsetY: 0,
+                      color: {
+                        colorStops: [
+                          {
+                            offset: 0,
+                            color: '#61c0f1',
+                          },
+                          {
+                            offset: 1,
+                            color: '#6f2eb6',
+                          },
+                        ],
+                        x: 1,
+                        y: 0,
+                        x2: 0,
+                        y2: 0,
+                        type: 'linear',
+                        global: false,
+                      },
+                    },
+                  },
+                  label: {
+                    normal: {
+                      color: '#fff',
+                    },
+                  },
+                  symbol: 'circle',
+                  symbolSize: [10, 5],
+                },
+                {
+                  tooltip: {
+                    show: false,
+                  },
+                  name: '图标',
+                  type: 'scatter',
+                  coordinateSystem: 'geo',
+                  symbol:
+                    'image://https://assets.le5lecdn.com/v%2Fmaterial%2F%E5%B8%B8%E7%94%A8%E5%9B%BE%E6%A0%87%2F%E5%9C%B0%E5%9B%BE%E6%A0%87%E6%B3%A8.svg',
+                  symbolSize: [32, 32],
+                  symbolOffset: [0, -20],
+                  z: 9999,
+                  data: [
+                    { name: '武汉', value: [114.31, 30.52] },
+                    { name: '襄阳', value: [112.12207, 31.933056] },
+                    { name: '宜昌', value: [111.309082, 30.588625] },
+                    { name: '荆州', value: [112.24292, 30.266177] },
+                  ],
+                },
+                {
+                  type: 'scatter',
+                  coordinateSystem: 'geo',
+                  tooltip: { formatter: '统计:{b}' },
+                  animation: false,
+                  label: {
+                    normal: {
+                      show: true,
+                      formatter: '{b}',
+                      color: '#fff',
+                    },
+                    emphasis: {
+                      show: true,
+                    },
+                  },
+                  itemStyle: {
+                    color: '#4583ff70',
+                  },
+                  symbol:
+                    'image://https://assets.le5lecdn.com/v/material/%E9%9D%A2%E6%9D%BF/%E9%9D%A2%E6%9D%BF8.svg',
+                  symbolSize: [80, 36],
+                  symbolOffset: [0, -60],
+                  z: 999,
+                  data: [
+                    { name: '2514', value: [114.31, 30.52] },
+                    { name: '1265', value: [112.12207, 31.933056] },
+                    { name: '1563', value: [111.309082, 30.588625] },
+                    { name: '1654', value: [112.24292, 30.266177] },
+                  ],
+                },
+              ],
+            },
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.2.data.0.name',
+              label: '武汉',
+              type: 'integer',
+              enableMock: true,
+              mock: '2000-3000',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+      {
+        name: '地图·流量',
+        icon: 'l-line-chart',
+        data: {
+          name: 'echarts',
+          width: 500,
+          height: 400,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            geoName: 'china',
+            geoUrl:
+              'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full',
+            option: {
+              tooltip: {},
+              geo: {
+                map: 'china',
+                zoom: 1.6,
+                center: [105, 35],
+                label: {
+                  normal: {
+                    show: true,
+                    fontSize: 10,
+                    textStyle: {
+                      color: '#fff',
+                    },
+                  },
+                  emphasis: {
+                    textStyle: {
+                      color: '#fff',
+                    },
+                  },
+                },
+                // 地图区域的样式设置
+                itemStyle: {
+                  normal: {
+                    borderColor: 'rgba(26,82,231, 1)',
+                    borderWidth: 1,
+                    areaColor: 'rgba(7, 52, 126, 0.3)',
+                  },
+                  emphasis: {
+                    areaColor: '#1677ff80',
+                    borderColor: '#1677ff',
+                  },
+                },
+              },
+              series: [
+                {
+                  name: '涟漪散点',
+                  tooltip: {
+                    show: false,
+                  },
+                  type: 'effectScatter',
+                  coordinateSystem: 'geo',
+                  data: [
+                    {
+                      value: [118.8062, 31.9208],
+                      itemStyle: { color: '#4ab2e5' },
+                    },
+                    {
+                      value: [127.9688, 45.368],
+                      itemStyle: { color: '#4fb6d2' },
+                    },
+                    {
+                      value: [110.3467, 41.4899],
+                      itemStyle: { color: '#52b9c7' },
+                    },
+                    {
+                      value: [125.8154, 44.2584],
+                      itemStyle: { color: '#5abead' },
+                    },
+                    {
+                      value: [116.4551, 40.2539],
+                      itemStyle: { color: '#f34e2b' },
+                    },
+                    {
+                      value: [123.1238, 42.1216],
+                      itemStyle: { color: '#f56321' },
+                    },
+                    {
+                      value: [119.4543, 25.9222],
+                      itemStyle: { color: '#f56f1c' },
+                    },
+                    {
+                      value: [117.4219, 39.4189],
+                      itemStyle: { color: '#f58414' },
+                    },
+                    {
+                      value: [112.3352, 37.9413],
+                      itemStyle: { color: '#f58f0e' },
+                    },
+                    {
+                      value: [109.1162, 34.2004],
+                      itemStyle: { color: '#f5a305' },
+                    },
+                    {
+                      value: [103.5901, 36.3043],
+                      itemStyle: { color: '#e7ab0b' },
+                    },
+                    {
+                      value: [106.3586, 38.1775],
+                      itemStyle: { color: '#dfae10' },
+                    },
+                    {
+                      value: [101.4038, 36.8207],
+                      itemStyle: { color: '#d5b314' },
+                    },
+                    {
+                      value: [103.9526, 30.7617],
+                      itemStyle: { color: '#c1bb1f' },
+                    },
+                    {
+                      value: [108.384366, 30.439702],
+                      itemStyle: { color: '#b9be23' },
+                    },
+                    {
+                      value: [113.0823, 28.2568],
+                      itemStyle: { color: '#a6c62c' },
+                    },
+                    {
+                      value: [102.9199, 25.46639],
+                      itemStyle: { color: '#96cc34' },
+                    },
+                    { value: [114.31, 30.52] },
+                  ],
+                  symbolSize: 8,
+                  showEffectOn: 'render',
+                  rippleEffect: {
+                    brushType: 'stroke',
+                  },
+                  hoverAnimation: true,
+                  label: {
+                    show: true,
+                    formatter: '{b}',
+                    position: 'bottom',
+                    color: 'yellow',
+                    offset: [0, 4],
+                  },
+                  itemStyle: {
+                    normal: {
+                      color: '#1DE9B6',
+                      shadowBlur: 10,
+                      shadowColor: '#333',
+                    },
+                  },
+                  zlevel: 1,
+                },
+                {
+                  type: 'lines',
+                  zlevel: 2,
+                  effect: {
+                    show: true,
+                    period: 4, //箭头指向速度,值越小速度越快
+                    trailLength: 0.4, //特效尾迹长度[0,1]值越大,尾迹越长重
+                    symbol: 'arrow', //箭头图标
+                    symbolSize: 7, //图标大小
+                  },
+                  lineStyle: {
+                    normal: {
+                      color: '#1DE9B6',
+                      width: 1,
+                      opacity: 0.1, //尾迹线条透明度
+                      curveness: 0.3, //尾迹线条曲直度
+                    },
+                  },
+                  data: [
+                    {
+                      coords: [
+                        [118.8062, 31.9208],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#4ab2e5' },
+                    },
+                    {
+                      coords: [
+                        [127.9688, 45.368],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#4fb6d2' },
+                    },
+                    {
+                      coords: [
+                        [110.3467, 41.4899],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#52b9c7' },
+                    },
+                    {
+                      coords: [
+                        [125.8154, 44.2584],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#5abead' },
+                    },
+                    {
+                      coords: [
+                        [116.4551, 40.2539],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#f34e2b' },
+                    },
+                    {
+                      coords: [
+                        [123.1238, 42.1216],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#f56321' },
+                    },
+                    {
+                      coords: [
+                        [119.4543, 25.9222],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#f56f1c' },
+                    },
+                    {
+                      coords: [
+                        [117.4219, 39.4189],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#f58414' },
+                    },
+                    {
+                      coords: [
+                        [112.3352, 37.9413],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#f58f0e' },
+                    },
+                    {
+                      coords: [
+                        [109.1162, 34.2004],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#f5a305' },
+                    },
+                    {
+                      coords: [
+                        [103.5901, 36.3043],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#e7ab0b' },
+                    },
+                    {
+                      coords: [
+                        [106.3586, 38.1775],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#dfae10' },
+                    },
+                    {
+                      coords: [
+                        [101.4038, 36.8207],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#d5b314' },
+                    },
+                    {
+                      coords: [
+                        [103.9526, 30.7617],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#c1bb1f' },
+                    },
+                    {
+                      coords: [
+                        [108.384366, 30.439702],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#b9be23' },
+                    },
+                    {
+                      coords: [
+                        [113.0823, 28.2568],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#a6c62c' },
+                    },
+                    {
+                      coords: [
+                        [102.9199, 25.46639],
+                        [114.31, 30.52],
+                      ],
+                      lineStyle: { color: '#96cc34' },
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.2.data.0.name',
+              label: '武汉',
+              type: 'integer',
+              // enableMock: true,
+              // mock: '100-150',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
         },
       },
     ],

+ 51 - 1
src/views/components/Dataset.vue

@@ -64,9 +64,16 @@
       @close="addDataDialog.show = false"
       @confirm="onOkAddData"
     >
+      <div class="form-item mt-16">
+        <label>设备</label>
+        <t-input v-model="addDataDialog.data.device" placeholder="设备名称" />
+      </div>
       <div class="form-item mt-16">
         <label>数据点名称</label>
-        <t-input v-model="addDataDialog.data.label" placeholder="简短描述" />
+        <t-input
+          v-model="addDataDialog.data.label"
+          placeholder="数据点简短描述"
+        />
       </div>
       <div class="form-item mt-16">
         <label>数据点ID</label>
@@ -82,6 +89,31 @@
           @change="addDataDialog.data.value = null"
         />
       </div>
+      <div class="form-item mt-16">
+        <label>值范围</label>
+        <div class="w-full">
+          <t-input v-model="addDataDialog.data.mock" placeholder="值范围" />
+          <h6 class="desc mt-8">值范围说明</h6>
+          <ul class="desc ml-16">
+            <li>
+              <label class="inline" style="width: 80px">固定值:</label>
+              直接填写,例如:10
+            </li>
+            <li>
+              <label class="inline" style="width: 80px">随机值:</label>
+              {值1,值2,...}。例如:{1,2,3,4,5}
+            </li>
+            <li>
+              <label class="inline" style="width: 80px">范围数字:</label>
+              最小值-最大值。例如:0-1.0 或 0-100
+            </li>
+            <li>
+              <label class="inline" style="width: 80px">随机字符串:</label>
+              [长度]。例如:[8]
+            </li>
+          </ul>
+        </div>
+      </div>
     </t-dialog>
   </div>
 </template>
@@ -101,6 +133,11 @@ const { modelValue } = defineProps<{
 const emit = defineEmits(['update:modelValue', 'change']);
 
 const datasetColumns = ref([
+  {
+    colKey: 'device',
+    title: '设备',
+    ellipsis: true,
+  },
   {
     colKey: 'label',
     title: '数据点名称',
@@ -116,6 +153,11 @@ const datasetColumns = ref([
     title: '类型',
     ellipsis: true,
   },
+  {
+    colKey: 'mock',
+    title: '值范围',
+    ellipsis: true,
+  },
   {
     colKey: 'actions',
     title: '操作',
@@ -146,6 +188,10 @@ const getDatas = async () => {
 
 const importDataset = async () => {
   let columns: any = [
+    {
+      header: '设备',
+      key: 'device',
+    },
     {
       header: '数据点名称',
       key: 'label',
@@ -158,6 +204,10 @@ const importDataset = async () => {
       header: '类型',
       key: 'type',
     },
+    {
+      header: '值范围',
+      key: 'mock',
+    },
   ];
   const data: any = await importExcel(columns);
   modelValue.data = data;

+ 15 - 0
src/views/components/ElementTree.vue

@@ -188,6 +188,21 @@ const getActived = () => {
     for (const pen of meta2d.store.active) {
       data.actived.push(pen.id);
     }
+
+    const element = document.body.querySelector(
+      `[data-value="${data.actived[0]}"]`
+    );
+
+    if (element) {
+      element.scrollIntoView({ block: 'center' });
+    } else {
+      setTimeout(() => {
+        const element = document.body.querySelector(
+          `[data-value="${data.actived[0]}"]`
+        );
+        element && element.scrollIntoView({ block: 'center' });
+      }, 500);
+    }
   }
 };
 

+ 1 - 1
src/views/components/Header.vue

@@ -142,7 +142,7 @@
       :delay2="[10, 150]"
       overlayClassName="header-dropdown"
     >
-      <a> 工具 </a>
+      <a> 查看 </a>
       <t-dropdown-menu>
         <t-dropdown-item>
           <a @click="onScaleWindow">窗口大小</a>

+ 22 - 4
src/views/components/Network.vue

@@ -2,7 +2,7 @@
   <div class="network-component">
     <div class="form-item mt-8">
       <label>
-        {{ modelValue.type === 'subscribe' ? '数据订阅' : '数据发送' }}
+        {{ modelValue.type === 'subscribe' ? '实时数据' : '数据发送' }}
       </label>
       <t-select-input
         v-if="mode"
@@ -72,7 +72,12 @@
       <label>URL地址</label>
       <t-input v-model="modelValue.url" />
     </div>
-    <template v-if="modelValue.protocol === 'websocket'"> </template>
+    <template v-if="modelValue.protocol === 'websocket'">
+      <div class="form-item mt-8">
+        <label>protocols</label>
+        <t-input v-model="modelValue.options.protocols" />
+      </div>
+    </template>
     <template v-else-if="modelValue.protocol === 'http'">
       <div class="form-item mt-8">
         <label>请求方式</label>
@@ -83,18 +88,30 @@
       </div>
       <div class="form-item mt-8">
         <label>请求头</label>
-        <t-textarea
+        <!-- <t-textarea
           v-model="modelValue.headers"
           :autosize="{ minRows: 3, maxRows: 5 }"
           placeholder="请输入"
+        /> -->
+        <CodeEditor
+          :json="true"
+          v-model="modelValue.headers"
+          class="mt-4"
+          style="height: 50px"
         />
       </div>
       <div v-if="modelValue.method === 'POST'" class="form-item mt-8">
         <label>请求体</label>
-        <t-textarea
+        <!-- <t-textarea
           v-model="modelValue.body"
           :autosize="{ minRows: 3, maxRows: 5 }"
           placeholder="请输入"
+        /> -->
+        <CodeEditor
+          :json="true"
+          v-model="modelValue.body"
+          class="mt-4"
+          style="height: 50px"
         />
       </div>
     </template>
@@ -138,6 +155,7 @@ import { onBeforeMount, ref } from 'vue';
 import axios from 'axios';
 import { debounce } from '@/services/debouce';
 import { MessagePlugin } from 'tdesign-vue-next';
+import CodeEditor from '@/views/components/common/CodeEditor.vue';
 
 const { modelValue, mode } = defineProps<{
   modelValue: any;

+ 151 - 35
src/views/components/PenDatas.vue

@@ -19,34 +19,35 @@
         <div class="value">
           <t-input
             v-if="item.type === 'integer'"
-            v-model.number="pen[item.key]"
+            v-model.number="props.pen[item.key]"
             placeholder="整数"
             @change="changeValue(item.key)"
           />
           <t-input-number
             v-else-if="item.type === 'float'"
-            v-model="pen[item.key]"
+            v-model="props.pen[item.key]"
             placeholder="浮点数"
             theme="normal"
             @change="changeValue(item.key)"
           />
           <t-switch
             v-else-if="item.type === 'bool'"
-            v-model="pen[item.key]"
+            v-model="props.pen[item.key]"
             class="ml-8"
             size="small"
             @change="changeValue(item.key)"
           />
-          <div
+          <t-button
             v-else-if="item.type === 'array' || item.type === 'object'"
-            class="gray ellipsis"
-            style="height: 30px"
+            variant="outline"
+            style="padding: 0px 2px 0 4px; margin: 0 4px"
+            @click="editObject(item)"
           >
-            {{ JSON.stringify(pen[item.key]) }}
-          </div>
+            <t-icon name="ellipsis" />
+          </t-button>
           <t-input
             v-else
-            v-model="pen[item.key]"
+            v-model="props.pen[item.key]"
             placeholder="字符串"
             @change="changeValue(item.key)"
           />
@@ -155,7 +156,10 @@
     :visible="true"
     class="data-link-dialog"
     header="动态数据设置"
-    @close="dataBindDialog.show = false"
+    @close="
+      dataBindDialog.datasetList = undefined;
+      dataBindDialog.show = false;
+    "
     @confirm="dataBindonConfirm"
     :top="70"
     :width="700"
@@ -178,7 +182,30 @@
           </div>
           <div class="label gray" v-else>无</div>
         </div>
-        <div class="form-item mt-8">
+        <div class="form-item flex middle mt-8">
+          <t-input
+            v-if="dataBindDialog.url"
+            v-model="dataBindDialog.device"
+            placeholder="设备"
+            style="width: 200px"
+          />
+          <t-select
+            v-else
+            class="mr-16"
+            style="width: 200px"
+            v-model="dataBindDialog.device"
+            clearable
+            placeholder="设备"
+            @change="getDataset"
+          >
+            <t-option
+              v-for="(item, i) in dataBindDialog.devices"
+              :key="item"
+              :value="item"
+              :label="item"
+            />
+          </t-select>
+
           <t-input
             placeholder="搜索"
             v-model="dataBindDialog.input"
@@ -232,7 +259,7 @@
           </li>
           <li class="mt-4">
             <label class="inline" style="width: 80px">随机值:</label>
-            {值1,值2,...}。例如:{1,2,3,4,5}
+            值1,值2,...。例如:1,2,3,4,5
           </li>
           <li class="mt-4">
             <label class="inline" style="width: 80px">范围数字:</label>
@@ -406,6 +433,23 @@
       </div>
     </div>
   </t-dialog>
+
+  <t-dialog
+    v-if="ojbectDialog.show"
+    :visible="true"
+    header="数据编辑"
+    @confirm="onOkEditOjbect"
+    @close="ojbectDialog.show = false"
+    :width="700"
+  >
+    <div class="py-8">
+      <CodeEditor
+        :json="true"
+        v-model="ojbectDialog.data"
+        style="height: 300px"
+      />
+    </div>
+  </t-dialog>
 </template>
 
 <script lang="ts" setup>
@@ -449,25 +493,25 @@ const options = ref<any>([
   {
     value: 'x',
     content: 'X',
-    type: 'number',
+    type: 'float',
     keywords: true,
   },
   {
     value: 'y',
     content: 'Y',
-    type: 'number',
+    type: 'float',
     keywords: true,
   },
   {
     value: 'width',
     content: '宽',
-    type: 'number',
+    type: 'float',
     keywords: true,
   },
   {
     value: 'height',
     content: '高',
-    type: 'number',
+    type: 'float',
     keywords: true,
   },
   {
@@ -484,19 +528,19 @@ const options = ref<any>([
   {
     value: 'progress',
     content: '进度',
-    type: 'number',
+    type: 'float',
     keywords: true,
   },
   {
     value: 'showChild',
     content: '状态',
-    type: 'number',
+    type: 'integer',
     keywords: true,
   },
   {
     value: 'rotate',
     content: '旋转',
-    type: 'number',
+    type: 'integer',
     keywords: true,
   },
 ]);
@@ -522,22 +566,30 @@ const dataBindDialog = reactive<any>({
   data: undefined,
 });
 
+const ojbectDialog = reactive<any>({
+  show: false,
+  data: undefined,
+});
+
 const dataSetColumns = [
   {
     colKey: 'row-select',
     type: 'single',
     width: 50,
   },
+  {
+    colKey: 'device',
+    title: '设备',
+    ellipsis: { theme: 'light', trigger: 'context-menu' },
+  },
   {
     colKey: 'label',
     title: '数据点名称',
-    width: 200,
     ellipsis: { theme: 'light', trigger: 'context-menu' },
   },
   {
     colKey: 'id',
     title: '数据点ID',
-    width: 200,
     ellipsis: { theme: 'light', trigger: 'context-menu' },
   },
   {
@@ -545,6 +597,11 @@ const dataSetColumns = [
     title: '类型',
     width: 100,
   },
+  {
+    colKey: 'mock',
+    title: '值范围',
+    ellipsis: true,
+  },
 ];
 
 const operatorOptions = ref<any>([
@@ -590,7 +647,7 @@ onBeforeMount(() => {
 });
 
 const addRealTime = (e: any) => {
-  if (e.keywords) {
+  if (e.keywords || e.value === 'text') {
     if (!props.pen.realTimes) {
       props.pen.realTimes = [];
     }
@@ -701,24 +758,54 @@ const getDataset = async () => {
   if (data.dataset.url) {
     const ret: any = await axios.get(data.dataset.url, {
       params: {
+        device: dataBindDialog.device || '',
         q: dataBindDialog.input,
         current: query.current,
         pageSize: query.pageSize,
       },
     });
     dataBindDialog.dataset = ret;
+    dataBindDialog.url = true;
     query.total = ret.total;
-  } else if (dataBindDialog.input) {
-    dataBindDialog.dataset = data.dataset.data.filter((item: any) => {
-      return (
-        searchPinyin(item.label, dataBindDialog.input) ||
-        item.id.indexOf(dataBindDialog.input) > -1
-      );
-    });
-    query.total = dataBindDialog.dataset.length;
   } else {
-    dataBindDialog.dataset = data.dataset.data;
-    query.total = dataBindDialog.dataset.length;
+    dataBindDialog.url = false;
+    if (!dataBindDialog.datasetList) {
+      const ret = await axios.post(`/api/data/datasources/get`, {
+        id: data.dataset.id,
+      });
+      if (ret?.data) {
+        data.dataset.data = ret.data;
+        dataBindDialog.datasetList = data.dataset.data;
+        const set = new Set<string>();
+        for (const item of dataBindDialog.datasetList) {
+          set.add(item.device);
+        }
+        dataBindDialog.devices = Array.from(set);
+      } else {
+        dataBindDialog.dataset = [];
+        dataBindDialog.devices = [];
+        return;
+      }
+    }
+
+    if (dataBindDialog.device || dataBindDialog.input) {
+      dataBindDialog.dataset = dataBindDialog.datasetList.filter(
+        (item: any) => {
+          if (dataBindDialog.device && item.device !== dataBindDialog.device) {
+            return;
+          }
+
+          return (
+            searchPinyin(item.label, dataBindDialog.input) ||
+            item.id.indexOf(dataBindDialog.input) > -1
+          );
+        }
+      );
+      query.total = dataBindDialog.datasetList.length;
+    } else {
+      dataBindDialog.dataset = [...dataBindDialog.datasetList];
+      query.total = dataBindDialog.datasetList.length;
+    }
   }
   dataBindDialog.loading = false;
 };
@@ -737,6 +824,7 @@ const onSelectBindsChange = (value: string[], options: any) => {
   if (options.type === 'check') {
     dataBindDialog.selectedIds = value;
     dataBindDialog.data.bind = toRaw(options.selectedRowData[0]);
+    dataBindDialog.data.mock = dataBindDialog.data.bind.mock;
     doBindInit();
   } else if (options.type === 'uncheck') {
     dataBindDialog.selectedIds = [];
@@ -765,6 +853,7 @@ const doBindInit = () => {
 
 const dataBindonConfirm = () => {
   dataBindDialog.show = false;
+  dataBindDialog.datasetList = undefined;
   meta2d.initBinds();
 };
 
@@ -880,6 +969,32 @@ const onInput = (item: any) => {
   item.label = item.value;
 };
 
+const editObject = (item: any) => {
+  ojbectDialog.data = props.pen[item.key];
+  ojbectDialog.item = item;
+  ojbectDialog.show = true;
+};
+
+const onOkEditOjbect = () => {
+  if (ojbectDialog.data) {
+    if (
+      ojbectDialog.item.type === 'array' &&
+      !Array.isArray(ojbectDialog.data)
+    ) {
+      MessagePlugin.error('请输入数组格式数据');
+      return;
+    }
+    props.pen[ojbectDialog.item.key] = ojbectDialog.data;
+    props.pen[ojbectDialog.item.key] = updatePen(
+      props.pen,
+      ojbectDialog.item.key
+    );
+    ojbectDialog.show = false;
+  } else {
+    MessagePlugin.error('请输入严格的JSON格式数据');
+  }
+};
+
 onUnmounted(() => {
   clearInterval(timer);
 });
@@ -889,7 +1004,7 @@ onUnmounted(() => {
   height: 100%;
 
   .grid {
-    grid-template-columns: 60px 140px 54px 30px;
+    grid-template-columns: 80px 120px 54px 30px;
     padding: 0 12px;
 
     &.head {
@@ -912,7 +1027,7 @@ onUnmounted(() => {
   }
 
   .label {
-    width: fit-content;
+    width: fix-content;
     font-size: 10px;
     line-height: 28px;
     color: var(--color-desc);
@@ -922,6 +1037,7 @@ onUnmounted(() => {
     padding-right: 8px;
     display: flex;
     align-items: center;
+    justify-content: space-between;
 
     svg {
       flex-shrink: 0;
@@ -929,7 +1045,7 @@ onUnmounted(() => {
     }
 
     & > div {
-      width: 110px;
+      width: 90px;
       &.t-switch {
         width: fit-content;
         margin-left: 4px;

+ 6 - 0
src/views/components/PenProps.vue

@@ -1014,6 +1014,7 @@
             <div class="py-8">
               <CodeEditor
                 :json="true"
+                :language="'json'"
                 v-model="propsDialog.value"
                 style="height: 300px"
               />
@@ -1055,6 +1056,7 @@ import { getCookie } from '@/services/cookie';
 import { useSelection } from '@/services/selections';
 import { autoSave, fonts, inTreePanel } from '@/services/common';
 import { updatePen } from './pen';
+import { MessagePlugin } from 'tdesign-vue-next';
 
 const headers = {
   Authorization: 'Bearer ' + (localStorage.token || getCookie('token') || ''),
@@ -1261,6 +1263,10 @@ const showPropsEdit = (item: any) => {
 };
 
 const onOkPropsEdit = () => {
+  if (!propsDialog.value) {
+    MessagePlugin.error('数据不满足json格式');
+    return;
+  }
   data.pen[propsDialog.key] = propsDialog.value;
   updatePen(data.pen, propsDialog.key);
   propsDialog.show = false;

+ 28 - 12
src/views/components/View.vue

@@ -286,7 +286,7 @@
       @close="dataDialog.show = false"
     >
       <t-tabs v-model="dataDialog.tab" class="body">
-        <t-tab-panel :value="1" label="数据订阅" :destroy-on-hide="false">
+        <t-tab-panel :value="1" label="实时数据" :destroy-on-hide="false">
           <template #panel>
             <div v-if="!dataDialog.editNetwork">
               <div class="mt-16 flex between middle">
@@ -301,7 +301,7 @@
                 <div>
                   <t-select-input
                     v-model:inputValue="dataDialog.input"
-                    placeholder="搜索我的数据订阅"
+                    placeholder="搜索我的实时数据"
                     allow-input
                     clearable
                     :popup-visible="dataDialog.popupVisible"
@@ -357,7 +357,7 @@
                     style="height: 30px"
                     @click="addNetwork"
                   >
-                    添加数据订阅
+                    添加实时数据
                   </t-button>
                 </div>
               </div>
@@ -380,7 +380,7 @@
                   <div class="center">
                     <div>暂无数据</div>
                     <div class="mt-8">
-                      <a @click="addNetwork"> + 添加数据订阅</a>
+                      <a @click="addNetwork"> + 添加实时数据</a>
                     </div>
                   </div>
                 </template>
@@ -497,15 +497,15 @@
           class="flex middle"
         >
           <div class="flex-grow"></div>
-          <t-checkbox v-model="dataDialog.save">
-            同时保存到我的数据订阅
+          <t-checkbox v-model="dataDialog.save" class="mr-12">
+            同时保存到我的实时数据
           </t-checkbox>
           <t-button @click="onOkNetwork">确定</t-button>
         </div>
         <div v-else-if="dataDialog.tab === 2" class="flex middle">
           <template v-if="dataDialog.editDataset === 1">
             <div class="flex-grow"></div>
-            <t-checkbox v-model="dataDialog.save">
+            <t-checkbox v-model="dataDialog.save" class="mr-12">
               同时保存为我的数据集
             </t-checkbox>
             <t-button @click="onOkDataset()">保存</t-button>
@@ -526,7 +526,7 @@
         </div>
         <div v-else class="flex middle">
           <div class="flex-grow"></div>
-          <t-button @click="dataDialog.show = false"> 完成 </t-button>
+          <t-button @click="onFinishDataDialog"> 完成 </t-button>
         </div>
       </template>
     </t-dialog>
@@ -539,6 +539,7 @@
       :cancel-btn="null"
       :confirm-btn="'完成'"
       @close="publishDialog.show = false"
+      @confirm="publishDialog.show = false"
     >
       <div class="body" style="height: 350px">
         <div class="form-item mt-8">
@@ -830,7 +831,7 @@ const open = async (flag: boolean = false) => {
       meta2d.open(JSON.parse(data));
     }
   } else if (!sessionStorage.getItem('opening')) {
-    meta2d.open({ name: '新建项目', pens: [] } as any);
+    meta2d.open({ name: '新建项目', pens: [], enableMock: true } as any);
   }
   sessionStorage.removeItem('opening');
   !meta2d.store.data.x && (meta2d.store.data.x = meta2d.store.options.x || 0);
@@ -1195,6 +1196,11 @@ const onShowDataDialog = async () => {
   onSelDataset(true);
 };
 
+const onFinishDataDialog = () => {
+  dataDialog.show = false;
+  meta2d.connectNetwork();
+};
+
 const onChangeMock = () => {
   // @ts-ignore
   meta2d.store.data.enableMock = dataDialog.enableMock;
@@ -1227,7 +1233,7 @@ const onInputNetwork = () => {
   debounce(getNetworks, 300);
 };
 
-// 请求我的数据订阅
+// 请求我的实时数据
 const getNetworks = async () => {
   const ret: any = await axios.post(
     `/api/data/datasources/list`,
@@ -1357,6 +1363,11 @@ const onOkNetwork = async () => {
 };
 
 const datasetColumns = ref([
+  {
+    colKey: 'device',
+    title: '设备',
+    ellipsis: true,
+  },
   {
     colKey: 'label',
     title: '数据点名称',
@@ -1372,6 +1383,11 @@ const datasetColumns = ref([
     title: '类型',
     ellipsis: true,
   },
+  {
+    colKey: 'mock',
+    title: '值范围',
+    ellipsis: true,
+  },
 ]);
 
 const addDataset = () => {
@@ -1409,8 +1425,8 @@ const onOkDataset = async (saveas = false) => {
     }
     ret.id = ret.id || ret._id;
     dataDialog.datasetId = ret.id;
-    dataDialog.dataset._id = dataDialog.dataset.id = ret.id;
-    dataDialog.datasetList.push(dataDialog.dataset);
+    dataset._id = dataset.id = ret.id;
+    dataDialog.datasetList.push(dataset);
   } else {
     const ret: any = await axios.post(`/api/data/datasources/update`, dataset);
     if (!ret) {

+ 4 - 0
src/views/components/common/CodeEditor.vue

@@ -112,6 +112,10 @@ onMounted(() => {
       emit('change', currenValue);
     }
   });
+
+  setTimeout(() => {
+    editor.getAction('editor.action.formatDocument').run();
+  }, 300);
 });
 
 watch(

+ 11 - 1
vite.config.ts

@@ -4,11 +4,21 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
 import * as path from 'path';
 import * as fs from 'fs';
 import formidable from 'formidable';
+import monacoEditorPlugin from 'vite-plugin-monaco-editor';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   // assetsInclude: ['**/*.glb'],
-  plugins: [vue(), vueJsx(), fileList()],
+  plugins: [
+    vue(),
+    vueJsx(),
+    fileList(),
+    monacoEditorPlugin({
+      customDistPath: () => {
+        return 'v/monacoeditorwork';
+      },
+    }),
+  ],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src/'),

Some files were not shown because too many files changed in this diff