diff --git a/package.json b/package.json index 13535dbd3aefdc6476196789a5ecebbde0283fa4..5d0760e25a41016e27e44b63452964fc424857b0 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "antd": "^4.18.3", "axios": "^0.25.0", "classnames": "^2.3.1", + "echarts": "^5.3.0", "js-cookie": "^3.0.1", "lodash": "^4.17.21", "lowdb": "^3.0.0", diff --git a/src/components/Chart/LineChart/index.tsx b/src/components/Chart/LineChart/index.tsx new file mode 100644 index 0000000000000000000000000000000000000000..469264c0d086d00695ea61bd07e5776a3723ebd7 --- /dev/null +++ b/src/components/Chart/LineChart/index.tsx @@ -0,0 +1,71 @@ +import React, { useEffect, useRef } from 'react' +import * as echarts from 'echarts' +import { Empty, Spin } from 'antd' + +// 给props添加类型检查 +export interface IProps { + loading: boolean // 加载标识 + title?: string //图表的标题（为string类型） + xData: string[] //图表x轴数据的数组（数字里面每一项都为string类型） + seriesData: number[] //跟x轴每个坐标点对应的数据（数字里面每一项都为number类型） + width?: number // 图表宽度 + height?: number // 图表高度 +} + +const LineChart: React.FC = (props) => { + const { loading, title, xData, seriesData, width = 600, height = 300 } = props + const chartRef: any = useRef() //拿到DOM容器 + + // 每当props改变的时候就会实时重新渲染 + useEffect(() => { + if (chartRef.current) { + initChart() + } + }, [props]) + + /** + * 初始化Echarts + */ + const initChart = () => { + const chart = echarts.init(chartRef.current) //echart初始化容器 + let option = { + //配置项(数据都来自于props) + title: { + text: title || '', + }, + xAxis: { + type: 'category', + data: xData, + }, + yAxis: { + type: 'value', + }, + tooltip: { + trigger: 'axis', + }, + series: [ + { + data: seriesData, + type: 'line', + }, + ], + } + + chart.setOption(option) + window.onresize = () => { + chart.resize() + } + } + + return ( + + {xData.length && seriesData.length ? ( +
+ ) : ( + + )} + + ) +} + +export default LineChart diff --git a/src/pages/chart/bar/index.tsx b/src/pages/chart/bar/index.tsx index 41e9f07e8f392547984355439c1406d73e62f12e..c9802ed584a5742f64a7f5104fb37844987cbb9f 100644 --- a/src/pages/chart/bar/index.tsx +++ b/src/pages/chart/bar/index.tsx @@ -1,12 +1,43 @@ -import React from 'react' -import { Space } from 'antd' -import { PageContainer } from '@ant-design/pro-layout' +import React, { useEffect, useRef } from 'react' +import * as echarts from 'echarts' +import { Card } from 'antd' + +const barChart: React.FC = (props) => { + const chartRef: any = useRef() //拿到DOM容器 + const initChart = () => { + let myChart = echarts.init(chartRef.current) + myChart.clear() + let option = { + xAxis: { + type: 'category', + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + }, + yAxis: { + type: 'value', + }, + tooltip: { + trigger: 'item', + }, + series: [ + { + data: [120, 200, 150, 80, 70, 110, 130], + type: 'bar', + }, + ], + } + + option && myChart.setOption(option) + } + + useEffect(() => { + initChart() + }, []) -const StandardPages: React.FC = () => { return ( - - My pages Bar - + +
+ ) } -export default StandardPages + +export default barChart diff --git a/src/pages/chart/line/index.tsx b/src/pages/chart/line/index.tsx index e9814cd5c62b2294167c6418a04ca61a6f7b7f4e..997f4a8ef19df00c9042dd0270dca318d24b1a42 100644 --- a/src/pages/chart/line/index.tsx +++ b/src/pages/chart/line/index.tsx @@ -1,12 +1,26 @@ -import React from 'react' -import { Space } from 'antd' +import React, { useEffect, useRef } from 'react' +import { Card, Space } from 'antd' import { PageContainer } from '@ant-design/pro-layout' +import LineChart from '@/components/Chart/LineChart' const StandardPages: React.FC = () => { + const lineChartData = { + loading: false, + //折线图模拟数据 + xData: ['2021/08/13', '2021/08/14', '2021/08/15', '2021/08/16', '2021/08/17', '2021/08/18'], + seriesData: [22, 19, 88, 66, 5, 90], + } + return ( - - My pages Line - + + + ) } export default StandardPages diff --git a/src/pages/chart/pie/index.tsx b/src/pages/chart/pie/index.tsx index 159626937c9123b10f1104c7f3bf6c9ea3c93857..0429f6d36216116ca06643ec1195cd3153813696 100644 --- a/src/pages/chart/pie/index.tsx +++ b/src/pages/chart/pie/index.tsx @@ -1,12 +1,55 @@ -import React from 'react' -import { Space } from 'antd' -import { PageContainer } from '@ant-design/pro-layout' +import React, { useEffect, useRef } from 'react' +import * as echarts from 'echarts' +import { Card } from 'antd' + +const pieChart: React.FC = (props) => { + const chartRef: any = useRef() //拿到DOM容器 + const initChart = () => { + let myChart = echarts.init(chartRef.current) + myChart.clear() + let option = { + tooltip: { + trigger: 'item', + }, + legend: { + left: 'center', + top: '5%', + }, + series: [ + { + name: '访问来源', + type: 'pie', + radius: '50%', + data: [ + { value: 1048, name: '搜索引擎' }, + { value: 735, name: '直接访问' }, + { value: 580, name: '邮件营销' }, + { value: 484, name: '联盟广告' }, + { value: 300, name: '视频广告' }, + ], + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)', + }, + }, + }, + ], + } + + option && myChart.setOption(option) + } + + useEffect(() => { + initChart() + }, []) -const StandardPages: React.FC = () => { return ( - - My pages Pie - + +
+ ) } -export default StandardPages + +export default pieChart