Merge pull request #149 from vueblocks/develop

feat: 新增公共系列配置项'seriesOption'
vueblocks · Apr 21, 2021 · 1a06581 · 1a06581
2 parents 7f167b4 + f2b9bea
commit 1a06581
Show file tree

Hide file tree

Showing 16 changed files with 257 additions and 222 deletions.
diff --git a/app/data/donut.js b/app/data/donut.js
@@ -3,10 +3,11 @@ const baseData = {
     name: '渠道',
     data: ['APP', 'PC', 'M端', '微信', '手Q', '小程序']
   },
-  measures: [{
-    name: 'PV',
-    data: [40000, 27800, 22000, 20200, 15600, 13600]
-  }]
+  measures: [
+    {
+      name: 'PV',
+      data: [40000, 27800, 22000, 20200, 15600, 13600]
+    }]
 }
 
 export default {
@@ -37,10 +38,8 @@ export default {
       data: baseData,
       settings: {
         label: {
-          normal: {
-            show: false,
-            position: 'center'
-          },
+          show: false,
+          position: 'center',
           emphasis: {
             show: true,
             textStyle: {
@@ -49,11 +48,6 @@ export default {
             }
           }
         },
-        labelLine: {
-          normal: {
-            show: false
-          }
-        },
         avoidLabelOverlap: false
       }
     }

diff --git a/app/data/funnel.js b/app/data/funnel.js
@@ -5,41 +5,44 @@ const baseData = {
     name: '渠道',
     data: ['APP', 'PC', 'M端', '微信', '手Q', '小程序']
   },
-  measures: [{
-    name: 'PV',
-    data: [36000, 30000, 24000, 18000, 12000, 6000]
-  }]
+  measures: [
+    {
+      name: 'PV',
+      data: [36000, 30000, 24000, 18000, 12000, 6000]
+    }]
 }
 
 const compareData = {
   dimensions: {
     name: '渠道',
     data: ['APP', 'PC', 'M端', '微信', '手Q', '小程序']
   },
-  measures: [{
-    name: 'PV',
-    data: [100, 80, 60, 50, 40, 20]
-  }, {
-    name: 'UV',
-    data: [80, 75, 50, 40, 32, 10]
-  }]
+  measures: [
+    {
+      name: 'PV',
+      data: [100, 80, 60, 50, 40, 20]
+    }, {
+      name: 'UV',
+      data: [80, 75, 50, 40, 32, 10]
+    }]
 }
 
 const sameData = {
   dimensions: {
     name: '渠道',
     data: ['APP', 'PC', 'M端', '微信', '手Q', '小程序']
   },
-  measures: [{
-    name: 'PV',
-    data: [36000, 28000, 24000, 20000, 12000, 6000]
-  }, {
-    name: 'PV',
-    data: [36000, 28000, 24000, 20000, 12000, 6000]
-  }, {
-    name: 'PV',
-    data: [36000, 28000, 24000, 20000, 12000, 6000]
-  }]
+  measures: [
+    {
+      name: 'PV',
+      data: [36000, 28000, 24000, 20000, 12000, 6000]
+    }, {
+      name: 'PV',
+      data: [36000, 28000, 24000, 20000, 12000, 6000]
+    }, {
+      name: 'PV',
+      data: [36000, 28000, 24000, 20000, 12000, 6000]
+    }]
 }
 
 export default {
@@ -77,6 +80,11 @@ export default {
       data: compareData,
       settings: {
         contrast: true
+      },
+      seriesOption: {
+        'PV': {
+          label: { show: false }
+        }
       }
     },
     {
@@ -85,27 +93,21 @@ export default {
       settings: {
         funnelLabel: [
           {
-            normal: {
-              position: 'right'
-            }
+            position: 'right'
           },
           {
-            normal: {
-              position: 'left',
-              formatter: function (params) {
-                const [, value] = params.value
-                return value
-              }
+            position: 'left',
+            formatter: function (params) {
+              const [, value] = params.value
+              return value
             }
           },
           {
-            normal: {
-              position: 'inside',
-              formatter: function (params) {
-                const [, value] = params.value
-                const maxMea = max([36000, 28000, 24000, 20000, 12000, 6000])
-                return `转化率 ${Math.round(value / maxMea * 100)} %`
-              }
+            position: 'inside',
+            formatter: function (params) {
+              const [, value] = params.value
+              const maxMea = max([36000, 28000, 24000, 20000, 12000, 6000])
+              return `转化率 ${Math.round(value / maxMea * 100)} %`
             }
           }
         ]
@@ -129,8 +131,7 @@ export default {
     {
       title: '多个漏斗图',
       data: compareData,
-      settings: {
-      },
+      settings: {},
       xprops: {
         series: [
           {
@@ -139,9 +140,7 @@ export default {
             left: '10%',
             top: '15%',
             label: {
-              normal: {
-                position: 'left'
-              }
+              position: 'left'
             }
           },
           {

diff --git a/app/data/geo.js b/app/data/geo.js
@@ -116,23 +116,19 @@ export default {
         },
         labelVisible: false,
         label: {
-          normal: {
-            show: false,
-            color: '#fff'
-          },
+          show: false,
+          color: '#fff',
           emphasis: {
             show: false,
             color: '#fff'
           }
         },
         itemStyle: {
-          normal: {
-            areaColor: '#020933',
-            borderColor: '#3fdaff',
-            borderWidth: 1,
-            shadowColor: 'rgba(63, 218, 255, 0.5)',
-            shadowBlur: 30
-          },
+          areaColor: '#020933',
+          borderColor: '#3fdaff',
+          borderWidth: 1,
+          shadowColor: 'rgba(63, 218, 255, 0.5)',
+          shadowBlur: 30,
           emphasis: {
             areaColor: '#2B91B7'
           }
@@ -169,23 +165,23 @@ export default {
         },
         effectScatterLabelVisible: true,
         effectScatterLabel: {
-          normal: { position: 'left' }
+          normal: {
+            position: 'left'
+          }
         },
         visualMapVisible: true,
         visualMap: {
           inRange: {
-            color: [ '#C6FFDD', '#FBD786', '#f7797d' ]
+            color: ['#C6FFDD', '#FBD786', '#f7797d']
           }
         },
         symbolSize: 10,
         itemStyle: {
-          normal: {
-            areaColor: '#020933',
-            borderColor: '#3fdaff',
-            borderWidth: 1,
-            shadowColor: 'rgba(63, 218, 255, 0.5)',
-            shadowBlur: 10
-          },
+          areaColor: '#020933',
+          borderColor: '#3fdaff',
+          borderWidth: 1,
+          shadowColor: 'rgba(63, 218, 255, 0.5)',
+          shadowBlur: 10,
           emphasis: {
             areaColor: '#2B91B7'
           }

diff --git a/app/data/line.js b/app/data/line.js
@@ -5,21 +5,23 @@ const simpleData = {
     name: 'Week',
     data: ['Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fir.', 'Sat.', 'Sun.']
   },
-  measures: [{
-    name: 'Vue',
-    data: [2100, 2800, 3500, 5400, 2600, 4100, 3300]
-  }]
+  measures: [
+    {
+      name: 'Vue',
+      data: [2100, 2800, 3500, 5400, 2600, 4100, 3300]
+    }]
 }
 
 const numberData = {
   dimensions: {
     name: 'Week',
     data: ['1', '2', '3', '4', '5', '6', '7']
   },
-  measures: [{
-    name: 'Vue',
-    data: [2100, 2800, 3500, 5400, 2600, 4100, 3300]
-  }]
+  measures: [
+    {
+      name: 'Vue',
+      data: [2100, 2800, 3500, 5400, 2600, 4100, 3300]
+    }]
 }
 
 const baseData = {
@@ -30,18 +32,19 @@ const baseData = {
       'Jul.', 'Aug.', 'Sep.', 'Oct.', 'Nov.', 'Dec.'
     ]
   },
-  measures: [{
-    name: 'Vue',
-    data: ['3000.12', 3500.33, 3900.23, 3100, 3200, 3100, 3600, 3300, 3600, 3400, 3100, 3000]
-  },
-  {
-    name: 'React',
-    data: ['2000.34', '2000.23', 2600.87, 2300, 2300, 2000, 2600, 2200, 2500, 2800, 2500, 2200]
-  },
-  {
-    name: 'Angular',
-    data: ['827.56', 949.39, 1400.78, 1000, 884, 911, 983, 989, 925, 1100, 1200, 930]
-  }]
+  measures: [
+    {
+      name: 'Vue',
+      data: ['3000.12', 3500.33, 3900.23, 3100, 3200, 3100, 3600, 3300, 3600, 3400, 3100, 3000]
+    },
+    {
+      name: 'React',
+      data: ['2000.34', '2000.23', 2600.87, 2300, 2300, 2000, 2600, 2200, 2500, 2800, 2500, 2200]
+    },
+    {
+      name: 'Angular',
+      data: ['827.56', 949.39, 1400.78, 1000, 884, 911, 983, 989, 925, 1100, 1200, 930]
+    }]
 }
 
 export default {
@@ -191,6 +194,31 @@ export default {
     {
       title: '折线图使用 markArea',
       xprops: lineWithMarkArea
+    },
+    {
+      title: '系列自定义',
+      data: baseData,
+      settings: {
+        smooth: true,
+        itemStyle: {
+          'Vue': {
+            color: '#f4a'
+          },
+          'React': {
+            color: '#af4'
+          },
+          'Angular': {
+            color: '#4af'
+          }
+        }
+      },
+      seriesOption: {
+        'Vue': {
+          itemStyle: { color: 'green' },
+          showSymbol: false,
+          lineStyle: { type: 'dotted' }
+        }
+      }
     }
   ]
 }