需求：

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>
            </>
        )
    }
    
}