up

src/App.js

@@ -14,7 +14,9 @@ class App extends Component {
         duration: -10,
         interval: null,
         // requestDuration: -50
-        requestDuration: -100
+        requestDuration: -100,
+        startText:'',
+        endText:'',
     }
     componentDidMount(){
         let that = this
@@ -90,7 +92,7 @@ class App extends Component {
                 var chartDom = document.getElementById('main');
                 var myChart = echarts.init(chartDom);
                 myChart.on('datazoom', function(params){
-                    clearInterval(that.interval)
+                    clearInterval(that.interval,console.log('滑动清除定时器'))
                     // console.log(params,'params');
                     var options = myChart.getOption();
                     var endValue=options.dataZoom[0].endValue;
@@ -319,8 +321,9 @@ class App extends Component {
             mintime=moment(data.result.AxisX.BlockTime/1000000);
             maxtime=moment(data.result.AxisX.BlockTime/1000000)
             maxtime.add(this.state.requestDuration,'seconds').format('YYYY-MM-DD HH:mm:ss')
-            // console.log(mintime,'最小',maxtime,'最大');
+            
         }
+        // console.log(moment((mintime.unix()*1000000000)/1000000).format('YYYY-MM-DD HH:mm:ss'),'最小',moment((maxtime.unix()*1000000000)/1000000).format('YYYY-MM-DD HH:mm:ss'),'最大')
         var source= data.result.Rows
         var target=[];
         for(var i in source){
@@ -440,7 +443,7 @@ class App extends Component {
                     startValue:mintime.unix()*1000000000,
                     // endValue:maxtime.unix()*1000000000,
                     endValue:this.state.duration < 0 ? maxtime.unix()*1000000000 : (maxtime.subtract(90,'second')).unix()*1000000000,
-
+                    startText:'11111',
                     disabled:false,
                     zoomLock: true,
                 },
@@ -449,7 +452,8 @@ class App extends Component {
                     zoomLock: true,
                     labelFormatter: function (value) {
                         return moment(value/1000000).format('YYYY-MM-DD HH:mm:ss')
-                    }
+                    },
+                    startText:'11111'
                 },
             ],
             xAxis: [
@@ -524,12 +528,16 @@ class App extends Component {
         }; 
         // console.log('datazoom开始',moment((option.dataZoom[0].startValue)/1000000).format('YYYY-MM-DD HH:mm:ss'),'dataZoom结束',moment((option.dataZoom[0].endValue)/1000000).format('YYYY-MM-DD HH:mm:ss'))
         // console.log('主轴开始',moment((option.xAxis[0].min)/1000000).format('YYYY-MM-DD HH:mm:ss'),'主轴结束',moment((option.xAxis[0].max)/1000000).format('YYYY-MM-DD HH:mm:ss'));
+        this.setState({
+            startText:moment((option.xAxis[0].min)/1000000).format('YYYY-MM-DD HH:mm:ss'),
+            endText:moment((option.xAxis[0].max)/1000000).format('YYYY-MM-DD HH:mm:ss')
+        })
         myChart.clear()
         myChart.setOption(option,true);
         // 
-        // window.addEventListener("resize", function () {
-        //     myChart.resize();  //使图表自适应窗口的大小
-        // })
+        window.addEventListener("resize", function () {
+            myChart.resize();  //使图表自适应窗口的大小
+        })
         this.extension(myChart);
 
     }
@@ -601,8 +609,14 @@ class App extends Component {
         })
     }
     render() {
+        const {startText,endText}=this.state
         return (
-            <div id="main" className="container" style={{ 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 style={{position:'absolute',left:'1%',top:'70%',fontSize:'12px'}}>{startText}</div>
+               <div style={{position:'absolute',right:'5%',top:'70%',fontSize:'12px'}}>{endText}</div>
             </div>
         );
     }