diff --git a/admin/package.json b/admin/package.json index fa91771..4150cdf 100644 --- a/admin/package.json +++ b/admin/package.json @@ -49,7 +49,7 @@ "not ie <= 10" ], "dependencies": { - "@ant-design/charts": "^0.9.4", + "@ant-design/charts": "^1.3.5", "@ant-design/icons": "^4.5.0", "@ant-design/pro-card": "^1.18.23", "@ant-design/pro-descriptions": "^1.6.8", diff --git a/admin/src/pages/demo/index.tsx b/admin/src/pages/demo/index.tsx index 4f9fba5..9220aa7 100644 --- a/admin/src/pages/demo/index.tsx +++ b/admin/src/pages/demo/index.tsx @@ -1,8 +1,9 @@ import { DingdingOutlined, UploadOutlined } from '@ant-design/icons'; import { Button, Card, Steps, Result, Descriptions, Modal, Input, Upload, Popconfirm } from 'antd'; -import { Fragment, useRef, useState } from 'react'; +import { Fragment, useEffect, useRef, useState } from 'react'; import { GridContent } from '@ant-design/pro-layout'; - +import { Line } from '@ant-design/charts'; +import { DualAxes } from "@ant-design/charts"; import styles from './index.less'; import ReactQuill from 'react-quill'; import 'react-quill/dist/quill.snow.css' @@ -16,7 +17,102 @@ const { Step } = Steps; export default () => { const uuid = uuidv4() console.log('uuid', uuidv4()); - + const data = [ + { + year: "1991", + value: 3, + count: 10 + }, + { + year: "1992", + value: 4, + count: 4 + }, + { + year: "1993", + value: 3.5, + count: 5 + }, + { + year: "1994", + value: 5, + count: 5 + }, + { + year: "1995", + value: 4.9, + count: 4.9 + }, + { + year: "1996", + value: 6, + count: 35 + }, + { + year: "1997", + value: 7, + count: 7 + }, + { + year: "1998", + value: 9, + count: 1 + }, + { + year: "1999", + value: 13, + count: 20 + } + ]; + const data2 = [ + { + year: "1991", + value: 30, + count: 100 + }, + { + year: "1992", + value: 40, + count: 40 + }, + { + year: "1993", + value: 3.5, + count: 50 + }, + { + year: "1994", + value: 5, + count: 50 + }, + { + year: "1995", + value: 40.9, + count: 24.9 + }, + { + year: "1996", + value: 6, + count: 395 + }, + { + year: "1997", + value: 7, + count: 79 + }, + { + year: "1998", + value: 99, + count: 1 + }, + { + year: "1999", + value: 193, + count: 20 + } + ]; + + const [modalVisible, handleModalVisible] = useState(false); const saveInputRef = useRef(); //const currentRow = {course_name:'课程0001'}; @@ -27,6 +123,17 @@ export default () => { {dataIndex: "course_name", hideInDescriptions: false, hideInForm: false,hideInSearch: true,hideInTable: false, title: "课程名称1", valueType: "text"}, {} ]; + const [chartData, setChartData] = useState([data, data]); + useEffect(() => { + setInterval(() => { + setChartData(Math.random() > 0.5 ? [data, data] : [data2, data2]); + }, 1000); + }, []); + const config = { + data: chartData, + xField: "year", + yField: ["value", "count"] + }; return( <> @@ -103,6 +210,8 @@ export default () => { Delete + + ) };