react+Antv-g2 demo

￡神魔★判官ぃ 2023-07-09 06:26 8阅读 0赞

## ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70][] ##

### 需求： ###

1.左上角显示总业务数，上中间显示总业务数里面的告警数；

2.下面tab展示所有告警数对应的图表

**组件使用的是antd，图表使用的是antv**

##  **父组件 Demo1.js** ##

import React, { Component } from 'react'
    import './relevance.css'
    import Relevancenum from './Relevancenum'
    import Tabschange from './Tabschange'
    
    export default class Demo1 extends Component {
        constructor(props) {
            super(props);
            this.state={
                data_num:{
                    num1:45,
                    num2:40
                }
            }
        }
        render() {
            return (
                <div className='App'>
                    <div className='app_relevance'>
                        <h4>应用关联业务</h4>
                        // 总数据
                        <Relevancenum data_num={this.state.data_num}/>
                        //tab切换和图表 
                        <Tabschange/>
                    </div>
                </div>
            )
        }
    }

### relevance.css ###

.App{
        width: 100%;  
        background-color: #fafafa;
        padding-top: 30px;
    }
    .app_relevance{
        width: 90%;
        height: 430px;
        background-color: #fff;
        box-shadow: 0px 0px 20px #ccc;
        margin:0 auto;
        border-radius: 10px;
    }
    .app_relevance h4{
        font-weight: 500;
        font-size: 18px;
        height: 27px;
        margin-left: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

### 数字组件 Relevancenum.js ###

import React, { Component } from 'react'
    import './Relevancenum.css'
    
    export default class Relevancenum extends Component {
        render() {
            // console.log(this.props)
            return (
                <div className='Relevancenum'>
                    <div className='num_content'>
                        <p>应用关联业务数</p>
                        <h2>{this.props.data_num.num1}</h2>
                    </div>
                    <div className='num_content'>
                        <p>当前警告业务数</p>
                        <h2>{this.props.data_num.num2}</h2>
                    </div>
                    <div className='num_content num_content3' >
                        <p>最新警告业务</p>
                        <a href="#">xx页面数据趋势</a>
                    </div>
                </div>
            )
        }
    }

### Relevancenum.css ###

.Relevancenum{
        display: flex;
        height: 58px;
    }
    .num_content {
        width: 25%;
        margin-left: 20px;
        border-right: 1px solid #ccc;
    }
    .num_content h2{
        line-height: 10px;
        font-weight: 500;
    }
    .num_content a{
        text-decoration:none;
        color:#2799FF;
    }
    .num_content p{
        margin-top: 3px;
        color: #666;
    }
    .num_content3{
        border-right: none;
    }

### tabs组件 Tabschange.js ###

import React, { Component } from 'react'
    import { Tabs } from 'antd';
    import './Tabschange.css'
    
    //图表组件
    import  ChildrenTab from './ChildrenTab'
    
    const { TabPane } = Tabs;
    
    // const tabBar = {
    // backgroundColor: "skyblue", //驼峰法
    // };
    
    export default class Tabschange extends Component {
        constructor(props) {
            super(props)
            //activeKey={this.state.activeKey}
            this.state = {
                keys: "1",
                tabpane: [
                    { tab: "花呗页面相关数据折线", keys: "1", },
                    { tab: "贷后入账打款", keys: "2", },
                    { tab: "延期还款", keys: "3" },
                    { tab: "交易后分期", keys: "4" },
                    { tab: "账单分期", keys: "5" },
                    { tab: "贷后入账打款", keys: "6", },
                    { tab: "延期还款", keys: "7" },
                    { tab: "交易后分期", keys: "8" },
                    { tab: "账单分期", keys: "9" },
                ],
                data: [
                    { Data: "2010-01", sales: 564 },
                    { Data: "2010-02", sales: 657 },
                    { Data: "2010-03", sales: 565 },
                    { Data: "2010-04", sales: 787 },
                    { Data: "2010-05", sales: 566 },
                ]
            }
        }
        render() {
            return (
                <div className="Tabschange">
                    <Tabs tabPosition="left" onTabClick={this.handleChange.bind(this)} >
                        {this.state.tabpane.map(item => (
                            <TabPane key={item.keys} tab={item.tab} >
                                <ChildrenTab 
                                    keys={this.state.keys} data={this.state.data}>            
                                </ChildrenTab >
                            </TabPane>
                        ))}
                    </Tabs>
                </div>
            )
        }
    //tab点击事件 默认传值当前key key是一个string
    //用不同的key区分传入不同的data渲染不同的图表
        handleChange(key) {
            console.log(key)
            this.setState({
                keys: key
            });
            if (key == 1) {
                this.setState({
                    data: [
                        { Data: "2010-01", sales: 564 },
                        { Data: "2010-02", sales: 657 },
                        { Data: "2010-03", sales: 565 },
                        { Data: "2010-04", sales: 787 },
                        { Data: "2010-05", sales: 566 },
                    ]
                })
            } else if (key == 2) {
                this.setState({
                    data: [
                        { Data: "2010-01", sales: 342 },
                        { Data: "2010-02", sales: 1132 },
                        { Data: "2010-03", sales: 454 },
                        { Data: "2010-04", sales: 634 },
                        { Data: "2010-05", sales: 232 },
                    ]
                })
            }
        }
    }

### Tabschange.css ###

.Tabschange{
        margin-top: 30px;
        /* height:calc(100% - 86px); */
        border-top: 1px solid #f0ededc7;
    }
    .Tabschange .ant-tabs-nav {
        font-size: 14px !important;
        width: 300px !important;
    }
    .Tabschange .ant-tabs .ant-tabs-left-bar .ant-tabs-tab {
        text-align: left !important;
        padding:15px 10px !important;
    }
    .Tabschange .ant-tabs-nav .ant-tabs-tab-active {
        color: #2799FF !important;
        font-size: 14px !important;
        background-color: rgb(105,183,255,0.3);
    }
    .Tabschange .ant-tabs .ant-tabs-left-bar .ant-tabs-ink-bar, .ant-tabs .ant-tabs-right-bar .ant-tabs-ink-bar{
        width: 0 !important;
        height: 0 !important;
    }
    .ant-tabs .ant-tabs-left-bar .ant-tabs-tab, .ant-tabs .ant-tabs-right-bar .ant-tabs-tab{
        margin: 0 0 0 0 !important;
    }

### ChildrenTab.js组件 ###

import React, { Component } from 'react'
    import G2 from '@antv/g2';
    
    export default class ChildrenTab  extends Component {
    
        componentDidMount(){
            // fetch('https:/g2.antv.vision/zh/examples/data/fireworks-sales.json')
            // .then(res => res.json())
            // .then(data => {
            //   console.log("data",data)
            //接收父组件props的data
            let data = this.props.data
              const chart = new G2.Chart({
                container: 'container',
                forceFit: true,
                height: 270,
                padding: [ 20, 40, 50, 50 ]
              });
              chart.source(data);
              chart.scale('Data', {
                range: [ 0, 1 ],
                tickCount: 10,
                type: 'timeCat'
              });
              chart.axis('Data', {
                label: {
                  textStyle: {
                    fill: '#aaaaaa'
                  }
                }
              });
              chart.axis('sales', {
                label: {
                  textStyle: {
                    fill: '#aaaaaa'
                  },
                  formatter: text => {
                    return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
                  }
                }
              });
              chart.tooltip({
                crosshairs: 'y',
                share: true
              });
              chart.legend({
                attachLast: true
              });
            //   chart.guide().dataMarker({
            //     top: true,
            //     content: '因政策调整导致销量下滑',
            //     position: [ '2014-01', 1750 ],
            //     style: {
            //       text: {
            //         fontSize: 13
            //       }
            //     },
            //     lineLength: 30
            //   });
      
              chart.line().position('Data*sales');
              chart.area().position('Data*sales');
              chart.render();
            // });
        }
        render() {
            return (
                <>
                    <div id='container'></div>
                </>
            )
        }
        
    }

###  ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200314214738738.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODQwNDg5OQ==,size_16,color_FFFFFF,t_70