2021-06-09

king

2021-06-09 73a5124745890650d0fc91234bdbaa66d9bcbc6a

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

@@ -50,6 +50,12 @@
  },
})

registerShape('point', 'hidden', {
  draw(cfg, container) {
    return container.addGroup({})
  }
})

class antvDashboardChart extends Component {
  static propTpyes = {
    card: PropTypes.object,
@@ -68,17 +74,34 @@
    const { card, ismob } = this.props

    if (card.isNew) {
      let _plot = {
        width: card.width || 12,
        height: 400,
        label: '',
        valueField: '',
        name: card.name,
        maxValue: 100,
        tickInterval: 10,
        labelColor: '#545454',
        tickColor: '#CBCBCB',
        percent: 'true'
      let _plot = null
      if (card.subtype === 'ratioboard') {
        _plot = {
          width: card.width || 12,
          height: 400,
          labelField: '',
          valueField: '',
          name: card.name,
          maxValue: 100,
          radius: 75,
          fontSize: 28,
          percent: 'true',
          backColor: '#ebedf0',
          labelColor: '#8c8c8c'
        }
      } else {
        _plot = {
          width: card.width || 12,
          height: 400,
          label: '',
          valueField: '',
          name: card.name,
          maxValue: 100,
          tickInterval: 10,
          labelColor: '#545454',
          tickColor: '#CBCBCB',
          percent: 'true'
        }
      }

      if (ismob) {
@@ -91,7 +114,7 @@
        floor: card.floor,
        tabId: card.tabId || '',
        parentId: card.parentId || '',
        format: 'object',   // 组件属性 - 数据格式
        format: card.subtype === 'ratioboard' ? 'array' : 'object',   // 组件属性 - 数据格式
        pageable: false,    // 组件属性 - 是否可分页
        switchable: false,  // 组件属性 - 数据是否可切换
        dataName: card.dataName || '',
@@ -133,7 +156,7 @@
  }

  componentDidMount () {
    this.dashboardrender()
    this.viewrender()
    MKEmitter.addListener('tabsChange', this.handleTabsChange)
    MKEmitter.addListener('submitStyle', this.getStyle)
  }
@@ -163,8 +186,131 @@
      }

      this.$timer && clearTimeout(this.$timer)
      this.$timer = setTimeout(this.dashboardrender, 100)
      this.$timer = setTimeout(this.viewrender, 100)
    }
  }

  viewrender = () => {
    const { card } = this.state
    if (card.subtype === 'ratioboard') {
      this.ratioboardrender()
    } else {
      this.dashboardrender()
    }
  }

  getratiodata = () => {
    const { card } = this.state

    let val = (Math.random() * card.plot.maxValue).toFixed(1)
    let data = [
      { type: '新用户', value: val, $percent: val / card.plot.maxValue, $color: '#1890ff' },
    ]
    if (card.plot.colors && card.plot.colors.length > 0) {
      data = []
      card.plot.colors.forEach(item => {
        let _val = (Math.random() * card.plot.maxValue).toFixed(1)
        data.push({
          type: item.tick,
          value: _val,
          $percent: _val / card.plot.maxValue,
          $color: item.color
        })
      })
    }

    return data
  }

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

    const data = this.getratiodata()
    
    const chart = new Chart({
      container: card.uuid + 'dashboard',
      autoFit: true,
      height: plot.title ? plot.height - 45 : plot.height,
    })
    
    chart.data(data)
    chart.coordinate('polar', {
      startAngle: -Math.PI / 2,
      endAngle: 3 * Math.PI / 2,
      radius: (plot.radius || 75) / 100
    })
    chart.scale('$percent', {
      min: 0,
      max: 1,
      tickInterval: 1,
    })
    chart.axis(false)
    chart.facet('rect', {
      fields: ['type'],
      showTitle: false,
      eachView: function eachView(view, facet) {
        const data = facet.data[0]

        view.point().position('').shape('hidden')

        view.annotation().arc({
          top: false,
          start: [0, 1],
          end: [0.9999, 1],
          style: {
            stroke: plot.backColor,
            lineWidth: 10
          }
        })

        let _tick = data.$percent
        if (_tick >= 1) {
          _tick = 0.9999
        }

        view.annotation().arc({
          start: [0, 1],
          end: [_tick, 1],
          style: {
            stroke: data.$color,
            lineWidth: 10,
          }
        })
        // 仪表盘信息
        let text = ''
        if (plot.percent === 'true') {
          text = +(data.$percent * 100).toFixed(2) + '%'
        } else {
          text = data.value
        }
    
        view.annotation().text({
          position: ['50%', '45%'],
          content: data.type,
          style: {
            fontSize: plot.fontSize * 0.8,
            fill: plot.labelColor,
            fontWeight: 300,
            textAlign: 'center'
          },
          offsetX: 0
        })
        view.annotation().text({
          position: ['50%', '55%'],
          content: text,
          style: {
            fontSize: plot.fontSize,
            fill: plot.labelColor,
            fontWeight: 500,
            textAlign: 'center'
          },
          offsetX: 0,
          offsetY: 10
        })
      }
    })
    chart.render()
  }

  getdata = () => {
@@ -184,22 +330,22 @@
    const chart = new Chart({
      container: card.uuid + 'dashboard',
      autoFit: true,
      height: plot.height ? (plot.height - 75) : 325,
      height: plot.title ? plot.height - 45 : plot.height,
      padding: [0, 0, 0, 0],
    })
    chart.data(data);
    chart.data(data)
    chart.scale('value', {
      min: 0,
      max: plot.maxValue,
      tickInterval: plot.tickInterval,
    });
    })
    chart.coordinate('polar', {
      startAngle: (-9 / 8) * Math.PI,
      endAngle: (1 / 8) * Math.PI,
      radius: 0.75,
    });
    })

    chart.axis('1', false);
    chart.axis('1', false)
    chart.axis('value', {
      line: null,
      label: {
@@ -218,9 +364,9 @@
        }
      },
      grid: null,
    });
    chart.legend(false);
    chart.tooltip(false);
    })
    chart.legend(false)
    chart.tooltip(false)
    chart
      .point()
      .position('value*1')
@@ -243,7 +389,7 @@
        appear: {
          animation: 'fade-in'
        }
      });
      })

    // 绘制仪表盘背景
    chart.annotation().arc({
@@ -251,7 +397,7 @@
      start: [0, 1],
      end: [plot.maxValue, 1],
      style: {
        stroke: '#CBCBCB',
        stroke: '#ebedf0',
        lineWidth: 18,
        lineDash: null,
      },
@@ -324,7 +470,7 @@
      }
      this.$timer && clearTimeout(this.$timer)
      this.$timer = setTimeout(() => {
        this.dashboardrender()
        this.viewrender()
      }, 150)
    }

@@ -366,7 +512,6 @@

    return (
      <div className="menu-dashboard-edit-box" style={{..._style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}>
        <NormalHeader config={card} updateComponent={this.updateComponent}/>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/>
@@ -380,6 +525,7 @@
        } trigger="hover">
          <Icon type="tool" />
        </Popover>
        {card.plot.title ? <NormalHeader config={card} updateComponent={this.updateComponent}/> : null}
        <div className="canvas" id={card.uuid + 'dashboard'}></div>
      </div>
    )