)
}
}
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 (
应用关联业务数
{this.props.data_num.num1}
当前警告业务数
{this.props.data_num.num2}
最新警告业务
)
}
}
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 (
{this.state.tabpane.map(item => (
<ChildrenTab
keys={this.state.keys} data={this.state.data}>
))}
)
}
//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,