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
+