更新f2到3.3.8，添加f2新增的plugin pieLabel和带文本饼图labelline-pie

index.js

@@ -1,6 +1,7 @@
 // THIS FILE IS ONLY FOR IDE ENTRY CHECKING NOT FOR REAL USAGE
 
-console.warn('VUX: 如果你看到这一行，说明 vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件，会导致打包体积过大。请升级到最新版本 vux-loader，建议开启 eslint(standard)。')
+console.warn(
+  'VUX: 如果你看到这一行，说明 vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件，会导致打包体积过大。请升级到最新版本 vux-loader，建议开启 eslint(standard)。')
 
 import Actionsheet from './src/components/actionsheet/index.vue'
 import Agree from './src/components/agree/index.vue'
@@ -139,9 +140,11 @@ import VChart from './src/components/v-chart/v-chart.vue'
 import VGuide from './src/components/v-chart/v-guide.vue'
 import Video from './src/components/video/index.vue'
 import ViewBox from './src/components/view-box/index.vue'
+import VLabellinePie from './src/components/v-chart/v-labelline-pie.vue'
 import VLegend from './src/components/v-chart/v-legend.vue'
 import VLine from './src/components/v-chart/v-line.vue'
 import VPie from './src/components/v-chart/v-pie.vue'
+import VPielabel from './src/components/v-chart/v-pielabel.vue'
 import VPoint from './src/components/v-chart/v-point.vue'
 import VScale from './src/components/v-chart/v-scale.vue'
 import VTooltip from './src/components/v-chart/v-tooltip.vue'
@@ -302,9 +305,11 @@ export {
   VGuide,
   Video,
   ViewBox,
+  VLabellinePie,
   VLegend,
   VLine,
   VPie,
+  VPielabel,
   VPoint,
   VScale,
   VTooltip,
@@ -326,4 +331,4 @@ export {
   XSwitch,
   XTable,
   XTextarea
-}
+}

package.json

@@ -37,7 +37,7 @@
     "xbuild": "npm run build-styles && npm run build-components"
   },
   "dependencies": {
-    "@antv/f2": "^3.1.4-beta.2",
+    "@antv/f2": "^3.3.8",
     "array-filter": "^1.0.0",
     "array-find": "^1.0.0",
     "array-map": "^0.0.0",

src/components/map.json

@@ -136,9 +136,11 @@
   "VGuide": "src/components/v-chart/v-guide.vue",
   "Video": "src/components/video/index.vue",
   "ViewBox": "src/components/view-box/index.vue",
+  "VLabellinePie": "src/components/v-chart/v-labelline-pie.vue",
   "VLegend": "src/components/v-chart/v-legend.vue",
   "VLine": "src/components/v-chart/v-line.vue",
   "VPie": "src/components/v-chart/v-pie.vue",
+  "VPielabel": "src/components/v-chart/v-pielabel.vue",
   "VPoint": "src/components/v-chart/v-point.vue",
   "VScale": "src/components/v-chart/v-scale.vue",
   "VTooltip": "src/components/v-chart/v-tooltip.vue",
@@ -160,4 +162,4 @@
   "XSwitch": "src/components/x-switch/index.vue",
   "XTable": "src/components/x-table/index.vue",
   "XTextarea": "src/components/x-textarea/index.vue"
-}
+}

src/components/v-chart/v-chart.vue

@@ -22,7 +22,7 @@
 //   schema: ['candle']
 // }
 
-import F2 from '@antv/f2'
+import F2 from '@antv/f2/lib/index-all'
 
 export default {
   props: {
@@ -67,6 +67,8 @@ export default {
 
       barOptions: null,
 
+      labellinePieOptions: null,
+
       pieOptions: null,
 
       guideOptions: null,
@@ -78,6 +80,8 @@ export default {
 
       guides: [],
 
+      pieLabels: [],
+
       seriesField: '',
 
       xAxisOptions: null,
@@ -88,7 +92,7 @@ export default {
   },
   computed: {
     currentData () {
-      if (this.pieOptions) {
+      if (this.pieOptions || this.labellinePieOptions) {
         return this.data.slice().map(item => {
           item.a = '1'
           return item
@@ -161,6 +165,9 @@ export default {
     addGuide (options) {
       this.guides.push(options)
     },
+    addPielabel (options) {
+      this.pieLabels.push(options)
+    },
     setScale (options) {
       if (options.x) {
         this.xFieldOptions = options.x
@@ -191,6 +198,9 @@ export default {
       }
       return color
     },
+    setLabellinePie (options = {}) {
+      this.labellinePieOptions = options
+    },
     setPie (options = {}) {
       this.pieOptions = options
     },
@@ -373,6 +383,14 @@ export default {
         })
       }
 
+      if (this.pieLabels.length) {
+        this.pieLabels.forEach(pieLabel => {
+          chart.pieLabel(
+            pieLabel.options
+          )
+        })
+      }
+
       if (this.areaOptions) {
         const { adjust, seriesField } = this.areaOptions
         let color = this.buildColor(this.areaOptions.colors)
@@ -409,25 +427,37 @@ export default {
         }
       })
 
+      if (this.labellinePieOptions) {
+        chart.coord(this.labellinePieOptions.coord, this.labellinePieOptions)
+        chart.axis(false)
+        chart.legend(false)
+        chart.tooltip(false)
+        chart.interval().position('a*percent').color(this.labellinePieOptions.seriesField,
+          (this.labellinePieOptions.colors && this.labellinePieOptions.colors.length)
+            ? this.labellinePieOptions.colors
+            : '').adjust('stack')
+      }
+
       if (this.pieOptions) {
         chart.coord(this.pieOptions.coord, this.pieOptions)
         chart.axis(false)
         chart.interval()
-        .position('a*percent')
-        .color(this.pieOptions.seriesField, (this.pieOptions.colors && this.pieOptions.colors.length) ? this.pieOptions.colors : '')
-        .adjust('stack')
-        .style({
-          lineWidth: 1,
-          stroke: '#fff',
-          lineJoin: 'round',
-          lineCap: 'round'
-        })
-        .animate({
-          appear: {
-            duration: 1200,
-            easing: 'bounceOut'
-          }
-        })
+          .position('a*percent')
+          .color(this.pieOptions.seriesField,
+            (this.pieOptions.colors && this.pieOptions.colors.length) ? this.pieOptions.colors : '')
+          .adjust('stack')
+          .style({
+            lineWidth: 1,
+            stroke: '#fff',
+            lineJoin: 'round',
+            lineCap: 'round'
+          })
+          .animate({
+            appear: {
+              duration: 1200,
+              easing: 'bounceOut'
+            }
+          })
       }
 
       if (this.pointOptions) {
@@ -469,11 +499,12 @@ export default {
 <style lang="css">
 .noselect {
   -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-     -khtml-user-select: none; /* Konqueror HTML */
-       -moz-user-select: none; /* Firefox */
-        -ms-user-select: none; /* Internet Explorer/Edge */
-            user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome and Opera */
+  -webkit-user-select: none; /* Safari */
+  -khtml-user-select: none; /* Konqueror HTML */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none;
+  /* Non-prefixed version, currently
+                                   supported by Chrome and Opera */
 }
 </style>

src/components/v-chart/v-labelline-pie.vue

@@ -0,0 +1,40 @@
+<script>
+const camel = function (key) {
+  return key.replace(/(-[a-z])/g, function ($1) { return $1.toUpperCase().replace('-', '') })
+}
+const camelBatch = function (attrs) {
+  for (let i in attrs) {
+    const key = camel(i)
+    attrs[key] = attrs[i]
+    if (key !== i) {
+      delete attrs[i]
+    }
+  }
+  return attrs
+}
+export default {
+  props: {
+    coord: {
+      type: String,
+      default: 'polar'
+    },
+    transposed: {
+      type: Boolean,
+      default: true
+    },
+    serialField: {
+      type: String
+    },
+    colors: {
+      type: Array
+    }
+  },
+  created () {
+    this.$parent.setLabellinePie({
+      ...this.$props,
+      ...camelBatch(this.$attrs)
+    })
+  },
+  render () {}
+}
+</script>

src/components/v-chart/v-pielabel.vue

@@ -0,0 +1,23 @@
+<script>
+import { camelAttrs } from './util'
+
+export default {
+  props: {
+    options: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+  created () {
+    this.$parent.addPielabel({
+      options: {
+        ...camelAttrs(this.options),
+        ...camelAttrs(this.$attrs)
+      }
+    })
+  },
+  render () {}
+}
+</script>

src/demos/v-chart/pie_labelline.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <v-chart :data="data">
+      <v-labelline-pie :radius="0.75" series-field="name" />
+      <v-pielabel :options="options"></v-pielabel>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+import { VChart, VLine, VArea, VTooltip, VLegend, VBar, VLabellinePie, VScale, VPielabel } from 'vux'
+
+const map = {
+  '芳华': '40%',
+  '妖猫传': '20%',
+  '机器之血': '18%',
+  '心理罪': '15%',
+  '寻梦环游记': '5%',
+  '其他': '2%'
+}
+
+export default {
+  components: {
+    VChart,
+    VLine,
+    VArea,
+    VTooltip,
+    VLegend,
+    VBar,
+    VLabellinePie,
+    VPielabel,
+    VScale
+  },
+  data () {
+    return {
+      legendOptions: {
+        position: 'right',
+        itemFormatter (val) {
+          return val + '  ' + map[val]
+        }
+      },
+      yOptions: {
+        formatter (val) {
+          return val * 100 + '%'
+        }
+      },
+      map,
+      data: [
+        { name: '芳华', percent: 0.4, a: '1' },
+        { name: '妖猫传', percent: 0.2, a: '1' },
+        { name: '机器之血', percent: 0.18, a: '1' },
+        { name: '心理罪', percent: 0.15, a: '1' },
+        { name: '寻梦环游记', percent: 0.05, a: '1' },
+        { name: '其他', percent: 0.02, a: '1' }
+      ],
+      options: {
+        skipOverlapLabels: true,
+        sidePadding: 40,
+        label1: function label1 (data, color) {
+          return {
+            text: data.name,
+            fill: color
+          }
+        },
+        label2: function label2 (data, color) {
+          return {
+            text: `${data.percent * 100}%`,
+            fill: color
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
+<demo>
+  title: 饼图
+</demo>