Skip to content

G
graph
Commit d5a8c80f authored by wenli.huang@wuban.net.cn's avatar wenli.huang@wuban.net.cn
Browse files
Options

add event

parent 7f547e82
Hide whitespace changes
Inline Side-by-side
Showing with 23 additions and 12 deletions
src/App.js
View file @ d5a8c80f
...@@ -26,7 +26,10 @@ class App extends Component { ...@@ -26,7 +26,10 @@ class App extends Component {
// count:0, // count:0,
// endCount:0, // endCount:0,
altitude:0, altitude:0,
datazoomHundred:false,
datazoom:false, datazoom:false,
altitudeEnd:0,
datazoomEnd:false
} }
inputChangeValue(){ inputChangeValue(){
let val=this.refs.inputvalue.value; let val=this.refs.inputvalue.value;
...@@ -234,10 +237,11 @@ class App extends Component { ...@@ -234,10 +237,11 @@ class App extends Component {
} }
if(item2.label!==undefined){ if(item2.label!==undefined){
startBlock=item2.label.formatter startBlock=item2.label.formatter
that.setState({
altitude:startBlock
})
endBlock=item2.label.formatter endBlock=item2.label.formatter
// that.setState({
// altitude:startBlock,
// })
min3=item2.xAxis min3=item2.xAxis
} }
}else { }else {
...@@ -253,9 +257,9 @@ class App extends Component { ...@@ -253,9 +257,9 @@ class App extends Component {
min = min2 min = min2
if(item2.label !== undefined ){ if(item2.label !== undefined ){
startBlock=item2.label.formatter startBlock=item2.label.formatter
that.setState({ // that.setState({
altitude:startBlock // altitude:startBlock
}) // })
min3=item2.xAxis min3=item2.xAxis
} }
} }
...@@ -275,6 +279,7 @@ class App extends Component { ...@@ -275,6 +279,7 @@ class App extends Component {
myChart.showLoading() myChart.showLoading()
console.log(startBlock,'startBlock') console.log(startBlock,'startBlock')
// if(startBlock !=0 ){ // if(startBlock !=0 ){
// that.setState({ // that.setState({
...@@ -290,6 +295,7 @@ class App extends Component { ...@@ -290,6 +295,7 @@ class App extends Component {
// } // }
that.setState({ that.setState({
datazoom:true, datazoom:true,
altitude:startBlock,
// requestDuration:-100, // requestDuration:-100,
duration:-10, duration:-10,
},()=>{ },()=>{
...@@ -375,9 +381,12 @@ class App extends Component { ...@@ -375,9 +381,12 @@ class App extends Component {
if(params.end === 100){ if(params.end === 100){
myChart.showLoading() myChart.showLoading()
console.log(endBlock,'endBlock') console.log(endBlock,'endBlock')
console.log(that.state.requestDuration,'ddd')
that.setState({ that.setState({
requestDuration:100, requestDuration:100,
duration:10, duration:10,
datazoomEnd:true,
datazoomHundred:true,
},()=>{ },()=>{
if(endBlock !=0 ){ if(endBlock !=0 ){
that.setState({ that.setState({
...@@ -740,9 +749,9 @@ class App extends Component { ...@@ -740,9 +749,9 @@ class App extends Component {
startText:moment((option.xAxis[0].min)/1000000).format('YYYY-MM-DD HH:mm:ss'), 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') endText:moment((option.xAxis[0].max)/1000000).format('YYYY-MM-DD HH:mm:ss')
}) })
console.log(option.xAxis[0].min,'min',option.xAxis[0].max,'max') // console.log(option.xAxis[0].min,'min',option.xAxis[0].max,'max')
console.log(option.xAxis,'aa') // console.log(option.xAxis,'aa')
console.log(option.xAxis[0],'aa00') // console.log(option.xAxis[0],'aa00')
myChart.setOption(option,true); myChart.setOption(option,true);
this.extension(myChart); this.extension(myChart);
} }
...@@ -777,9 +786,10 @@ class App extends Component { ...@@ -777,9 +786,10 @@ class App extends Component {
elementDiv.style.cssText = elementStyle elementDiv.style.cssText = elementStyle
elementDiv.innerHTML=` elementDiv.innerHTML=`
<p>${moment(parseInt(params.data.value[0]/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')}</p> <p>${moment(parseInt(params.data.value[0]/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')}</p>
<p>round：${params.data.value[4]}</p> <p>Round：${params.data.value[4]}</p>
<p>TxCount： ${params.data.value[8]}</p> <p>TxCount： ${params.data.value[8]}</p>
<p>Y：${(params.data.value[1]).slice(0,4)}</p> <p>ID：${params.data.value[6]}</p>
<p>Role：${params.data.value[7]}</p>
` `
document.querySelector('html').onmousemove = function (event) { document.querySelector('html').onmousemove = function (event) {
var elementDiv = document.querySelector('#extension') var elementDiv = document.querySelector('#extension')
...@@ -842,7 +852,8 @@ class App extends Component { ...@@ -842,7 +852,8 @@ class App extends Component {
</div> */} </div> */}
{/* <div>当前高度：{this.state.inputvalue}</div> */} {/* <div>当前高度：{this.state.inputvalue}</div> */}
<div>当前高度：{this.state.inputvalue == 0 && this.state.datazoom == false? `${0}` : this.state.inputvalue!= 0 && this.state.datazoom ==false? `${this.state.inputvalue}` : this.state.datazoom == true ? `${this.state.altitude}` :`${this.state.inputvalue}` }</div> <div>当前高度：{this.state.inputvalue == 0 && this.state.datazoom == false? `${0}` : this.state.inputvalue!= 0 && this.state.datazoom ==false? `${this.state.inputvalue}` : this.state.datazoom == true ? `${this.state.altitude}` :`${this.state.inputvalue}` }</div>
<div>当前时间：{this.state.inputtime == -100 ? `${-100}` : this.state.inputtime}</div> {/* <div>当前时间：{this.state.inputtime == -100 ? `${-100}` : this.state.inputtime}</div> */}
<div>当前时间：{this.state.inputtime == -100 && this.state.datazoomEnd == false?`${-100}`:this.state.inputtime != -100 && this.state.datazoomEnd == false ? `${this.state.inputtime}`:this.state.datazoomEnd== true?`${this.state.altitudeEnd}`:`${this.state.inputtime}`}</div>
</div> </div>
<div style={{position:'relative'}}> <div style={{position:'relative'}}>
<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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment