You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

77 lines
2.3 KiB

import { Card, Col, DatePicker, Row, Tabs, Tooltip } from 'antd';
import type { RangePickerProps } from 'antd/es/date-picker/generatePicker';
import type moment from 'moment';
import { Column, TinyColumn } from '@ant-design/charts';
import numeral from 'numeral';
import type { DataItem } from '../data';
import styles from '../style.less';
import { InfoCircleOutlined } from '@ant-design/icons';
import { ChartCard } from './Charts';
import { courseBrowseTimesStatistics } from '../service';
import { useRequest } from 'umi';
const topColResponsiveProps = {
xs: 24,
sm: 24,
md: 24,
lg: 24,
xl: 24,
style: { marginBottom: 24 },
};
const TrainingRow = () => {
const { loading: courseBrowseTimesLoading, data: courseBrowseTimesData = null } = useRequest(courseBrowseTimesStatistics); // 课程浏览量
return (
<Row>
<Col {...topColResponsiveProps}>
<div className={styles.salesBar}>
<ChartCard loading={courseBrowseTimesLoading} bordered={false} bodyStyle={{ padding: '20px 24px 8px', marginBottom: '24px' }} title="课程浏览量">
<div className={styles.salesBar}>
<Column
height={300}
forceFit
data={courseBrowseTimesData as any}
xField="course_name"
yField="browse_times"
tooltip={{
formatter: (name, value: number) => {
// const {name, value} = args;
console.log('args', name)
return { name: '浏览量', value: value };
}
}}
xAxis={{
visible: true,
title: {
text: '课程名称',
visible: false,
},
}}
yAxis={{
visible: true,
title: {
text: '课程浏览量',
visible: false,
},
}}
/*
title={{
visible: true,
text: '课程浏览量',
style: {
fontSize: 14,
},
}}*/
/>
</div>
</ChartCard>
</div>
</Col>
</Row>
);
}
export default TrainingRow;