Merge branch 'master' of http://474420502.top/eson/datagod
This commit is contained in:
eson
commit
f14e69c6bd
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"typescript.tsdk": "node_modules/typescript/lib"
|
||||
}
|
||||
11
package-lock.json
generated
11
package-lock.json
generated
|
|
@ -10405,6 +10405,12 @@
|
|||
"resolved": "https://registry.npmjs.org/prepend-http/-/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.npmjs.org/pretty-bytes/-/pretty-bytes-5.4.1.tgz",
|
||||
|
|
@ -12243,6 +12249,11 @@
|
|||
"resolved": "https://registry.npmjs.org/size-sensor/-/size-sensor-1.0.1.tgz",
|
||||
"integrity": "sha512-QTy7MnuugCFXIedXRpUSk9gUnyNiaxIdxGfUjr8xxXOqIB3QvBUYP9+b51oCg2C4dnhaeNk/h57TxjbvoJrJUA=="
|
||||
},
|
||||
"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": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
|
||||
|
|
|
|||
19
package.json
19
package.json
|
|
@ -3,12 +3,12 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@craco/craco": "^5.6.4",
|
||||
"@testing-library/jest-dom": "^5.9.0",
|
||||
"@testing-library/react": "^11.0.0",
|
||||
"@testing-library/user-event": "^11.1.0",
|
||||
"antd": "^4.9.0",
|
||||
"craco-less": "^1.17.0",
|
||||
"@craco/craco": "^5.9.0",
|
||||
"@testing-library/jest-dom": "^5.11.6",
|
||||
"@testing-library/react": "^11.2.2",
|
||||
"@testing-library/user-event": "^12.3.0",
|
||||
"antd": "^4.9.1",
|
||||
"craco-less": "^1.17.1",
|
||||
"echarts": "^4.9.0",
|
||||
"echarts-for-react": "^2.0.16",
|
||||
"react": "^16.13.1",
|
||||
|
|
@ -35,5 +35,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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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]));
|
||||
}
|
||||
|
||||
|
||||
104
src/charts/trend.tsx
Normal file
104
src/charts/trend.tsx
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
|
||||
import React from "react";
|
||||
|
||||
import ReactEcharts from "echarts-for-react";
|
||||
import echarts from 'echarts';
|
||||
|
||||
class Trend extends React.Component {
|
||||
|
||||
state = {
|
||||
tdata: null,
|
||||
sdata: null
|
||||
}
|
||||
|
||||
getOption(tdata: any, sdata: 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: tdata
|
||||
},
|
||||
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: sdata
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
return option;
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
const { tdata, sdata } = this.state;
|
||||
|
||||
|
||||
return (
|
||||
<ReactEcharts
|
||||
notMerge={true}
|
||||
option={this.getOption(tdata, sdata)}
|
||||
style={{ height: '600px', width: '100%' }}
|
||||
className='react_for_echarts' />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Trend;
|
||||
Loading…
Reference in New Issue
Block a user