dzhh-frontend/.svn/pristine/47/4766bd6e8c76b145c89a574789ee29dbce723d92.svn-base

<template>
<div>
  <h4 :style="{ marginBottom: '20px' }" v-if="title">{{ title }}</h4>
  <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding="padding">
    <v-tooltip :showTitle="false" dataKey="type*percent" />
    <v-coord type="theta" :radius="0.5" />
    <v-pie position="percent" :color="field[0]" :label="label" :select="false" :vStyle="style" :tooltip="tooltip2" />
    <v-view :data="viewData" :scale="scale">
      <v-coord type="theta" :radius="0.75" :innerRadius="0.5 / 0.75" />
      <v-pie position="percent" :color="color" :label="labelConfig" :select="false" :vStyle="style" :tooltip="tooltip" />
    </v-view>
  </v-chart>
</div>
</template>

<script>
const DataSet = require('@antv/data-set')
import { ChartEventMixins } from './mixins/ChartMixins'
const color = ['#BAE7FF', '#7FC9FE', '#71E3E3', '#ABF5F5', '#8EE0A1', '#BAF5C4']
const itemTpl = '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
const tooltip = function(item, percent) {
  percent = (percent * 100).toFixed(2) + '%'
  return {
    name: item,
    value: percent
  }
}

export default {
  name: 'PieMultiStorey',
  mixins: [ChartEventMixins],
  props: {
    title: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 300
    },
    field: {
      type: Array,
      default: () => ['type', 'name']
    },
    xField: {
      type: String,
      default: 'value'
    },
    dataSource: {
      type: Array,
      default: () => [
        { value: 251, type: '大事例一', name: '子事例一' },
        { value: 1048, type: '大事例一', name: '子事例二' },
        { value: 610, type: '大事例二', name: '子事例三' },
        { value: 434, type: '大事例二', name: '子事例四' },
        { value: 335, type: '大事例三', name: '' },
        { value: 250, type: '大事例三', name: '' }
      ]
    }
  },
  data() {
    return {
      scale: [{
        dataKey: 'percent',
        min: 0,
        formatter: '.0%'
      }],
      dataKey: this.field[0] + '*percent',
      color: [this.field[1], color],
      itemTpl,
      label: [this.field[0], { offset: -10 }],
      style: {
        lineWidth: 1,
        stroke: '#fff'
      },
      tooltip: [
        this.field[1] + '*percent', tooltip
      ],
      tooltip2: [
        this.field[0] + '*percent', (item, percent) => {
          percent = (percent * 100).toFixed(2) + '%'
          return {
            name: item + ',' + this.getTotalData[item],
            value: percent
          }
        }
      ],
      padding: { top: 0, right: 0, bottom: 0, left: 0 },
      labelConfig: ['percent', {
        formatter: (val, item) => {
          return item.point[this.field[1]] + ': ' + item.point[this.xField] + ', ' + val
        }
      }]
    }
  },
  computed: {
    data() {
      const dv = new DataSet.View().source(this.dataSource)
      dv.transform({
        type: 'percent',
        field: this.xField,
        dimension: this.field[0],
        as: 'percent'
      })
      return dv.rows
    },
    viewData() {
      const viewDv = new DataSet.View().source(this.dataSource)
      viewDv.transform({
        type: 'percent',
        field: this.xField,
        dimension: this.field[1],
        as: 'percent'
      })
      return viewDv.rows
    },
    getTotalData() {
      const obj = {}
      this.dataSource.forEach(item => {
        const key = item[this.field[0]]
        if (obj[key]) {
          obj[key] += item[this.xField]
        } else {
          obj[key] = item[this.xField]
        }
      })
      return obj
    }
  },
  methods() {

  }
}
</script>