首頁 探索 說明
註冊 登入
wangcong
/
visualization-design
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

echarts

Alsmile 2 年之前
父節點
2af56200ec
當前提交
a7f81fba9a
共有 6 個文件被更改，包括 664 次插入 和 167 次删除
統一視圖 顯示文件統計
  1. 6 6
      index.html
  2. 1 0
      src/services/common.ts
  3. 602 143
      src/services/defaults.ts
  4. 29 14
      src/views/components/PenDatas.vue
  5. 4 0
      src/views/components/View.vue
  6. 22 4
      src/views/components/common/CodeEditor.vue

+ 6 - 6
index.html
查看文件 

@@ -23,7 +23,7 @@
 
         overflow: hidden;
 
         overflow: hidden;
 
       }
 
       }
 
     </style>
 
     </style>
 
-    <script src="//at.alicdn.com/t/c/font_4042197_tr04p9fflg.js"></script>
 
+    <script src="//at.alicdn.com/t/c/font_4042197_yrikqthz1j.js"></script>
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
     <div id="app"></div>
 
     <div id="app"></div>
 
@@ -33,10 +33,10 @@
 
         return this.replace(new RegExp(s1, 'gm'), s2);
 
         return this.replace(new RegExp(s1, 'gm'), s2);
 
       };
 
       };
 
     </script>
 
     </script>
 
-        <script defer src="/js/html2canvas.min.js"></script>
 
-        <script defer src="/js/flv.min.js"></script>
 
-        <script defer src="/js/marked.min.js"></script>
 
-        <script defer src="/js/echarts.min.js"></script>
 
-        <script defer src="/js/mycharts.js"></script>
 
+    <script defer src="/js/html2canvas.min.js"></script>
 
+    <script defer src="/js/flv.min.js"></script>
 
+    <script defer src="/js/marked.min.js"></script>
 
+    <script defer src="/js/echarts.min.js"></script>
 
+    <script defer src="/js/mycharts.js"></script>
 
   </body>
 
   </body>
 
 </html>
 
 </html>

+ 1 - 0
src/services/common.ts
查看文件 

@@ -120,6 +120,7 @@ export const save = async (
 
     // 另存为一定走 新增 ，由于后端 未控制 userId 等属性，清空一下
 
     // 另存为一定走 新增 ，由于后端 未控制 userId 等属性，清空一下
 
     const delAttrs = [
 
     const delAttrs = [
 
       'userId',
 
       'userId',
 
+      '_id',
 
       'id',
 
       'id',
 
       'shared',
 
       'shared',
 
       'star',
 
       'star',

+ 602 - 143
src/services/defaults.ts
查看文件 

@@ -394,30 +394,32 @@ export const shapes = [
 
           height: 100,
 
           height: 100,
 
           name: 'cube',
 
           name: 'cube',
 
           z: 0.25,
 
           z: 0.25,
 
-          props: [
 
-            {
 
-              key: 'z',
 
-              label: 'Z',
 
-              type: 'number',
 
-              min: 0,
 
-              placeholder: '<= 1 即宽度的比例',
 
-            },
 
-            {
 
-              key: 'backgroundFront',
 
-              label: '前背景色',
 
-              type: 'color',
 
-            },
 
-            {
 
-              key: 'backgroundUp',
 
-              label: '顶背景色',
 
-              type: 'color',
 
-            },
 
-            {
 
-              key: 'backgroundRight',
 
-              label: '右背景色',
 
-              type: 'color',
 
-            },
 
-          ],
 
+          props: {
 
+            custom: [
 
+              {
 
+                key: 'z',
 
+                label: 'Z',
 
+                type: 'number',
 
+                min: 0,
 
+                placeholder: '<= 1 即宽度的比例',
 
+              },
 
+              {
 
+                key: 'backgroundFront',
 
+                label: '前背景色',
 
+                type: 'color',
 
+              },
 
+              {
 
+                key: 'backgroundUp',
 
+                label: '顶背景色',
 
+                type: 'color',
 
+              },
 
+              {
 
+                key: 'backgroundRight',
 
+                label: '右背景色',
 
+                type: 'color',
 
+              },
 
+            ],
 
+          },
 
         },
 
         },
 
       },
 
       },
 
       {
 
       {
 
@@ -977,69 +979,59 @@ export const charts = [
 
           width: 400,
 
           width: 400,
 
           height: 300,
 
           height: 300,
 
           externElement: true,
 
           externElement: true,
 
-          form: [
 
-            {
 
-              key: 'dataY',
 
-              name: '数据',
 
-              type: 'text',
 
-              readonly: true,
 
-              placeholder: '仅绑定变量',
 
-              multiple: true,
 
-              isTime: false,
 
-              isYCategory: false,
 
-            },
 
-            {
 
-              key: 'echarts',
 
-              name: 'echarts',
 
-              type: 'code',
 
-              language: 'json',
 
-              isNotString: true,
 
-            },
 
-            {
 
-              key: 'echarts',
 
-              key2: 'max',
 
-              type: 'number',
 
-              name: '最大数量',
 
-              placeholder: 'x',
 
-            },
 
-          ] as FormItemType[],
 
           disableAnchor: true,
 
           disableAnchor: true,
 
           echarts: {
 
           echarts: {
 
             option: {
 
             option: {
 
+              tooltip: {
 
+                trigger: 'axis',
 
+              },
 
               grid: {
 
               grid: {
 
                 top: 10,
 
                 top: 10,
 
-                bottom: 50,
 
+                bottom: 20,
 
                 left: 40,
 
                 left: 40,
 
                 right: 5,
 
                 right: 5,
 
               },
 
               },
 
-              dataZoom: [
 
-                {
 
-                  height: 16,
 
-                  bottom: 10,
 
-                },
 
-              ],
 
               xAxis: {
 
               xAxis: {
 
                 type: 'category',
 
                 type: 'category',
 
                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
 
                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
 
                 axisLabel: {
 
                 axisLabel: {
 
                   fontSize: 12,
 
                   fontSize: 12,
 
+                  color: '#ffffff',
 
                 },
 
                 },
 
               },
 
               },
 
               yAxis: {
 
               yAxis: {
 
                 type: 'value',
 
                 type: 'value',
 
                 axisLabel: {
 
                 axisLabel: {
 
                   fontSize: 12,
 
                   fontSize: 12,
 
+                  color: '#ffffff',
 
                 },
 
                 },
 
               },
 
               },
 
               series: [
 
               series: [
 
                 {
 
                 {
 
-                  data: [820, 932, 901, 934, 1290, 1330, 1320],
 
                   type: 'line',
 
                   type: 'line',
 
+                  data: [820, 932, 901, 934, 1290, 1330, 1320],
 
                 },
 
                 },
 
               ],
 
               ],
 
             },
 
             },
 
             max: 100,
 
             max: 100,
 
           },
 
           },
 
+          realTimes: [
 
+            {
 
+              key: 'echarts.option.series.0.data',
 
+              label: '数据',
 
+              type: 'object',
 
+            },
 
+            {
 
+              key: 'echarts.option',
 
+              label: 'echarts',
 
+              type: 'object',
 
+            },
 
+            {
 
+              key: 'echarts.max',
 
+              label: '最大数量',
 
+              type: 'number',
 
+            },
 
+          ],
 
         },
 
         },
 
       },
 
       },
 
       {
 
       {
 
@@ -1051,46 +1043,16 @@ export const charts = [
 
           disableAnchor: true,
 
           disableAnchor: true,
 
           externElement: true,
 
           externElement: true,
 
           name: 'echarts',
 
           name: 'echarts',
 
-          form: [
 
-            {
 
-              key: 'dataY',
 
-              name: '数据',
 
-              type: 'text',
 
-              readonly: true,
 
-              placeholder: '仅绑定变量',
 
-              multiple: true,
 
-              isTime: false,
 
-              isYCategory: false,
 
-            },
 
-            {
 
-              key: 'echarts',
 
-              name: 'echarts',
 
-              type: 'code',
 
-              language: 'json',
 
-              isNotString: true,
 
-            },
 
-            {
 
-              key: 'echarts',
 
-              key2: 'max',
 
-              type: 'number',
 
-              name: '最大数量',
 
-              placeholder: 'x',
 
-            },
 
-          ] as FormItemType[],
 
           echarts: {
 
           echarts: {
 
             option: {
 
             option: {
 
               tooltip: {
 
               tooltip: {
 
                 trigger: 'axis',
 
                 trigger: 'axis',
 
-                axisPointer: {
 
-                  // 坐标轴指示器，坐标轴触发有效
 
-                  type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
 
-                },
 
               },
 
               },
 
               grid: {
 
               grid: {
 
-                left: '3%',
 
-                right: '4%',
 
-                bottom: '3%',
 
-                containLabel: true,
 
+                top: 10,
 
+                bottom: 20,
 
+                left: 40,
 
+                right: 5,
 
               },
 
               },
 
               xAxis: {
 
               xAxis: {
 
                 type: 'category',
 
                 type: 'category',
 
@@ -1098,101 +1060,598 @@ export const charts = [
 
                 axisTick: {
 
                 axisTick: {
 
                   alignWithLabel: true,
 
                   alignWithLabel: true,
 
                 },
 
                 },
 
+                axisLabel: {
 
+                  fontSize: 12,
 
+                  color: '#ffffff',
 
+                },
 
               },
 
               },
 
-              yAxis: [
 
-                {
 
-                  type: 'value',
 
+              yAxis: {
 
+                type: 'value',
 
+                axisLabel: {
 
+                  fontSize: 12,
 
+                  color: '#ffffff',
 
                 },
 
                 },
 
-              ],
 
+              },
 
               series: [
 
               series: [
 
                 {
 
                 {
 
                   name: '直接访问',
 
                   name: '直接访问',
 
                   type: 'bar',
 
                   type: 'bar',
 
                   barWidth: '60%',
 
                   barWidth: '60%',
 
+                  label: {
 
+                    color: '#ffffff',
 
+                  },
 
                   data: [10, 52, 200, 334, 390, 330, 220],
 
                   data: [10, 52, 200, 334, 390, 330, 220],
 
                 },
 
                 },
 
               ],
 
               ],
 
             },
 
             },
 
             max: 100,
 
             max: 100,
 
           },
 
           },
 
+          realTimes: [
 
+            {
 
+              key: 'echarts.option.series.0.data',
 
+              label: '数据',
 
+              type: 'object',
 
+            },
 
+            {
 
+              key: 'echarts.option',
 
+              label: 'echarts',
 
+              type: 'object',
 
+            },
 
+            {
 
+              key: 'echarts.max',
 
+              label: '最大数量',
 
+              type: 'number',
 
+            },
 
+          ],
 
         },
 
         },
 
       },
 
       },
 
       {
 
       {
 
         name: '饼图',
 
         name: '饼图',
 
         icon: 'l-pie-chart',
 
         icon: 'l-pie-chart',
 
         data: {
 
         data: {
 
-          width: 200,
 
+          width: 300,
 
           height: 200,
 
           height: 200,
 
           disableAnchor: true,
 
           disableAnchor: true,
 
           externElement: true,
 
           externElement: true,
 
           name: 'echarts',
 
           name: 'echarts',
 
-          form: [
 
+          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: 'dataY',
 
-              name: '数据',
 
-              type: 'text',
 
-              readonly: true,
 
-              placeholder: '仅绑定变量',
 
-              multiple: true,
 
+              key: 'echarts.option.series.0.data',
 
+              label: '数据',
 
+              type: 'object',
 
             },
 
             },
 
             {
 
             {
 
-              key: 'echarts',
 
-              name: 'echarts',
 
-              type: 'code',
 
-              language: 'json',
 
-              isNotString: true,
 
+              key: 'echarts.option',
 
+              label: 'echarts',
 
+              type: 'object',
 
+            },
 
+          ],
 
+        },
 
+      },
 
+      {
 
+        name: '散点图',
 
+        icon: 'l-sandiantu',
 
+        data: {
 
+          width: 300,
 
+          height: 200,
 
+          disableAnchor: true,
 
+          externElement: true,
 
+          name: 'echarts',
 
+          echarts: {
 
+            option: {
 
+              grid: {
 
+                top: 10,
 
+                bottom: 20,
 
+                left: 40,
 
+                right: 10,
 
+              },
 
+              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',
 
-              key2: 'max',
 
-              type: 'number',
 
-              name: '最大数量',
 
-              placeholder: 'x',
 
+              key: 'echarts.option.series.0.data',
 
+              label: '数据',
 
+              type: 'object',
 
             },
 
             },
 
-          ] as FormItemType[],
 
+            {
 
+              key: 'echarts.option',
 
+              label: 'echarts',
 
+              type: 'object',
 
+            },
 
+          ],
 
+        },
 
+      },
 
+      {
 
+        name: 'K线图',
 
+        icon: 'l-kxiantu',
 
+        data: {
 
+          width: 300,
 
+          height: 200,
 
+          disableAnchor: true,
 
+          externElement: true,
 
+          name: 'echarts',
 
           echarts: {
 
           echarts: {
 
             option: {
 
             option: {
 
-              tooltip: {
 
-                trigger: 'item',
 
-                formatter: '{a} <br/>{b}: {c} ({d}%)',
 
+              grid: {
 
+                top: 20,
 
+                bottom: 30,
 
+                left: 40,
 
+                right: 10,
 
+              },
 
+              xAxis: {
 
+                axisLabel: {
 
+                  fontSize: 12,
 
+                  color: '#ffffff',
 
+                },
 
+                data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],
 
+              },
 
+              yAxis: {
 
+                axisLabel: {
 
+                  fontSize: 12,
 
+                  color: '#ffffff',
 
+                },
 
               },
 
               },
 
-              legend: {},
 
               series: [
 
               series: [
 
                 {
 
                 {
 
-                  name: '访问来源',
 
-                  type: 'pie',
 
-                  radius: ['50%', '70%'],
 
-                  avoidLabelOverlap: false,
 
-                  label: {
 
-                    normal: {
 
-                      show: false,
 
-                      position: 'center',
 
+                  type: 'candlestick',
 
+                  data: [
 
+                    [20, 34, 10, 38],
 
+                    [40, 35, 30, 50],
 
+                    [31, 38, 33, 44],
 
+                    [38, 15, 5, 42],
 
+                  ],
 
+                },
 
+              ],
 
+            },
 
+            replaceMode: ReplaceMode.Replace,
 
+          },
 
+          realTimes: [
 
+            {
 
+              key: 'echarts.option.series.0.data',
 
+              label: '数据',
 
+              type: 'object',
 
+            },
 
+            {
 
+              key: 'echarts.option',
 
+              label: 'echarts',
 
+              type: 'object',
 
+            },
 
+          ],
 
+        },
 
+      },
 
+      {
 
+        name: '雷达图',
 
+        icon: 'l-leidatu',
 
+        data: {
 
+          width: 300,
 
+          height: 200,
 
+          disableAnchor: true,
 
+          externElement: true,
 
+          name: 'echarts',
 
+          echarts: {
 
+            option: {
 
+              grid: {
 
+                top: 20,
 
+                bottom: 30,
 
+                left: 40,
 
+                right: 10,
 
+              },
 
+              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 },
 
+                ],
 
+              },
 
+              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',
 
+                    },
 
+                  ],
 
+                },
 
+              ],
 
+            },
 
+            replaceMode: ReplaceMode.Replace,
 
+          },
 
+          realTimes: [
 
+            {
 
+              key: 'echarts.option.series.0.data',
 
+              label: '数据',
 
+              type: 'object',
 
+            },
 
+            {
 
+              key: 'echarts.option',
 
+              label: 'echarts',
 
+              type: 'object',
 
+            },
 
+          ],
 
+        },
 
+      },
 
+      {
 
+        name: '旭日图',
 
+        icon: 'l-xuritu',
 
+        data: {
 
+          width: 200,
 
+          height: 200,
 
+          disableAnchor: true,
 
+          externElement: true,
 
+          name: 'echarts',
 
+          echarts: {
 
+            option: {
 
+              series: [
 
+                {
 
+                  radius: ['15%', '80%'],
 
+                  type: 'sunburst',
 
+                  data: [
 
+                    {
 
+                      children: [
 
+                        {
 
+                          value: 5,
 
+                          children: [
 
+                            {
 
+                              value: 1,
 
+                              itemStyle: {
 
+                                color: '#F54F4A',
 
+                              },
 
+                            },
 
+                            {
 
+                              value: 2,
 
+                              children: [
 
+                                {
 
+                                  value: 1,
 
+                                  itemStyle: {
 
+                                    color: '#FF8C75',
 
+                                  },
 
+                                },
 
+                              ],
 
+                            },
 
+                            {
 
+                              children: [
 
+                                {
 
+                                  value: 1,
 
+                                },
 
+                              ],
 
+                            },
 
+                          ],
 
+                          itemStyle: {
 
+                            color: '#F54F4A',
 
+                          },
 
+                        },
 
+                        {
 
+                          value: 10,
 
+                          children: [
 
+                            {
 
+                              value: 6,
 
+                              children: [
 
+                                {
 
+                                  value: 1,
 
+                                  itemStyle: {
 
+                                    color: '#F54F4A',
 
+                                  },
 
+                                },
 
+                                {
 
+                                  value: 1,
 
+                                },
 
+                                {
 
+                                  value: 1,
 
+                                  itemStyle: {
 
+                                    color: '#FF8C75',
 
+                                  },
 
+                                },
 
+                                {
 
+                                  value: 1,
 
+                                },
 
+                              ],
 
+                              itemStyle: {
 
+                                color: '#FFB499',
 
+                              },
 
+                            },
 
+                            {
 
+                              value: 2,
 
+                              children: [
 
+                                {
 
+                                  value: 1,
 
+                                },
 
+                              ],
 
+                              itemStyle: {
 
+                                color: '#FFB499',
 
+                              },
 
+                            },
 
+                            {
 
+                              children: [
 
+                                {
 
+                                  value: 1,
 
+                                  itemStyle: {
 
+                                    color: '#FF8C75',
 
+                                  },
 
+                                },
 
+                              ],
 
+                            },
 
+                          ],
 
+                          itemStyle: {
 
+                            color: '#F54F4A',
 
+                          },
 
+                        },
 
+                      ],
 
+                      itemStyle: {
 
+                        color: '#F54F4A',
 
+                      },
 
                     },
 
                     },
 
-                    emphasis: {
 
-                      show: true,
 
-                      textStyle: {
 
-                        fontSize: '30',
 
-                        fontWeight: 'bold',
 
+                    {
 
+                      value: 9,
 
+                      children: [
 
+                        {
 
+                          value: 4,
 
+                          children: [
 
+                            {
 
+                              value: 2,
 
+                              itemStyle: {
 
+                                color: '#FF8C75',
 
+                              },
 
+                            },
 
+                            {
 
+                              children: [
 
+                                {
 
+                                  value: 1,
 
+                                  itemStyle: {
 
+                                    color: '#F54F4A',
 
+                                  },
 
+                                },
 
+                              ],
 
+                            },
 
+                          ],
 
+                          itemStyle: {
 
+                            color: '#F54F4A',
 
+                          },
 
+                        },
 
+                        {
 
+                          children: [
 
+                            {
 
+                              value: 3,
 
+                              children: [
 
+                                {
 
+                                  value: 1,
 
+                                },
 
+                                {
 
+                                  value: 1,
 
+                                  itemStyle: {
 
+                                    color: '#FF8C75',
 
+                                  },
 
+                                },
 
+                              ],
 
+                            },
 
+                          ],
 
+                          itemStyle: {
 
+                            color: '#FFB499',
 
+                          },
 
+                        },
 
+                      ],
 
+                      itemStyle: {
 
+                        color: '#FF8C75',
 
                       },
 
                       },
 
                     },
 
                     },
 
-                  },
 
-                  labelLine: {
 
-                    normal: {
 
-                      show: false,
 
+                    {
 
+                      value: 7,
 
+                      children: [
 
+                        {
 
+                          children: [
 
+                            {
 
+                              value: 1,
 
+                              itemStyle: {
 
+                                color: '#FFB499',
 
+                              },
 
+                            },
 
+                            {
 
+                              value: 3,
 
+                              children: [
 
+                                {
 
+                                  value: 1,
 
+                                  itemStyle: {
 
+                                    color: '#FF8C75',
 
+                                  },
 
+                                },
 
+                                {
 
+                                  value: 1,
 
+                                },
 
+                              ],
 
+                              itemStyle: {
 
+                                color: '#FF8C75',
 
+                              },
 
+                            },
 
+                            {
 
+                              value: 2,
 
+                              children: [
 
+                                {
 
+                                  value: 1,
 
+                                },
 
+                                {
 
+                                  value: 1,
 
+                                  itemStyle: {
 
+                                    color: '#F54F4A',
 
+                                  },
 
+                                },
 
+                              ],
 
+                              itemStyle: {
 
+                                color: '#F54F4A',
 
+                              },
 
+                            },
 
+                          ],
 
+                          itemStyle: {
 
+                            color: '#FFB499',
 
+                          },
 
+                        },
 
+                      ],
 
+                      itemStyle: {
 
+                        color: '#F54F4A',
 
+                      },
 
+                    },
 
+                    {
 
+                      children: [
 
+                        {
 
+                          value: 6,
 
+                          children: [
 
+                            {
 
+                              value: 1,
 
+                              itemStyle: {
 
+                                color: '#FF8C75',
 
+                              },
 
+                            },
 
+                            {
 
+                              value: 2,
 
+                              children: [
 
+                                {
 
+                                  value: 2,
 
+                                  itemStyle: {
 
+                                    color: '#FF8C75',
 
+                                  },
 
+                                },
 
+                              ],
 
+                              itemStyle: {
 
+                                color: '#F54F4A',
 
+                              },
 
+                            },
 
+                            {
 
+                              value: 1,
 
+                              itemStyle: {
 
+                                color: '#FFB499',
 
+                              },
 
+                            },
 
+                          ],
 
+                          itemStyle: {
 
+                            color: '#FFB499',
 
+                          },
 
+                        },
 
+                        {
 
+                          value: 3,
 
+                          children: [
 
+                            {
 
+                              value: 1,
 
+                            },
 
+                            {
 
+                              children: [
 
+                                {
 
+                                  value: 1,
 
+                                  itemStyle: {
 
+                                    color: '#FF8C75',
 
+                                  },
 
+                                },
 
+                              ],
 
+                            },
 
+                            {
 
+                              value: 1,
 
+                            },
 
+                          ],
 
+                          itemStyle: {
 
+                            color: '#FFB499',
 
+                          },
 
+                        },
 
+                      ],
 
+                      itemStyle: {
 
+                        color: '#F54F4A',
 
+                      },
 
                     },
 
                     },
 
-                  },
 
-                  data: [
 
-                    { value: 335, name: '直接访问' },
 
-                    { value: 310, name: '邮件营销' },
 
-                    { value: 234, name: '联盟广告' },
 
-                    { value: 135, name: '视频广告' },
 
-                    { value: 1548, name: '搜索引擎' },
 
                   ],
 
                   ],
 
+                  label: {
 
+                    rotate: 'radial',
 
+                    color: '#ffffff',
 
+                  },
 
                 },
 
                 },
 
               ],
 
               ],
 
             },
 
             },
 
             replaceMode: ReplaceMode.Replace,
 
             replaceMode: ReplaceMode.Replace,
 
           },
 
           },
 
+          realTimes: [
 
+            {
 
+              key: 'echarts.option.series.0.data',
 
+              label: '数据',
 
+              type: 'object',
 
+            },
 
+            {
 
+              key: 'echarts.option',
 
+              label: 'echarts',
 
+              type: 'object',
 
+            },
 
+          ],
 
         },
 
         },
 
       },
 
       },
 
       {
 
       {

+ 29 - 14
src/views/components/PenDatas.vue
查看文件 

@@ -35,6 +35,13 @@
 
             size="small"

             size="small"

             @change="changeValue(item.key)"

             @change="changeValue(item.key)"

           />

           />

+          <div

+            v-else-if="item.type === 'array' || item.type === 'object'"

+            class="gray ellipsis"

+            style="height: 30px"

+          >

+            {{ JSON.stringify(pen[item.key]) }}

+          </div>

           <t-input

           <t-input

             v-else

             v-else

             v-model="pen[item.key]"

             v-model="pen[item.key]"

@@ -139,13 +146,9 @@
 
         />

         />

         <div class="desc mt-8">

         <div class="desc mt-8">

           固定数字：直接输入数字。例如：5<br />

           固定数字：直接输入数字。例如：5<br />

-          随机范围数字

-          <label class="vip-label" title="会员权限">VIP</label

-          >：最小值-最大值。例如：0-1 或 0-100

+          随机范围数字 ：最小值-最大值。例如：0-1 或 0-100

           <br />

           <br />

-          随机指定数字

-          <label class="vip-label" title="会员权限">VIP</label

-          >：数字1,数字2,数字3... 。 例如：1,5,10,20<br />

+          随机指定数字 ：数字1,数字2,数字3... 。 例如：1,5,10,20<br />

         </div>

         </div>

       </div>

       </div>

       <div class="flex-grow" v-else-if="addDataDialog.data.type === 'bool'">

       <div class="flex-grow" v-else-if="addDataDialog.data.type === 'bool'">

@@ -156,12 +159,18 @@
 
         </t-select>

         </t-select>

         <div class="desc mt-8">

         <div class="desc mt-8">

           固定：指定true或false<br />

           固定：指定true或false<br />

-          随机

-          <label class="vip-label" title="会员权限">VIP</label

-          >：随机生成一个布尔值<br />

+          随机：随机生成一个布尔值<br />

         </div>

         </div>

       </div>

       </div>

-

+      <div

+        class="flex-grow"

+        v-else-if="

+          addDataDialog.data.type === 'array' ||

+          addDataDialog.data.type === 'object'

+        "

+      >

+        <CodeEditor v-model="addDataDialog.data.value" :json="true" />

+      </div>

       <div class="flex-grow" v-else>

       <div class="flex-grow" v-else>

         <t-input

         <t-input

           class="w-full"

           class="w-full"

@@ -170,10 +179,8 @@
 
         />

         />

         <div class="desc mt-8">

         <div class="desc mt-8">

           固定文字：直接输入。例如：大屏可视化<br />

           固定文字：直接输入。例如：大屏可视化<br />

-          随机文本<label class="vip-label" title="会员权限">VIP</label

-          >：[文本长度]。例如：[8] 或 [16]<br />

-          随机指定文本<label class="vip-label" title="会员权限">VIP</label

-          >：{文本1,文本2,文本3...} 。 例如：{大屏, 可视化}

+          随机文本：[文本长度]。例如：[8] 或 [16]<br />

+          随机指定文本：{文本1,文本2,文本3...} 。 例如：{大屏, 可视化}

           <br />

           <br />

         </div>

         </div>

       </div>

       </div>

@@ -510,6 +517,14 @@ const typeOptions = [
 
     label: '布尔',

     label: '布尔',

     value: 'bool',

     value: 'bool',

   },

   },

+  {

+    label: '对象',

+    value: 'object',

+  },

+  {

+    label: '数组',

+    value: 'array',

+  },

 ];

 ];

 

 

 const addDataDialog = reactive<any>({

 const addDataDialog = reactive<any>({

+ 4 - 0
src/views/components/View.vue
查看文件 

@@ -705,6 +705,10 @@ onMounted(() => {
 
   meta2d.on('click', canvasClick);

   meta2d.on('click', canvasClick);

 

 

   timer = setInterval(autoSave, 60000);

   timer = setInterval(autoSave, 60000);

+

+  window.onbeforeunload = () => {

+    autoSave();

+  };

 });

 });

 

 

 const watcher = watch(

 const watcher = watch(

+ 22 - 4
src/views/components/common/CodeEditor.vue
查看文件 

@@ -58,8 +58,9 @@ import 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution';
 
 

 

 const dom = ref<any>();

 const dom = ref<any>();

 

 

-const { modelValue, language, options } = defineProps<{

+const { modelValue, json, language, options } = defineProps<{

   modelValue: any;

   modelValue: any;

+  json?: boolean;

   language?: string;

   language?: string;

   options?: any;

   options?: any;

 }>();

 }>();

@@ -81,8 +82,16 @@ self.MonacoEnvironment = {
 
 let editor: monaco.editor.IStandaloneCodeEditor;

 let editor: monaco.editor.IStandaloneCodeEditor;

 

 

 onMounted(() => {

 onMounted(() => {

+  let text = '';

+  if (json) {

+    if (modelValue) {

+      text = JSON.stringify(modelValue);

+    }

+  } else {

+    text = modelValue;

+  }

   editor = monaco.editor.create(dom.value, {

   editor = monaco.editor.create(dom.value, {

-    value: modelValue,

+    value: text,

     automaticLayout: true,

     automaticLayout: true,

     minimap: { enabled: false },

     minimap: { enabled: false },

     language: language || 'javascript',

     language: language || 'javascript',

@@ -91,8 +100,17 @@ onMounted(() => {
 
   });

   });

   editor.onDidChangeModelContent(() => {

   editor.onDidChangeModelContent(() => {

     const currenValue = editor.getValue();

     const currenValue = editor.getValue();

-    emit('update:modelValue', currenValue);

-    emit('change', currenValue);

+    if (json) {

+      let obj: any;

+      try {

+        obj = JSON.parse(currenValue);

+      } catch {}

+      emit('update:modelValue', obj);

+      emit('change', obj);

+    } else {

+      emit('update:modelValue', currenValue);

+      emit('change', currenValue);

+    }

   });

   });

 });

 });