echarts

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,29 +58,57 @@ export const charts = [
                 },
               ],
             },
-            max: 100,
+            max: 30,
           },
           realTimes: [
             {
               key: 'echarts.option.series.0.data.0',
-              label: '一月',
+              label: '1月',
               type: 'float',
               enableMock: true,
-              mock: '0-100',
+              mock: '10-40',
             },
             {
               key: 'echarts.option.series.0.data.1',
-              label: '二月',
+              label: '2月',
               type: 'float',
               enableMock: true,
-              mock: '0-100',
+              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',
+                label: 'echarts配置',
                 type: 'code',
               },
             ],
@@ -100,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: [
                 {
@@ -126,39 +152,99 @@ export const charts = [
                 },
               ],
             },
-            max: 100,
+            max: 30,
           },
           realTimes: [
             {
               key: 'echarts.option.series.0.data.0',
-              label: '折线一1月',
+              label: '折线一的1月',
               type: 'float',
               enableMock: true,
-              mock: '0-100',
+              mock: '20-100',
             },
             {
               key: 'echarts.option.series.1.data.0',
-              label: '折线二1月',
+              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',
-            //   label: 'echarts',
-            //   type: 'object',
-            // },
-            // {
-            //   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',
+                label: 'echarts配置',
                 type: 'code',
               },
             ],
@@ -166,7 +252,7 @@ export const charts = [
         },
       },
       {
-        name: '动态趋势折线图',
+        name: '折线趋势图',
         icon: 'l-line-chart',
         data: {
           name: 'echarts',
@@ -177,11 +263,13 @@ 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: [],
@@ -197,51 +285,30 @@ export const charts = [
               ],
             },
             replaceMode: 0,
-            max: 100,
+            max: 30,
           },
           realTimes: [
-            // {
-            //   key: 'echarts.option',
-            //   label: 'echarts',
-            //   type: 'object',
-            // },
             {
               key: 'echarts.option.series.0.data',
-              label: '实时数据',
+              label: '数据点',
               type: 'float',
               enableMock: true,
               mock: '0-100',
             },
-            // {
-            //   key: 'echarts.max',
-            //   label: '最大数量',
-            //   type: 'number',
-            // },
-            // {
-            //   key: 'echarts.replaceMode',
-            //   label: '模式',
-            //   type: 'number',
-            // },
           ],
           props: {
             custom: [
               {
                 key: 'echarts',
-                label: 'echarts',
+                label: 'echarts配置',
                 type: 'code',
               },
             ],
           },
         },
       },
-    ],
-  },
-  {
-    name: '面积图',
-    show: true,
-    list: [
       {
-        name: '基础面积图',
+        name: '基础曲线图',
         icon: 'l-line-chart',
         data: {
           name: 'echarts',
@@ -249,16 +316,90 @@ export const charts = [
           height: 206,
           externElement: true,
           disableAnchor: true,
+          echarts: {
+            option: {
+              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',
+                  smooth: true,
+                  data: [40, 20, 90, 60, 70, 80],
+                },
+              ],
+            },
+            max: 30,
+          },
+          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: '柱状图',
-    show: true,
-    list: [
       {
-        name: '基础柱状图',
+        name: '多曲线图',
         icon: 'l-line-chart',
         data: {
           name: 'echarts',
@@ -269,61 +410,126 @@ 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: 'line',
+                  smooth: true,
+                  data: [25, 40, 20, 30, 25, 40],
                 },
               ],
             },
-            max: 100,
+            max: 30,
           },
           realTimes: [
             {
               key: 'echarts.option.series.0.data.0',
-              label: '一月',
+              label: '折线一的1月',
               type: 'float',
               enableMock: true,
-              mock: '0-100',
+              mock: '20-100',
             },
             {
-              key: 'echarts.option.series.0.data.0',
-              label: '二月',
+              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',
-            //   label: 'echarts',
-            //   type: 'object',
-            // },
-            // {
-            //   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',
+                label: 'echarts配置',
                 type: 'code',
               },
             ],
@@ -331,7 +537,7 @@ export const charts = [
         },
       },
       {
-        name: '双柱状图',
+        name: '曲线趋势图',
         icon: 'l-line-chart',
         data: {
           name: 'echarts',
@@ -342,77 +548,1310 @@ 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',
-                max: 100,
-                min: 0,
-                interval: 50,
               },
               series: [
                 {
-                  type: 'bar',
-                  data: [40, 20, 90, 60, 70, 80],
-                },
-                {
-                  type: 'bar',
-                  data: [50, 70, 20, 30, 70, 40],
+                  type: 'line',
+                  smooth: true,
+                  data: [],
                 },
               ],
             },
-            max: 100,
+            replaceMode: 0,
+            max: 30,
           },
           realTimes: [
             {
-              key: 'echarts.option.series.0.data.0',
-              label: '柱状一1月',
-              type: 'float',
-              enableMock: true,
-              mock: '0-100',
-            },
-            {
-              key: 'echarts.option.series.1.data.0',
-              label: '柱状二1月',
+              key: 'echarts.option.series.0.data',
+              label: '数据点',
               type: 'float',
               enableMock: true,
               mock: '0-100',
             },
-            // {
-            //   key: 'echarts.option',
-            //   label: 'echarts',
-            //   type: 'object',
-            // },
-            // {
-            //   key: 'echarts.max',
-            //   label: '最大数量',
-            //   type: 'number',
-            // },
           ],
           props: {
             custom: [
               {
                 key: 'echarts',
-                label: '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,
+          echarts: {
+            option: {
+              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',
+                  step: 'start',
+                  data: [40, 20, 90, 60, 70, 80],
+                },
+              ],
+            },
+            max: 30,
+          },
+          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: '面积图',
+    show: true,
+    list: [
+      {
+        name: '基础面积图',
+        icon: 'l-line-chart',
+        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,
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              yAxis: {
+                type: 'value',
+              },
+              series: [
+                {
+                  type: 'line',
+                  data: [40, 20, 90, 60, 70, 80],
+                  areaStyle: {},
+                  smooth: true,
+                },
+              ],
+            },
+            max: 30,
+          },
+          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-line-chart',
+        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,
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              yAxis: {
+                type: 'value',
+              },
+              series: [
+                {
+                  type: 'line',
+                  areaStyle: {},
+                  smooth: true,
+                  data: [40, 35, 80, 40, 45, 25],
+                },
+                {
+                  type: 'line',
+                  areaStyle: {},
+                  smooth: true,
+                  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-bar-chart',
+        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,
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+              },
+              yAxis: {
+                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-bar-chart',
+        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-bar-chart',
+        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-bar-chart',
+        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-bar-chart',
+        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-bar-chart',
+        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-bar-chart',
+        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: '饼环图',

src/views/components/PenDatas.vue

@@ -950,7 +950,7 @@ onUnmounted(() => {
   height: 100%;
 
   .grid {
-    grid-template-columns: 60px 140px 54px 30px;
+    grid-template-columns: 80px 120px 54px 30px;
     padding: 0 12px;
 
     &.head {
@@ -973,7 +973,7 @@ onUnmounted(() => {
   }
 
   .label {
-    width: fit-content;
+    width: fix-content;
     font-size: 10px;
     line-height: 28px;
     color: var(--color-desc);

src/views/components/View.vue

@@ -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">