常用 ant组件 地址

来源:互联网 发布:最优化第二版课后答案 编辑:程序博客网 时间:2024/06/05 10:07




chart    antv G2 地址https://github.com/antvis/g2-react/blob/master/src/index.js

import G2 from 'g2';import React from 'react';import PropTypes from 'prop-types';let uniqueId = 0;function generateUniqueId() {  return `rc-g2-${uniqueId++}`;}export default function createG2(__operation) {  class Component extends React.Component {    static propTypes = {      data: PropTypes.arrayOf(PropTypes.object).isRequired,      width: PropTypes.number.isRequired,      height: PropTypes.number.isRequired,      plotCfg: PropTypes.object,      forceFit: PropTypes.bool,      configs: PropTypes.object,    };    constructor(props, context) {      super(props, context);      this.chart = null;      this.chartId = generateUniqueId();    }    componentDidMount() {      this.initChart(this.props);    }    componentWillReceiveProps(newProps) {      const { data: newData, width: newWidth, height: newHeight, plotCfg: newPlotCfg } = newProps;      const { data: oldData, width: oldWidth, height: oldHeight, plotCfg: oldPlotCfg } = this.props;      if (newPlotCfg !== oldPlotCfg) {        console.warn('plotCfg 不支持修改');      }      if (newData !== oldData) {        this.chart.changeData(newData);      }      if (newWidth !== oldWidth || newHeight !== oldHeight) {        this.chart.changeSize(newWidth, newHeight);      }    }    shouldComponentUpdate() {      return false;    }    componentWillUnmount() {      this.chart.destroy();      this.chart = null;      this.chartId = null;    }    initChart(props) {      const { width, height, data, plotCfg, forceFit, configs } = props;      const chart = new G2.Chart({        id: this.chartId,        width, height,        plotCfg,        forceFit,      });      chart.source(data);      __operation(chart, configs);      this.chart = chart;    }    render() {      return (<div id={this.chartId} />);    }  }  return Component;}


原创粉丝点击