TDDO: 解决x轴的问题.
This commit is contained in:
eson
parent
ea0970a763
commit
cbdc812fe4
47
package-lock.json
generated
47
package-lock.json
generated
|
|
@ -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=="
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
13
src/charts/test.js
Normal file
13
src/charts/test.js
Normal file
|
|
@ -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]));
|
||||
}
|
||||
|
||||
|
||||
111
src/charts/trend.tsx
Normal file
111
src/charts/trend.tsx
Normal file
|
|
@ -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 (
|
||||
<ReactEcharts
|
||||
notMerge={true}
|
||||
option={this.getOption(date, data)}
|
||||
style={{ height: '600px', width: '100%' }}
|
||||
className='react_for_echarts' />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Trend;
|
||||
|
|
@ -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
|
||||
<Trend></Trend>
|
||||
</TabPane>
|
||||
<TabPane
|
||||
tab={
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user