• g2繪制chart圖表
• antd中的radio實現(xiàn)排序，根據(jù)數(shù)據(jù)順序的不同，chart圖表實時渲染
  

index組件

import React from 'react';
import {  Radio } from 'antd';
import G2 from '@antv/g2';

class Sort extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      checkboxSort: 'supplyAreaDown'
    }
  }
  onChangeRadio = (e) => {
   
    this.setState({
      checkboxSort: e.target.value
    })

    if (e.target.value === 'supplyAreaUp') {
      dataList.sort(this.compareUp('supplyArea'))
     
    } else if (e.target.value == 'supplyAreaDown') {
      dataList.sort(this.compareDown('supplyArea'))
    } else if (e.target.value == 'dealAreaUp') {
      dataList.sort(this.compareUp('dealArea'))
    }
    else if (e.target.value == 'dealAreaDown') {
      dataList.sort(this.compareDown('dealArea'))
    } else if (e.target.value == 'supplyDemandRateUp') {
      dataList.sort(this.compareUp('supplyDemandRate'))
    } else if (e.target.value == 'supplyDemandRateDown') {
      dataList.sort(this.compareDown('supplyDemandRate'))
    }

  }
  compareUp = arg => {
    return function (a, b) {
      return a[arg] - b[arg]
    }
  }

  compareDown = arg => {
    return function (a, b) {
      return b[arg] - a[arg]
    }
  }
  render() {
    return (
      <div id='sort'>
        <h2>排序</h2>
        <Radio.Group
          onChange={this.onChangeRadio}
          value={this.state.checkboxSort}
        >
          {
            sort.map((item, index) => {
              return <Radio key={index} value={item.key}>
                {item.value}
              </Radio>
            })
          }
        </Radio.Group>
        <SortChart />
      </div>
    )
  }
}
export default Sort;

chart圖子組件

let chartBox = null
class SortChart extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  //數(shù)據(jù)轉(zhuǎn)換
  changeData = () => {  
    let arr1 = []
    let arr2 = []

    dataList.forEach((item, index) => {
      if (Object.prototype.hasOwnProperty.call(item, 'supplyArea')) {
        let obj = {
          plateName: item.plateName,
          type: '供應(yīng)面積(萬㎡)',
          val: !item.supplyArea && parseFloat(item.supplyArea) !== 0 ? null : +item.supplyArea,
        }
        arr1.push(obj)
      }
      if (Object.prototype.hasOwnProperty.call(item, 'dealArea')) {
        let obj = {
          plateName: item.plateName,
          type: '成交面積(萬㎡)',
          val: !item.dealArea && parseFloat(item.dealArea) !== 0 ? null : +item.dealArea,
        }
        arr1.push(obj)
      }
      if (Object.prototype.hasOwnProperty.call(item, 'supplyDemandRate')) {
        let obj = {
          plateName: item.plateName,
          type: '供求比',
          val: !item.supplyDemandRate && parseFloat(item.supplyDemandRate) !== 0 ? null : +item.supplyDemandRate
        }
        arr2.push(obj)
      }
    })

    this.paintingChart(arr1, arr2)
  }
  componentDidMount() {
    this.changeData()
  }

  componentDidUpdate() {
    this.changeData()
  }

  //繪制chart圖
  paintingChart = (arr1, arr2) => {
    chartBox && chartBox.destroy()
    const chart = new G2.Chart({
      container: 'sortChart',
      width: 500,
      height: 300,
      padding: 'auto'
    })
    const view1 = chart.view()
    view1.source(arr1)
    view1.interval().position('plateName*val').color('type').adjust([{
      type: 'dodge',
      marginRatio: 1 / 32
    }])
    view1.axis('val', {
      grid: null,
      label: null
    })

    const view2 = chart.view()
    view2.source(arr2)
    view2.line().position('plateName*val').color('type', '#ca3a00').shape('smooth').tooltip('plateName*val', function (plateName, val) {
      return {
        name: '供求比',
        value: val + '%'
      }
    })
    view2.point().position('plateName*val').color('#ca3a00').shape('circle').size(5)
    view2.axis('val', {
      grid: null,
      label: null
    })
    chart.render()
    chartBox = chart
  }

  render() {
    return (
      <div id='sortChart'></div>
    )
  }
}

排序展示的數(shù)據(jù)

let sort = [
  {
    key: "supplyAreaUp",
    value: "供應(yīng)面積升序排列",
    select: false
  },
  {
    key: "supplyAreaDown",
    value: "供應(yīng)面積降序排列",
    select: true
  },
  {
    key: "dealAreaUp",
    value: "成交面積升序排列",
    select: false
  },
  {
    key: "dealAreaDown",
    value: "成交面積降序排列",
    select: false
  },
  {
    key: "supplyDemandRateUp",
    value: "供求比升序排列",
    select: false
  },
  {
    key: "supplyDemandRateDown",
    value: "供求比降序排列",
    select: false
  }
]

chart圖展示的數(shù)據(jù)

let dataList = [
  {
    dealArea: 95,
    plateName: "其他",
    supplyArea: 100,
    supplyDemandRate: 1.1,
  },
  {
    dealArea: 38,
    plateName: "江寧",
    supplyArea: 55,
    supplyDemandRate: 2.4
  },
  {
    dealArea: 33,
    plateName: "仙林",
    supplyArea: 33,
    supplyDemandRate: 2.3
  },
  {
    dealArea: 18,
    plateName: "城南",
    supplyArea: 25,
    supplyDemandRate: 1.4
  }
]