echarts

src/services/defaults.ts

@@ -968,7 +968,7 @@ export const shapes = [
 
 export const charts = [
   {
-    name: 'Echarts图表',
+    name: 'Echarts - 基础图表',
     show: true,
     list: [
       {
@@ -1655,38 +1655,203 @@ export const charts = [
         },
       },
       {
-        name: '仪表盘',
-        icon: 'l-dashboard-chart',
+        name: '桑基图',
+        icon: 'l-sangshentu',
         data: {
           width: 300,
-          height: 300,
+          height: 200,
           disableAnchor: true,
           externElement: true,
           name: 'echarts',
-          form: [
+          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,
+                },
+                label: {
+                  color: '#ffffff',
+                  fontSize: 10,
+                },
+              },
+            },
+            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-loudoutu',
+        data: {
+          width: 200,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
+          echarts: {
+            option: {
+              tooltip: {
+                trigger: 'item',
+                formatter: '{a} <br/>{b} : {c}%',
+              },
+              series: [
+                {
+                  name: 'Expected',
+                  type: 'funnel',
+                  left: '2%',
+                  width: '80%',
+                  label: {
+                    color: '#ffffff',
+                    formatter: '{b}Expected',
+                  },
+                  labelLine: {
+                    show: false,
+                  },
+                  itemStyle: {
+                    opacity: 0.7,
+                  },
+                  emphasis: {
+                    label: {
+                      position: 'inside',
+                      formatter: '{b}Expected: {c}%',
+                    },
+                  },
+                  data: [
+                    { value: 60, name: 'Visit' },
+                    { value: 40, name: 'Inquiry' },
+                    { value: 20, name: 'Order' },
+                    { value: 80, name: 'Click' },
+                    { value: 100, name: 'Show' },
+                  ],
+                },
+                {
+                  name: 'Actual',
+                  type: 'funnel',
+                  left: '2%',
+                  width: '80%',
+                  maxSize: '80%',
+                  label: {
+                    position: 'inside',
+                    formatter: '{c}%',
+                    color: '#fff',
+                  },
+                  itemStyle: {
+                    opacity: 0.5,
+                    borderColor: '#fff',
+                    borderWidth: 2,
+                  },
+                  emphasis: {
+                    label: {
+                      position: 'inside',
+                      formatter: '{b}Actual: {c}%',
+                    },
+                  },
+                  data: [
+                    { value: 30, name: 'Visit' },
+                    { value: 10, name: 'Inquiry' },
+                    { value: 5, name: 'Order' },
+                    { value: 50, name: 'Click' },
+                    { value: 80, name: 'Show' },
+                  ],
+                  z: 100,
+                },
+              ],
             },
+            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: '仪表盘',
+        icon: 'l-dashboard-chart',
+        data: {
+          width: 200,
+          height: 200,
+          disableAnchor: true,
+          externElement: true,
+          name: 'echarts',
           echarts: {
             option: {
               tooltip: {
@@ -1694,15 +1859,32 @@ export const charts = [
               },
               series: [
                 {
-                  name: '业务指标',
                   type: 'gauge',
-                  detail: { formatter: '{value}%' },
-                  data: [{ value: 50, name: '完成率' }],
+                  axisLine: {
+                    roundCap: true,
+                  },
+                  progress: {
+                    show: true,
+                    roundCap: true,
+                  },
+                  data: [{ value: 70 }],
                 },
               ],
             },
             replaceMode: ReplaceMode.Replace,
           },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data',
+              label: '数据',
+              type: 'object',
+            },
+            {
+              key: 'echarts.option',
+              label: 'echarts',
+              type: 'object',
+            },
+          ],
         },
       },
     ],