AntvF2自定义饼图样式

<template>
  <div class="arrivalCanvas">
    <canvas id="arrivalCanvas" style="width: 100%;height: 100%" class="canvas"></canvas>
  </div>
</template>
<script type="text/ecmascript-6">
/** F2按需引入start */
const F2 = require('@antv/f2/lib/core')
const Legend = require('@antv/f2/lib/plugin/legend')
const Tooltip = require('@antv/f2/lib/plugin/tooltip')
const Guide = require('@antv/f2/lib/plugin/guide')
require('@antv/f2/lib/geom/area')
require('@antv/f2/lib/geom/interval')
require('@antv/f2/lib/component/guide')
require('@antv/f2/lib/coord/polar')
require('@antv/f2/lib/geom/adjust/stack')
F2.Chart.plugins.register(Legend)
F2.Chart.plugins.register(Tooltip)
F2.Chart.plugins.register(Guide)
import Toast from '@base/toast/index.js'
import Staff from '@api/staff/staff.js'
export default {
  name: 'arrivalCanvas',
  props: {
    adminUserId: {
      type: String
    },
    shopId: {
      type: [String,Number]
    }
  },
  data() {
    return {
      arrivalData: [{
        name: '近30天到店3次及以上',
        type: 'arrive1_2',
        value: 0,
        a: 1,
        color: '#975FE4'
      }, {
        name: '近30天到店1~2次',
        type: 'arrive3',
        value: 0,
        a: 1,
        color: '#3BA0FF'
      }, {
        name: '30天～90(含)天到店',
        type: 'overMonth1',
        value: 0,
        a: 1,
        color: '#36CBCB'
      }, {
        name: '90天～180(含)天到店',
        type: 'overMonth2',
        value: 0,
        a: 1,
        color: '#4DCB73'
      }, {
        name: '超过180天到店',
        type: 'overMonth6',
        value: 0,
        a: 1,
        color: '#FAD337'
      }],
      total: 0,
      isEmpty: false
    }
  },
  mounted() {
    this.getAllInformation()
  },
  methods: {
    getAllInformation() {
      let params = {
        adminUserId: this.adminUserId
      }
      if(this.shopId) {
        params.shopId = this.shopId
      }
      this.$axios
        .post(Staff.getArriveRecentYearOverview, params)
        .then(res => {
          this.setAllInformation(res.result)
        })
        .catch(error => {
          Toast.close()
          Toast.start({
            info: error.msg,
            type: error.type === 'service' ? 'error' : 'default',
            time: 1500
          })
        })
    },
    setAllInformation(result) {
      let total = 0
      this.isEmpty = result.every(v=>v.count === 0)
      result.forEach(v=>{
        this.arrivalData.forEach(it=>{
          if(v.arriveRangeType === it.type) {
            it.value = v.count
            total += v.count
          }
        })
      })
      this.total = total
      this.$nextTick(() => {
        this.drawRevenueChart()
      })
    },
    drawRevenueChart() {
      let legendItems = [];
      this.arrivalData.map(function(obj) {
        let item = {
          name: obj.name,
          value: obj.value + '人',
          marker: {
            symbol: 'circle',
            radius: 3,
            fill: obj.color
          }
        }
        legendItems.push(item)
      });

      var chart = new F2.Chart({
        id: 'arrivalCanvas',
        pixelRatio: window.devicePixelRatio,
        padding: [0, 'auto']
      });
      chart.source(this.arrivalData);
      chart.tooltip(false);
      chart.legend({
        position: 'right',
        custom: true,
        items: legendItems,
        offsetY: 5,
        nameStyle: {
          fill: '#999',
          fontSize: 12,
          fontWeight: 400,
          height: 16
        },
        valueStyle: {
          fill: '#333',
          fontSize: 12,
          height: 16
        },
        clickable: false
      });
      chart.coord('polar', {
        transposed: true,
        innerRadius: 0.75,
        radius: 0.85
      });
      chart.axis(false);
      chart.guide().text({
        position: ['50%', '50%'],
        content: this.total + '人',
        style: {
          fontSize: '16',
          fill: '#333'
        }
      });
      if(this.isEmpty) {
        chart.interval().position('1*a').color('name', ['#975FE4', '#3BA0FF', '#36CBCB', '#4DCB73', '#FAD337']).adjust('stack').style({
          lineWidth: 4,
          stroke: '#fff'
        })
      } else {
        chart.interval().position('1*value').color('name', ['#975FE4', '#3BA0FF', '#36CBCB', '#4DCB73', '#FAD337']).adjust('stack').style({
          lineWidth: 4,
          stroke: '#fff'
        })
      }
      chart.render();
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.arrivalCanvas
  display flex
  align-items center
</style>