upup

src/App.js

@@ -15,6 +15,18 @@ class App extends Component {
         requestDuration: -100,
         startText:'',
         endText:'',
+        value:0,
+        getValue:0,
+    }
+    inputChange=(e)=>{
+        this.setState({
+            value:e.target.value
+        })
+    }
+    getInput=()=>{
+        this.setState({
+            getValue:this.state.value
+        })
     }
     componentDidMount(){
         let that = this
@@ -56,7 +68,8 @@ class App extends Component {
                 that.initChart(resData)
                 if(!that.interval){
                         that.interval = setInterval(() => {
-                            fetch(`/api/graph_by_height_and_duration?height=0&duration=${that.state.requestDuration}`,{
+                            // fetch(`/api/graph_by_height_and_duration?height=0&duration=${that.state.requestDuration}`,{
+                            fetch(`/api/graph_by_height_and_duration?height=${this.state.getValue}&duration=${that.state.requestDuration}`,{
                                 method:'GET',
                                 headers:{
                                     'Content-Type':'application/json;charset=UTF-8'
@@ -84,6 +97,7 @@ class App extends Component {
                 }
                 var chartDom = document.getElementById('main');
                 var myChart = echarts.init(chartDom);
+
                 myChart.on('datazoom', function(params){
                     clearInterval(that.interval)
                     var options = myChart.getOption();
@@ -604,13 +618,22 @@ class App extends Component {
     render() {
         const {startText,endText}=this.state
         return (
-            <div>
-                <div id="main" className="container" style={{position:'relative', padding: '50px', boxSizing:'border-box',  width: '100%', height: 900 }}> 
+            // <div>
+            //     <div id="main" className="container" style={{position:'relative', padding: '50px', boxSizing:'border-box',  width: '100%', height: 900 }}> 
                
-               </div>
+            //    </div>
+            //    <div style={{position:'absolute',left:'1%',top:'70%',fontSize:'12px',color:'#80828a'}}>{startText}</div>
+            //    <div style={{position:'absolute',right:'5%',top:'70%',fontSize:'12px',color:'#80828a'}}>{endText}</div>
+            // </div>
+           <div>
+                <div>
+                    <div id="main" className="container" style={{position:'relative', padding: '50px', boxSizing:'border-box',  width: '100%', height: 900 }}> </div>
                     <div style={{position:'absolute',left:'1%',top:'70%',fontSize:'12px',color:'#80828a'}}>{startText}</div>
                     <div style={{position:'absolute',right:'5%',top:'70%',fontSize:'12px',color:'#80828a'}}>{endText}</div>
                 </div>
+                <input value={this.state.value}  onChange={this.inputChange} style={{width:'10%',marginLeft:'5%'}}/>
+                <button onClick={this.getInput}>Click</button>
+           </div>
         );
     }
 }

src/index.js

@@ -6,9 +6,10 @@ import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
+  // <React.StrictMode>
+  //   <App />
+  // </React.StrictMode>
   <App />
-  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/setupProxy.js

@@ -2,7 +2,8 @@ const { createProxyMiddleware } = require('http-proxy-middleware');
 module.exports = function (app) {
     app.use(createProxyMiddleware('/api',
         {
-            "target": "http://54.168.125.67:26657",
+            // "target": "http://54.168.125.67:26657",
+            "target":'http://15.161.127.241:30001',
             // "target": "http://3.9.177.160:50080",
             "changeOrigin": true,
             "pathRewrite": {