feat: 增加水球图

基于ecahrts-liquidfill，增加对水球图的封装
ElemeFE · Oct 2, 2018 · 391d62d · 391d62d
1 parent 489f72f
commit 391d62d
Show file tree

Hide file tree

Showing 9 changed files with 3,705 additions and 3,404 deletions.
diff --git a/examples/data/index.js b/examples/data/index.js
@@ -14,6 +14,7 @@ import scatter from './scatter'
 import candle from './candle'
 import gauge from './gauge'
 import tree from './tree'
+import liquidfill from './liquidfill'
 
 export default {
   bar,
@@ -31,5 +32,6 @@ export default {
   scatter,
   candle,
   gauge,
-  tree
+  tree,
+  liquidfill
 }
diff --git a/examples/data/liquidfill.js b/examples/data/liquidfill.js
@@ -0,0 +1,148 @@
+export default {
+  name: '水球图',
+  type: 'liquidfill',
+  data: [
+    {
+      name: '简单水球图',
+      data: {
+        columns: ['city', 'percent'],
+        rows: [{
+          city: '上海',
+          percent: 0.6
+        }]
+      },
+      settings: {}
+    },
+    {
+      name: '分层水球图',
+      data: {
+        columns: ['city', 'percent'],
+        rows: [{
+          city: '上海',
+          percent: 0.7
+        }]
+      },
+      settings: {
+        seriesMap: {
+          '上海': {
+            wave: [0.5, 0.3, 0.1],
+            color: ['red', 'green', 'yellow']
+          }
+        }
+      }
+    },
+    {
+      name: '多个水球图(默认横向排列)',
+      data: {
+        columns: ['city', 'percent'],
+        rows: [{
+          city: '上海',
+          percent: 0.6
+        }, {
+          city: '广州',
+          percent: 0.4
+        }, {
+          city: '成都',
+          percent: 0.7
+        }]
+      },
+      settings: {
+        seriesMap: {
+          '上海': {
+            wave: [0.5, 0.3, 0.1],
+            color: ['red', 'green', 'yellow'],
+            label: {
+              formatter (options) {
+                return options.seriesName + ': ' + options.value
+              },
+              fontSize: 30
+            }
+          }
+        }
+      }
+    },
+    {
+      name: '多个水球图(纵向排列)',
+      data: {
+        columns: ['city', 'percent'],
+        rows: [{
+          city: '上海',
+          percent: 0.6
+        }, {
+          city: '广州',
+          percent: 0.4
+        }]
+      },
+      settings: {
+        direction: 'column',
+        seriesMap: {
+          '上海': {
+            wave: [0.5, 0.3, 0.1],
+            color: ['red', 'green', 'yellow'],
+            radius: '40%'
+          },
+          '广州': {
+            radius: '40%'
+          }
+        }
+      }
+    },
+    {
+      name: '水球图的形状',
+      data: {
+        columns: ['city', 'percent'],
+        rows: [{
+          city: '上海',
+          percent: 0.6
+        }]
+      },
+      settings: {
+        seriesMap: {
+          '上海': {
+            shape: 'rect'
+          }
+        }
+      }
+    },
+    {
+      name: '水球图文字标签及样式设置',
+      data: {
+        columns: ['city', 'percent'],
+        rows: [{
+          city: '上海',
+          percent: 0.6
+        }]
+      },
+      settings: {
+        seriesMap: {
+          '上海': {
+            color: ['red'],
+            itemStyle: {
+              opacity: 0.2
+            },
+            emphasis: {
+              itemStyle: {
+                opacity: 0.8
+              }
+            },
+            backgroundStyle: {
+              color: 'yellow'
+            },
+            label: {
+              formatter (options) {
+                const {
+                  seriesName,
+                  value
+                } = options
+                return `${seriesName}\n${value * 100}%`
+              },
+              fontSize: 40,
+              color: 'green',
+              insideColor: 'red'
+            }
+          }
+        }
+      }
+    }
+  ]
+}
diff --git a/examples/pages/chart.vue b/examples/pages/chart.vue
@@ -40,6 +40,7 @@ import VeScatter from '../../src/packages/scatter'
 import VeCandle from '../../src/packages/candle'
 import VeGauge from '../../src/packages/gauge'
 import VeTree from '../../src/packages/tree'
+import VeLiquidfill from '../../src/packages/liquidfill'
 import CHART_DATA from '../data'
 
 export default {
@@ -85,7 +86,8 @@ export default {
     VeScatter,
     VeCandle,
     VeGauge,
-    VeTree
+    VeTree,
+    VeLiquidfill
   }
 }
 </script>