From d4127156421943ac5b779893a1f53dfe3e743855 Mon Sep 17 00:00:00 2001 From: eson Date: Wed, 2 Dec 2020 19:10:04 +0800 Subject: [PATCH] =?UTF-8?q?TODO:=20=20=E8=A7=A3=E5=86=B3x=E8=BD=B4?= =?UTF-8?q?=E3=80=80=E6=8F=90=E7=A4=BA=E3=80=80=E4=B8=8D=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E5=88=86=E5=A6=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 +- src/App.js | 10 ++- src/Config.js | 8 ++ src/Home.js | 71 +++++++-------- src/charts/Base.js | 34 +++++++ src/charts/Trend.js | 215 +++++++++++++++++++++++++------------------- 6 files changed, 207 insertions(+), 133 deletions(-) create mode 100644 src/Config.js create mode 100644 src/charts/Base.js diff --git a/.gitignore b/.gitignore index 0ae4d04..51eb34f 100644 --- a/.gitignore +++ b/.gitignore @@ -15,4 +15,4 @@ build npm-debug.log # screen -sceeenlog.* +screenlog.* diff --git a/src/App.js b/src/App.js index f0f3f31..58c255f 100644 --- a/src/App.js +++ b/src/App.js @@ -11,18 +11,20 @@ import { Typography, Space, Divider, + ConfigProvider, } from 'antd'; import './App.less'; import Home from './Home'; import HomeRouter from './Router'; -const { Option } = Select; -const { Title } = Typography; +import zh_CN from 'antd/lib/locale-provider/zh_CN'; +import 'moment/locale/zh-cn'; + const App = () => ( - <> + - + ); export default App; \ No newline at end of file diff --git a/src/Config.js b/src/Config.js new file mode 100644 index 0000000..0fe53aa --- /dev/null +++ b/src/Config.js @@ -0,0 +1,8 @@ + + + +var config = { + trendurl : "http://localhost:6123/api/data" +} + +export default config; \ No newline at end of file diff --git a/src/Home.js b/src/Home.js index d65c018..598a0a2 100644 --- a/src/Home.js +++ b/src/Home.js @@ -9,7 +9,7 @@ import { UploadOutlined, } from '@ant-design/icons'; import { HashRouter, Link, Route, Switch } from 'react-router-dom'; - + import Trend from './charts/Trend'; const { Header, Sider, Content } = Layout; @@ -26,62 +26,59 @@ class Home extends React.Component { }; render() { - console.log(window.location.hash); + console.log(window.location.hash); return ( - - - + + +
- - - - }> - nav 1 + + + + }> + nav 1 - - - - }> - nav 2 + + + + }> + playerduo - - + + + + }> + nav 3 - }> - nav 3 - - + - + - -
- - + +
- + - - - + + + - - - + ); } } diff --git a/src/charts/Base.js b/src/charts/Base.js new file mode 100644 index 0000000..179d9d8 --- /dev/null +++ b/src/charts/Base.js @@ -0,0 +1,34 @@ + +function dateFormat(fmt, date) { + let ret; + const opt = { + "Y+": date.getFullYear().toString(), // 年 + "m+": (date.getMonth() + 1).toString(), // 月 + "d+": date.getDate().toString(), // 日 + "H+": date.getHours().toString(), // 时 + "M+": date.getMinutes().toString(), // 分 + "S+": date.getSeconds().toString() // 秒 + // 有其他格式化字符需求可以继续添加，必须转化成字符串 + }; + for (let k in opt) { + ret = new RegExp("(" + k + ")").exec(fmt); + if (ret) { + fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0"))) + }; + }; + return fmt; +} + +function defaultDateFormat(date) { + return dateFormat("YYYY-mm-dd", date) +} + +// var colors = [ "#0000FF", "#8A2BE2", "#A52A2A", "#DEB887", "#5F9EA0", "#7FFF00", "#D2691E", "#FF7F50", "#6495ED", "#FFF8DC", "#DC143C", "#00FFFF", "#00008B", "#008B8B", "#B8860B", "#A9A9A9", "#006400", "#BDB76B", "#8B008B", "#556B2F", "#FF8C00", "#9932CC", "#8B0000", "#E9967A", "#8FBC8F", "#483D8B", "#2F4F4F", "#00CED1", "#9400D3", "#FF1493", "#00BFFF", "#696969", "#1E90FF", "#B22222", "#FFFAF0", "#228B22", "#FF00FF", "#DCDCDC", "#F8F8FF", "#FFD700", "#DAA520", "#808080", "#008000", "#ADFF2F", "#F0FFF0", "#FF69B4", "#CD5C5C", "#4B0082", "#FFFFF0"] + +const TrendType = { + OneDate: 1, + RangeDate: 2, +} + +export {TrendType, dateFormat, defaultDateFormat}; + diff --git a/src/charts/Trend.js b/src/charts/Trend.js index 91d3c8d..0183ab2 100644 --- a/src/charts/Trend.js +++ b/src/charts/Trend.js @@ -2,41 +2,47 @@ import ReactEcharts from 'echarts-for-react'; import echarts from 'echarts'; import React from 'react'; +import { Button, DatePicker, Row } from 'antd'; +import zhCN from 'antd/es/locale/zh_CN'; // 引入中文包 +import {dateFormat, defaultDateFormat, TrendType} from './Base.js'; +import config from '../Config.js'; - +const { RangePicker } = DatePicker; class Trend extends React.Component { + state = { + data: [], + type: { + current: TrendType.OneDate, - constructor(props) { - super(props); - - this.state = { - data: [] - }; - } - + } + }; componentDidMount() { - fetch('http://localhost:6123/api/data').then(function (response) { - console.log(response); - if (response.ok) { - response.json().then(function (response) { - console.log(response) - this.setState({ data: response.data.trends }) - }) - } - } - ) + var now = new Date() + this.selectDate( defaultDateFormat(now) ) } - getOption(data) { - - - - + getOption(trendtype, data) { + + var interval; + var fm ; + if(trendtype.current === TrendType.OneDate) { + interval = 3600 * 1000; + fm = function (value, index) { + var tp = new Date(value) + return tp.getFullYear() + "-" + (tp.getMonth() + 1) + "-" + tp.getDate() + " " + tp.getHours() + }; + } else { + interval = 3600 * 1000 * 24; + fm = function (value, index) { + var tp = new Date(value) + return tp.getFullYear() + "-" + (tp.getMonth() + 1) + "-" + tp.getDate() + }; + } var option = { tooltip: { @@ -50,24 +56,48 @@ class Trend extends React.Component { left: 'center', text: '趋势数据', }, - toolbox: { - feature: { - dataZoom: { - yAxisIndex: 'none' - }, - restore: {}, - saveAsImage: {} - } + legend: { + left: 'right', + data: [], }, + // toolbox: { + // feature: { + // dataZoom: { + // yAxisIndex: 'none' + // }, + // restore: {}, + // saveAsImage: {} + // } + // }, xAxis: { type: 'time', boundaryGap: false, - // interval: 10, + interval: interval, // data: tsdata + axisLabel: { + formatter: fm, + }, + }, + aria: { + show: true }, yAxis: { type: 'value', - boundaryGap: [0, '100%'] + // boundaryGap: [0, '100%'] + axisLabel: { + formatter: function (value, index) { + if( typeof value == "number") { + if(value >= 100000000) { + return (value / 10000).toFixed(4) + "亿" + } else if(value >= 10000) { + return (value / 10000).toFixed(2) + "万" + } else { + return value + } + } + + } + } }, dataZoom: [{ type: 'inside', @@ -77,60 +107,41 @@ class Trend extends React.Component { start: 0, end: 100, 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%', + handleSize: '100%', handleStyle: { color: '#fff', shadowBlur: 3, - shadowColor: 'rgba(0, 0, 0, 0.6)', + shadowColor: 'rgba(0, 0, 0, 0.8)', shadowOffsetX: 2, shadowOffsetY: 2 } }], series: [ - - // { - // name: '模拟数据2', - // type: 'line', - // smooth: true, - // symbol: 'none', - // sampling: 'average', - // itemStyle: { - // color: 'rgb(164, 158, 131)' - // }, - // areaStyle: { - // color: new echarts.graphic.LinearGradient(1, 1, 0, 1, [{ - // offset: 0, - // color: 'rgb(164, 158, 158)' - // }, { - // offset: 1, - // color: 'rgb(164, 158, 131)' - // }]) - // }, - // data: data2 - // } ] }; - for (var d of data) { + + for (var i = 0; i < data.length; i++) { + var d = data[i]; + // var color = colors[i]; + + var tvalues = [] + for (var value of d.values) { + tvalues.push([value.time_point * 1000, value.value]) + } + + tvalues.sort() + option.legend.data.push(d.name); + var sdata = { name: d.name, type: 'line', smooth: true, symbol: 'none', sampling: 'average', - itemStyle: { - color: 'rgb(64, 158, 131)' - }, areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: 'rgb(64, 158, 158)' - }, { - offset: 1, - color: 'rgb(64, 158, 131)' - }]) }, - data: d.values + data: tvalues } option.series.push(sdata) } @@ -138,35 +149,57 @@ class Trend extends React.Component { return option; } + selectDate(date) { + fetch(`${config.trendurl}?date=${date}`).then((response) => { + if (response.ok) { + response.json().then((response) => { + if (response.code === 0) { + this.setState({ data: response.data.trends, type: {current: TrendType.OneDate} }) + } + }) + } + }); + } + + selectRangeDate(start, end) { + fetch(`${config.trendurl}?start=${start}&end=${end}`).then((response) => { + if (response.ok) { + response.json().then((response) => { + if (response.code === 0) { + this.setState({ data: response.data.trends, type: {current: TrendType.RangeDate }}) + } + }) + } + }); + } + render() { - const { data } = this.state; - // console.log("123"); - - - - // var data1 = []; - // var now = new Date(); - - // data1.push([new Date(now.getTime() + 3600 * 1000), 100]) - // data1.push([new Date(now.getTime() + 3600 * 2000), 120]) - // data1.push([new Date(now.getTime() + 3600 * 3000), 140]) - - - // var data2 = []; - // data2.push([new Date(now.getTime() + 3600 * 1000), 110]) - // data2.push([new Date(now.getTime() + 3600 * 2000), 130]) - // data2.push([new Date(now.getTime() + 3600 * 3000), 150]) - - + const { data, type } = this.state; return ( - +
+ + + + + + + + + + ) }