From 3e96865ee02f8b4b87bcfb3b85325b7bc21aab2c Mon Sep 17 00:00:00 2001
From: eson <474420502@qq.com>
Date: Mon, 9 Nov 2020 01:18:17 +0800
Subject: [PATCH 1/4] =?UTF-8?q?TODO:=20=E6=B7=BB=E5=8A=A0=E6=96=B0?=
=?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.vscode/settings.json | 3 +
package-lock.json | 18 ++++--
package.json | 7 +++
src/pages/home.tsx | 131 +++++++++++++++++++-----------------------
src/pages/tabs.tsx | 68 ++++++++++++----------
src/router/router.tsx | 53 ++++++++---------
6 files changed, 143 insertions(+), 137 deletions(-)
create mode 100644 .vscode/settings.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..55712c1
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "typescript.tsdk": "node_modules/typescript/lib"
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 550f4d5..04b0d64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2275,7 +2275,7 @@
},
"@typescript-eslint/eslint-plugin": {
"version": "4.6.1",
- "resolved": "https://registry.npm.taobao.org/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-4.6.1.tgz?cache=0&sync_timestamp=1604339645055&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Feslint-plugin%2Fdownload%2F%40typescript-eslint%2Feslint-plugin-4.6.1.tgz",
+ "resolved": "https://registry.npm.taobao.org/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-4.6.1.tgz",
"integrity": "sha1-mdd+t6AW/VpedJ0sRKfkwxfrfaM=",
"requires": {
"@typescript-eslint/experimental-utils": "4.6.1",
@@ -5349,9 +5349,9 @@
}
},
"eslint": {
- "version": "7.12.1",
- "resolved": "https://registry.npm.taobao.org/eslint/download/eslint-7.12.1.tgz?cache=0&sync_timestamp=1603768145986&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint%2Fdownload%2Feslint-7.12.1.tgz",
- "integrity": "sha1-vZqB+memz9UWVs24iBLOSczsWAE=",
+ "version": "7.13.0",
+ "resolved": "https://registry.npm.taobao.org/eslint/download/eslint-7.13.0.tgz",
+ "integrity": "sha1-fxgBJsDc3vMnv7VLIR14At7MCNo=",
"requires": {
"@babel/code-frame": "^7.0.0",
"@eslint/eslintrc": "^0.2.1",
@@ -6212,7 +6212,7 @@
},
"file-entry-cache": {
"version": "5.0.1",
- "resolved": "https://registry.npm.taobao.org/file-entry-cache/download/file-entry-cache-5.0.1.tgz",
+ "resolved": "https://registry.npm.taobao.org/file-entry-cache/download/file-entry-cache-5.0.1.tgz?cache=0&sync_timestamp=1604832267816&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffile-entry-cache%2Fdownload%2Ffile-entry-cache-5.0.1.tgz",
"integrity": "sha1-yg9u+m3T1WEzP7FFFQZcL6/fQ5w=",
"requires": {
"flat-cache": "^2.0.1"
@@ -6308,7 +6308,7 @@
},
"flat-cache": {
"version": "2.0.1",
- "resolved": "https://registry.npm.taobao.org/flat-cache/download/flat-cache-2.0.1.tgz",
+ "resolved": "https://registry.npm.taobao.org/flat-cache/download/flat-cache-2.0.1.tgz?cache=0&sync_timestamp=1604831838291&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fflat-cache%2Fdownload%2Fflat-cache-2.0.1.tgz",
"integrity": "sha1-XSltbwS9pEpGMKMBQTvbwuwIXsA=",
"requires": {
"flatted": "^2.0.0",
@@ -11472,6 +11472,12 @@
"resolved": "https://registry.npm.taobao.org/prepend-http/download/prepend-http-1.0.4.tgz",
"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
},
+ "prettier": {
+ "version": "2.1.2",
+ "resolved": "https://registry.npm.taobao.org/prettier/download/prettier-2.1.2.tgz?cache=0&sync_timestamp=1600215482255&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fprettier%2Fdownload%2Fprettier-2.1.2.tgz",
+ "integrity": "sha1-MFBwDa4uTItnxMP2Zs24r0BeHOU=",
+ "dev": true
+ },
"pretty-bytes": {
"version": "5.4.1",
"resolved": "https://registry.npm.taobao.org/pretty-bytes/download/pretty-bytes-5.4.1.tgz",
diff --git a/package.json b/package.json
index 4eed9d0..9b1e262 100644
--- a/package.json
+++ b/package.json
@@ -44,5 +44,12 @@
"last 1 firefox version",
"last 1 safari version"
]
+ },
+ "devDependencies": {
+ "@typescript-eslint/eslint-plugin": "^4.6.1",
+ "@typescript-eslint/parser": "^4.6.1",
+ "eslint": "^7.13.0",
+ "eslint-plugin-react": "^7.21.5",
+ "prettier": "2.1.2"
}
}
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 3aa019f..5bd9f76 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -1,83 +1,70 @@
-import React from 'react';
-import { Button, Layout, Menu } from 'antd';
+import React from "react";
+import { Button, Layout, Menu } from "antd";
import {
- MenuUnfoldOutlined,
- MenuFoldOutlined,
- UserOutlined,
- VideoCameraOutlined,
- UploadOutlined,
- LeftCircleFilled,
-} from '@ant-design/icons';
+ MenuUnfoldOutlined,
+ MenuFoldOutlined,
+ UserOutlined,
+ VideoCameraOutlined,
+ UploadOutlined,
+ LeftCircleFilled,
+} from "@ant-design/icons";
import "./home.css";
-import ContentTabs from './tabs';
-import { HashRouter, Link, Redirect, Route, Switch} from 'react-router-dom';
-import { any } from 'prop-types';
-
+import ContentTabs from "./tabs";
+import { HashRouter, Link, Redirect, Route, Switch } from "react-router-dom";
+import { Console } from "console";
const { Header, Sider, Content } = Layout;
class Home extends React.Component {
- state = {
- collapsed: false,
- };
+ state = {
+ collapsed: false,
+ };
- toggle = () => {
- this.setState({
- collapsed: !this.state.collapsed,
- });
- };
+ toggle = () => {
+ this.setState({
+ collapsed: !this.state.collapsed,
+ });
+ return;
+ };
- render() {
- var props:any = this.props;
- const { match } = props;
- console.log();
- return (
- // var props:any = this.props;
-
-
+ render() {
+ const props: any = this.props;
+ const { match } = props;
+ console.log("home");
+ return (
+ // var props:any = this.props;
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
- ...{console.log("tab1 redirect")}
-
-
- {/* */}
-
-
-
-
-
-
- );
- }
+
+
+ {/* */}
+
+
+ ...{console.log("redirect tab1")}
+
+
+
+
+
+
+
+
+ );
+ }
}
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/src/pages/tabs.tsx b/src/pages/tabs.tsx
index 0e34806..06e4e08 100644
--- a/src/pages/tabs.tsx
+++ b/src/pages/tabs.tsx
@@ -1,37 +1,47 @@
-import { AndroidOutlined, AppleOutlined } from '@ant-design/icons';
-import { Tabs } from 'antd';
-import React from 'react';
+import { AndroidOutlined, AppleOutlined } from "@ant-design/icons";
+import { Tabs } from "antd";
+import React from "react";
const { TabPane } = Tabs;
class ContentTabs extends React.Component {
-
+ render() {
+ const props: any = this.props;
-
- render() {
- var props:any = this.props;
- const {location, match} = props;
- const {state} = location;
- console.log(props);
- var key = match.params.id;
- console.log(key);
+ const { match } = props;
+ // const {state} = location;
+ // console.log(props);
+ const key = match.params.id === undefined ? "tab1" : match.params.id;
- return (
-
- Tab 1}
- key="tab1"
- >
- Tab 1
-
- Tab 2}
- key="tab2"
- >
- Tab 2
-
-
- )
- }
+ console.log(key);
+
+ return (
+
+
+
+ Tab 1
+
+ }
+ key="tab1"
+ >
+ Tab 1
+
+
+
+ Tab 2
+
+ }
+ key="tab2"
+ >
+ Tab 2
+
+
+ );
+ }
}
-export default ContentTabs;
\ No newline at end of file
+export default ContentTabs;
diff --git a/src/router/router.tsx b/src/router/router.tsx
index 2195125..e479b61 100644
--- a/src/router/router.tsx
+++ b/src/router/router.tsx
@@ -1,35 +1,28 @@
-
-import React from 'react';
-import { BrowserRouter, Route, Switch, HashRouter, Redirect, Link } from 'react-router-dom';
+import React from "react";
+import {
+ BrowserRouter,
+ Route,
+ Switch,
+ HashRouter,
+ Redirect,
+ Link,
+} from "react-router-dom";
-
-import Home from '../pages/home';
+import Home from "../pages/home";
class HomeRouter extends React.Component {
-
- render() {
- return (
-
-
-
-
-
- ...{console.log("redirect")}
-
-
-
-
-
-
-
-
-
- {/* */}
-
-
- )
- }
-}
+ render() {
+ return (
+
+
+
+ ...{console.log("redirect")}
+
+
+
+
+ );
+ }
+}
export default HomeRouter;
-
From ea0970a76345a538897663eb1daf54647f520c3f Mon Sep 17 00:00:00 2001
From: eson
Date: Mon, 9 Nov 2020 18:51:13 +0800
Subject: [PATCH 2/4] =?UTF-8?q?TODO:=20=E8=AE=BE=E8=AE=A1=E9=9C=80?=
=?UTF-8?q?=E8=A6=81=E7=9A=84=E5=86=85=E5=AE=B9.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package-lock.json | 44 ++++++++++++++++++++++----------------------
src/pages/home.tsx | 9 +++++----
src/pages/tabs.tsx | 7 +++----
3 files changed, 30 insertions(+), 30 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 04b0d64..9379cc0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2275,8 +2275,8 @@
},
"@typescript-eslint/eslint-plugin": {
"version": "4.6.1",
- "resolved": "https://registry.npm.taobao.org/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-4.6.1.tgz",
- "integrity": "sha1-mdd+t6AW/VpedJ0sRKfkwxfrfaM=",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.6.1.tgz",
+ "integrity": "sha512-SNZyflefTMK2JyrPfFFzzoy2asLmZvZJ6+/L5cIqg4HfKGiW2Gr1Go1OyEVqne/U4QwmoasuMwppoBHWBWF2nA==",
"requires": {
"@typescript-eslint/experimental-utils": "4.6.1",
"@typescript-eslint/scope-manager": "4.6.1",
@@ -2302,8 +2302,8 @@
},
"@typescript-eslint/parser": {
"version": "4.6.1",
- "resolved": "https://registry.npm.taobao.org/@typescript-eslint/parser/download/@typescript-eslint/parser-4.6.1.tgz",
- "integrity": "sha1-uAG/9ntTbsxKhArJKJuivlfgJCg=",
+ "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.6.1.tgz",
+ "integrity": "sha512-lScKRPt1wM9UwyKkGKyQDqf0bh6jm8DQ5iN37urRIXDm16GEv+HGEmum2Fc423xlk5NUOkOpfTnKZc/tqKZkDQ==",
"requires": {
"@typescript-eslint/scope-manager": "4.6.1",
"@typescript-eslint/types": "4.6.1",
@@ -2799,8 +2799,8 @@
},
"array.prototype.flatmap": {
"version": "1.2.3",
- "resolved": "https://registry.npm.taobao.org/array.prototype.flatmap/download/array.prototype.flatmap-1.2.3.tgz",
- "integrity": "sha1-HBP4SheFZgQt1j3kQURA25Ii5EM=",
+ "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz",
+ "integrity": "sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==",
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.17.0-next.1",
@@ -5652,8 +5652,8 @@
},
"eslint-plugin-react": {
"version": "7.21.5",
- "resolved": "https://registry.npm.taobao.org/eslint-plugin-react/download/eslint-plugin-react-7.21.5.tgz?cache=0&sync_timestamp=1603161576406&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-plugin-react%2Fdownload%2Feslint-plugin-react-7.21.5.tgz",
- "integrity": "sha1-ULIaQSuVdL/gWyHbF26LezsVv/M=",
+ "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.21.5.tgz",
+ "integrity": "sha512-8MaEggC2et0wSF6bUeywF7qQ46ER81irOdWS4QWxnnlAEsnzeBevk1sWh7fhpCghPpXb+8Ks7hvaft6L/xsR6g==",
"requires": {
"array-includes": "^3.1.1",
"array.prototype.flatmap": "^1.2.3",
@@ -5670,8 +5670,8 @@
"dependencies": {
"doctrine": {
"version": "2.1.0",
- "resolved": "https://registry.npm.taobao.org/doctrine/download/doctrine-2.1.0.tgz",
- "integrity": "sha1-XNAfwQFiG0LEzX9dGmYkNxbT850=",
+ "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+ "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
"requires": {
"esutils": "^2.0.2"
}
@@ -6212,7 +6212,7 @@
},
"file-entry-cache": {
"version": "5.0.1",
- "resolved": "https://registry.npm.taobao.org/file-entry-cache/download/file-entry-cache-5.0.1.tgz?cache=0&sync_timestamp=1604832267816&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffile-entry-cache%2Fdownload%2Ffile-entry-cache-5.0.1.tgz",
+ "resolved": "https://registry.npm.taobao.org/file-entry-cache/download/file-entry-cache-5.0.1.tgz",
"integrity": "sha1-yg9u+m3T1WEzP7FFFQZcL6/fQ5w=",
"requires": {
"flat-cache": "^2.0.1"
@@ -6308,7 +6308,7 @@
},
"flat-cache": {
"version": "2.0.1",
- "resolved": "https://registry.npm.taobao.org/flat-cache/download/flat-cache-2.0.1.tgz?cache=0&sync_timestamp=1604831838291&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fflat-cache%2Fdownload%2Fflat-cache-2.0.1.tgz",
+ "resolved": "https://registry.npm.taobao.org/flat-cache/download/flat-cache-2.0.1.tgz",
"integrity": "sha1-XSltbwS9pEpGMKMBQTvbwuwIXsA=",
"requires": {
"flatted": "^2.0.0",
@@ -7526,8 +7526,8 @@
},
"internal-slot": {
"version": "1.0.2",
- "resolved": "https://registry.npm.taobao.org/internal-slot/download/internal-slot-1.0.2.tgz",
- "integrity": "sha1-nC6fs82OXkJWxvRf4xAGf8+jeKM=",
+ "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.2.tgz",
+ "integrity": "sha512-2cQNfwhAfJIkU4KZPkDI+Gj5yNNnbqi40W9Gge6dfnk4TocEVm00B3bdiL+JINrbGJil2TeHvM4rETGzk/f/0g==",
"requires": {
"es-abstract": "^1.17.0-next.1",
"has": "^1.0.3",
@@ -9924,8 +9924,8 @@
},
"object.fromentries": {
"version": "2.0.2",
- "resolved": "https://registry.npm.taobao.org/object.fromentries/download/object.fromentries-2.0.2.tgz",
- "integrity": "sha1-SgnJubs4Q90PiazbUXp5TU81Wsk=",
+ "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.2.tgz",
+ "integrity": "sha512-r3ZiBH7MQppDJVLx6fhD618GKNG40CZYH9wgwdhKxBDDbQgjeWGGd4AtkZad84d291YxvWe7bJGuE65Anh0dxQ==",
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.17.0-next.1",
@@ -13618,8 +13618,8 @@
},
"side-channel": {
"version": "1.0.3",
- "resolved": "https://registry.npm.taobao.org/side-channel/download/side-channel-1.0.3.tgz",
- "integrity": "sha1-zcRrBXVQu6tjcGIQg4311MGVGcM=",
+ "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.3.tgz",
+ "integrity": "sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==",
"requires": {
"es-abstract": "^1.18.0-next.0",
"object-inspect": "^1.8.0"
@@ -13627,8 +13627,8 @@
"dependencies": {
"es-abstract": {
"version": "1.18.0-next.1",
- "resolved": "https://registry.npm.taobao.org/es-abstract/download/es-abstract-1.18.0-next.1.tgz?cache=0&sync_timestamp=1601502719982&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fes-abstract%2Fdownload%2Fes-abstract-1.18.0-next.1.tgz",
- "integrity": "sha1-bjoKS9pxflAjqzuOkL7DYQjSLGg=",
+ "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz",
+ "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==",
"requires": {
"es-to-primitive": "^1.2.1",
"function-bind": "^1.1.1",
@@ -14213,8 +14213,8 @@
},
"string.prototype.matchall": {
"version": "4.0.2",
- "resolved": "https://registry.npm.taobao.org/string.prototype.matchall/download/string.prototype.matchall-4.0.2.tgz",
- "integrity": "sha1-SLtRAyb7n962ozzqqBpuoE73ZI4=",
+ "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz",
+ "integrity": "sha512-N/jp6O5fMf9os0JU3E72Qhf590RSRZU/ungsL/qJUYVTNv7hTG0P/dbPjxINVN9jpscu3nzYwKESU3P3RY5tOg==",
"requires": {
"define-properties": "^1.1.3",
"es-abstract": "^1.17.0",
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 5bd9f76..594a7b8 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -12,6 +12,7 @@ import "./home.css";
import ContentTabs from "./tabs";
import { HashRouter, Link, Redirect, Route, Switch } from "react-router-dom";
import { Console } from "console";
+import PropTypes from "prop-types";
const { Header, Sider, Content } = Layout;
@@ -28,8 +29,11 @@ class Home extends React.Component {
};
render() {
+ // const props: = this.props;
+ // const { match } = this.props;
const props: any = this.props;
const { match } = props;
+
console.log("home");
return (
// var props:any = this.props;
@@ -53,12 +57,9 @@ class Home extends React.Component {
{/* */}
-
- ...{console.log("redirect tab1")}
-
+
-
diff --git a/src/pages/tabs.tsx b/src/pages/tabs.tsx
index 06e4e08..b35f999 100644
--- a/src/pages/tabs.tsx
+++ b/src/pages/tabs.tsx
@@ -1,20 +1,19 @@
import { AndroidOutlined, AppleOutlined } from "@ant-design/icons";
import { Tabs } from "antd";
import React from "react";
+ import PropTypes from 'prop-types';
const { TabPane } = Tabs;
class ContentTabs extends React.Component {
+
render() {
const props: any = this.props;
-
const { match } = props;
- // const {state} = location;
- // console.log(props);
const key = match.params.id === undefined ? "tab1" : match.params.id;
console.log(key);
-
+ // console.log(props);
return (
Date: Fri, 27 Nov 2020 18:50:15 +0800
Subject: [PATCH 3/4] =?UTF-8?q?TDDO:=20=E8=A7=A3=E5=86=B3x=E8=BD=B4?=
=?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package-lock.json | 47 ++++++++++++++++++
package.json | 3 ++
src/charts/test.js | 13 +++++
src/charts/trend.tsx | 111 +++++++++++++++++++++++++++++++++++++++++++
src/pages/tabs.tsx | 5 +-
5 files changed, 177 insertions(+), 2 deletions(-)
create mode 100644 src/charts/test.js
create mode 100644 src/charts/trend.tsx
diff --git a/package-lock.json b/package-lock.json
index 9379cc0..7e7268d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2039,6 +2039,14 @@
"@babel/types": "^7.3.0"
}
},
+ "@types/echarts": {
+ "version": "4.9.2",
+ "resolved": "https://registry.npmjs.org/@types/echarts/-/echarts-4.9.2.tgz",
+ "integrity": "sha512-ycAmdt/PbQEuj+9cI9O0mZV6Dd+R1+ngs9S8P7Cbxj8RWXbL8NOvnzXdJRvR/+9lx/hq/O1rdLxXYXXTVImujw==",
+ "requires": {
+ "@types/zrender": "*"
+ }
+ },
"@types/eslint": {
"version": "7.2.4",
"resolved": "https://registry.npm.taobao.org/@types/eslint/download/@types/eslint-7.2.4.tgz?cache=0&sync_timestamp=1602173890460&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Feslint%2Fdownload%2F%40types%2Feslint-7.2.4.tgz",
@@ -2273,6 +2281,11 @@
"resolved": "https://registry.npm.taobao.org/@types/yargs-parser/download/@types/yargs-parser-15.0.0.tgz?cache=0&sync_timestamp=1596841192658&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fyargs-parser%2Fdownload%2F%40types%2Fyargs-parser-15.0.0.tgz",
"integrity": "sha1-yz+fdBhp4gzOMw/765JxWQSDiC0="
},
+ "@types/zrender": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/@types/zrender/-/zrender-4.0.0.tgz",
+ "integrity": "sha512-s89GOIeKFiod2KSqHkfd2rzx+T2DVu7ihZCBEBnhFrzvQPUmzvDSBot9Fi1DfMQm9Odg+rTqoMGC38RvrwJK2w=="
+ },
"@typescript-eslint/eslint-plugin": {
"version": "4.6.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.6.1.tgz",
@@ -5078,6 +5091,30 @@
"safer-buffer": "^2.1.0"
}
},
+ "echarts": {
+ "version": "4.9.0",
+ "resolved": "https://registry.npmjs.org/echarts/-/echarts-4.9.0.tgz",
+ "integrity": "sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==",
+ "requires": {
+ "zrender": "4.3.2"
+ }
+ },
+ "echarts-for-react": {
+ "version": "2.0.16",
+ "resolved": "https://registry.npmjs.org/echarts-for-react/-/echarts-for-react-2.0.16.tgz",
+ "integrity": "sha512-VmHCktay2qKt/+wpL/C7thbvIa7dYBEey0/U4Zaqo+qeA4wx+uiCd5NeCsPIhD/0Pv+2qqNswqiNiUCtcgccOw==",
+ "requires": {
+ "fast-deep-equal": "^2.0.1",
+ "size-sensor": "^1.0.0"
+ },
+ "dependencies": {
+ "fast-deep-equal": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+ "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
+ }
+ }
+ },
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npm.taobao.org/ee-first/download/ee-first-1.1.1.tgz",
@@ -13671,6 +13708,11 @@
"resolved": "https://registry.npm.taobao.org/sisteransi/download/sisteransi-1.0.5.tgz",
"integrity": "sha1-E01oEpd1ZDfMBcoBNw06elcQde0="
},
+ "size-sensor": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/size-sensor/-/size-sensor-1.0.1.tgz",
+ "integrity": "sha512-QTy7MnuugCFXIedXRpUSk9gUnyNiaxIdxGfUjr8xxXOqIB3QvBUYP9+b51oCg2C4dnhaeNk/h57TxjbvoJrJUA=="
+ },
"slash": {
"version": "3.0.0",
"resolved": "https://registry.npm.taobao.org/slash/download/slash-3.0.0.tgz?cache=0&sync_timestamp=1589682715547&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fslash%2Fdownload%2Fslash-3.0.0.tgz",
@@ -16777,6 +16819,11 @@
"integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA="
}
}
+ },
+ "zrender": {
+ "version": "4.3.2",
+ "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.2.tgz",
+ "integrity": "sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g=="
}
}
}
diff --git a/package.json b/package.json
index 9b1e262..138f3a3 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
+ "@types/echarts": "^4.9.2",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^16.9.53",
@@ -13,6 +14,8 @@
"@types/react-router": "^5.1.8",
"@types/react-router-dom": "^5.1.6",
"antd": "^4.8.0",
+ "echarts": "^4.9.0",
+ "echarts-for-react": "^2.0.16",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
diff --git a/src/charts/test.js b/src/charts/test.js
new file mode 100644
index 0000000..7b0f632
--- /dev/null
+++ b/src/charts/test.js
@@ -0,0 +1,13 @@
+var base = +new Date(1998, 9, 3);
+var oneDay = 60 * 1000;
+var date = [];
+
+var data = [Math.random() * 1000];
+
+for (var i = 1; i < 1000000; i++) {
+ var now = new Date(base += oneDay);
+ date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/') + " " + [now.getHours(), now.getMinutes()].join(":") );
+ data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
+}
+
+
diff --git a/src/charts/trend.tsx b/src/charts/trend.tsx
new file mode 100644
index 0000000..2e28514
--- /dev/null
+++ b/src/charts/trend.tsx
@@ -0,0 +1,111 @@
+
+import React from "react";
+
+import ReactEcharts from "echarts-for-react";
+import echarts from 'echarts';
+
+class Trend extends React.Component {
+
+ getOption(tsdata: any, data: any) :any {
+ var option = {
+ tooltip: {
+ trigger: 'axis',
+ position: function (pt: any) {
+ return [pt[0], '10%'];
+ }
+ },
+ title: {
+ left: 'center',
+ text: '大数据量面积图',
+ },
+ toolbox: {
+ feature: {
+ dataZoom: {
+ yAxisIndex: 'none'
+ },
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'time',
+ boundaryGap: false,
+ interval: 20,
+ data: tsdata
+ },
+ yAxis: {
+ type: 'value',
+ boundaryGap: [0, '10%']
+ },
+ dataZoom: [{
+ type: 'inside',
+ start: 0,
+ end: 10
+ }, {
+ start: 0,
+ end: 10,
+ handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+ handleSize: '80%',
+ handleStyle: {
+ color: '#fff',
+ shadowBlur: 3,
+ shadowColor: 'rgba(0, 0, 0, 0.6)',
+ shadowOffsetX: 2,
+ shadowOffsetY: 2
+ }
+ }],
+ series: [
+ {
+ name: '模拟数据',
+ type: 'line',
+ smooth: true,
+ symbol: 'none',
+ sampling: 'average',
+ itemStyle: {
+ color: 'rgb(255, 70, 131)'
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgb(255, 158, 68)'
+ }, {
+ offset: 1,
+ color: 'rgb(255, 70, 131)'
+ }])
+ },
+ data: data
+ }
+ ]
+ };
+
+ return option;
+ }
+
+ render() {
+
+
+ var base = +new Date(1998, 9, 3);
+ var oneDay = 60 * 1000;
+ var date = [];
+
+ var data = [Math.random() * 1000];
+
+ for (var i = 1; i < 1000; i++) {
+ var now = new Date(base += oneDay);
+ date.push(now );
+ data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
+
+ }
+
+
+ return (
+
+ )
+ }
+}
+
+export default Trend;
\ No newline at end of file
diff --git a/src/pages/tabs.tsx b/src/pages/tabs.tsx
index b35f999..2cb54ae 100644
--- a/src/pages/tabs.tsx
+++ b/src/pages/tabs.tsx
@@ -1,7 +1,8 @@
import { AndroidOutlined, AppleOutlined } from "@ant-design/icons";
import { Tabs } from "antd";
import React from "react";
- import PropTypes from 'prop-types';
+
+import Trend from "../charts/trend";
const { TabPane } = Tabs;
@@ -25,7 +26,7 @@ class ContentTabs extends React.Component {
}
key="tab1"
>
- Tab 1
+
Date: Mon, 30 Nov 2020 19:00:35 +0800
Subject: [PATCH 4/4] TODO: last
---
src/charts/trend.tsx | 27 ++++++++++-----------------
1 file changed, 10 insertions(+), 17 deletions(-)
diff --git a/src/charts/trend.tsx b/src/charts/trend.tsx
index 2e28514..9e3fdce 100644
--- a/src/charts/trend.tsx
+++ b/src/charts/trend.tsx
@@ -6,7 +6,12 @@ import echarts from 'echarts';
class Trend extends React.Component {
- getOption(tsdata: any, data: any) :any {
+ state = {
+ tdata: null,
+ sdata: null
+ }
+
+ getOption(tdata: any, sdata: any) :any {
var option = {
tooltip: {
trigger: 'axis',
@@ -31,7 +36,7 @@ class Trend extends React.Component {
type: 'time',
boundaryGap: false,
interval: 20,
- data: tsdata
+ data: tdata
},
yAxis: {
type: 'value',
@@ -73,7 +78,7 @@ class Trend extends React.Component {
color: 'rgb(255, 70, 131)'
}])
},
- data: data
+ data: sdata
}
]
};
@@ -83,25 +88,13 @@ class Trend extends React.Component {
render() {
-
- var base = +new Date(1998, 9, 3);
- var oneDay = 60 * 1000;
- var date = [];
-
- var data = [Math.random() * 1000];
-
- for (var i = 1; i < 1000; i++) {
- var now = new Date(base += oneDay);
- date.push(now );
- data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
-
- }
+ const { tdata, sdata } = this.state;
return (
)