2021-06-04

king

2021-06-04 abe942f4c6d49a6ad42acaf8e74f5f02b5ffc089

 src/menu/components/chart/antv-pie/index.jsx

@@ -3,7 +3,7 @@
import { is, fromJS } from 'immutable'
import { Icon, Popover } from 'antd'
import { Chart } from '@antv/g2'
import DataSet from '@antv/data-set'
import DataSet, { DataView } from '@antv/data-set'

import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
@@ -54,6 +54,9 @@

      if (card.subtype === 'ring') {
        _plot.innerRadius = 50
      } else if (card.subtype === 'nest') {
        _plot.innerRadius = 30
        _plot.radius = 80
      }

      let _card = {
@@ -150,13 +153,6 @@
      { label: '2003', value: 33.7 },
      { label: '2004', value: 30.7 },
      { label: '2005', value: 25.8 },
      { label: '2006', value: 31.7 },
      { label: '2007', value: 33 },
      { label: '2008', value: 46 },
      { label: '2009', value: 38.3 },
      { label: '2010', value: 28 },
      { label: '2011', value: 42.5 },
      { label: '2012', value: 30.3 }
    ]

    let data = xdata.map(item => {
@@ -169,11 +165,243 @@
    return data
  }

  getnestdata = (X_axis, Y_axis, type) => {
    const xdata = [
      { name: '狮子', type: '火象', value: 11 },
      { name: '白羊', type: '火象', value: 10 },
      { name: '水瓶', type: '风向', value: 14 },
      { name: '射手', type: '火象', value: 10 },
      { name: '双子', type: '风向', value: 7 },
      { name: '天平', type: '风向', value: 7 },
      { name: '摩羯', type: '土象', value: 14 },
      { name: '金牛', type: '土象', value: 3 },
      { name: '处女', type: '土象', value: 3 },
      { name: '天蝎', type: '水象', value: 11 },
      { name: '巨蟹', type: '水象', value: 5 },
      { name: '双鱼', type: '水象', value: 5 },
    ]

    let map = new Map()
    let sort = 1
    let data = xdata.map(item => {
      let _sort = sort
      if (map.has(item.type)) {
        _sort = map.get(item.type)
      } else {
        map.set(item.type, _sort)
        sort++
      }
      return {
        [X_axis]: item.name,
        [Y_axis]: item.value,
        [type]: item.type,
        $sort: _sort
      }
    })

    return data
  }

  nestrender = () => {
    const { card } = this.state
    const plot = card.plot

    let color = plot.color || 'rgba(0, 0, 0, 0.85)'
    let X_axis = plot.Xaxis || 'x'
    let Y_axis = plot.Yaxis || 'y'
    let type = plot.type || 'type'

    const _data = this.getnestdata(X_axis, Y_axis, type)
    const dvx = new DataView().source(_data)

    dvx.transform({
      type: 'sort-by',
      fields: ['$sort']
    })

    let data = dvx.rows

    // 通过 DataSet 计算百分比
    const dv = new DataView()
    dv.source(data).transform({
      type: 'percent',
      field: Y_axis,
      dimension: type,
      as: '$percent'
    })

    const dv1 = new DataView()
    dv1.source(data).transform({
      type: 'percent',
      field: Y_axis,
      dimension: X_axis,
      as: '$percent',
    })

    const chart = new Chart({
      container: card.uuid + 'canvas',
      autoFit: true,
      height: card.plot.height ? (card.plot.height - 75) : 325,
      padding: 0,
    })

    chart.data(dv.rows)

    if (plot.show !== 'value') {
      chart.scale('percent', {
        formatter: (val) => {
          val = val * 100 + '%'
          return val
        }
      })

      Y_axis = '$percent'
    }
    let radius = plot.radius / 100
    let innerRadius = plot.innerRadius / 100
    
    chart.coordinate('theta', {
      innerRadius: innerRadius,
      radius: innerRadius + (radius - innerRadius) / 2,
    })
    chart.tooltip({
      showTitle: false,
      showMarkers: false,
    })
    chart.legend(false)
    let chart1 = chart
      .interval()
      .adjust('stack')
      .position(Y_axis)
      .color(type)
      .tooltip(`${type}*${Y_axis}`, (type, percent) => {
        if (plot.show !== 'value') {
          percent = (percent * 100).toFixed(2) + '%'
        }
        return {
          name: type,
          value: percent,
        }
      })
      .style({
        lineWidth: 1,
        stroke: '#fff',
      })

    if (plot.label !== 'false') {
      chart1.label(type, {
        offset: -10,
      })
    }
    
    const outterView = chart.createView()
    
    outterView.data(dv1.rows)

    if (plot.show !== 'value') {
      outterView.scale('percent', {
        formatter: (val) => {
          val = val * 100 + '%'
          return val
        }
      })
    }
    outterView.coordinate('theta', {
      innerRadius: (innerRadius + (radius - innerRadius) / 2) / radius,
      radius: radius
    })
    let chart2 = outterView
      .interval()
      .adjust('stack')
      .position(Y_axis)
      .color(X_axis)
      .tooltip(`${X_axis}*${Y_axis}`, (name, value) => {
        if (plot.show !== 'value') {
          value = (value * 100).toFixed(2) + '%'
        }
        return {
          name: name,
          value: value
        }
      })
      .style({
        lineWidth: 1,
        stroke: '#fff',
      })

      if (plot.label !== 'false') {
        if (plot.label === 'inner') {
          chart2.label(Y_axis, {
            offset: -30,
            content: (data) => {
              let _label = ''
              let _val = ''
              if (plot.show !== 'value') {
                _val = `${(data[Y_axis] * 100).toFixed(2)}%`
              } else {
                _val = `${data[Y_axis]}`
              }
              if (plot.label === 'inner') {
                _label = _val
              } else {
                _label = `${data[X_axis]}: ${_val}`
              }
              return _label
            },
            style: {
              textAlign: 'center',
              fontSize: 16,
              shadowBlur: 2,
              shadowColor: 'rgba(0, 0, 0, .45)',
              fill: '#fff',
            }
          })
        } else {
          chart2.label(Y_axis, {
            layout: { type: 'pie-spider' },
            labelHeight: 20,
            content: (data) => {
              let _label = ''
              let _val = ''
              if (plot.show !== 'value') {
                _val = `${(data[Y_axis] * 100).toFixed(2)}%`
              } else {
                _val = `${data[Y_axis]}`
              }
              if (plot.label === 'inner') {
                _label = _val
              } else {
                _label = `${data[X_axis]}: ${_val}`
              }
              return _label
            },
            labelLine: {
              style: {
                lineWidth: 0.5,
              },
            },
            style: {
              fill: color
            }
          })
        }
      }
    
    chart.interaction('element-highlight')
    
    chart.render()
  }

  pierender = () => {
    const { card } = this.state
    const plot = card.plot
    let color = plot.color || 'rgba(0, 0, 0, 0.85)'

    if (plot.shape === 'nest') {
      this.nestrender()
      return
    }

    let color = plot.color || 'rgba(0, 0, 0, 0.85)'
    let X_axis = plot.Xaxis || 'x'
    let Y_axis = plot.Yaxis || 'y'