Skip to content

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

提交

parent 70f3d48b
Hide whitespace changes
Inline Side-by-side
Showing with 123 additions and 84 deletions
src/App.js
View file @ 62900374
...@@ -15,18 +15,20 @@ class App extends Component { ...@@ -15,18 +15,20 @@ class App extends Component {
requestDuration: -100, requestDuration: -100,
startText:'', startText:'',
endText:'', endText:'',
value:0, value:'',
getValue:0, getValue:0,
time:-100, time:-100,
getTime:-100, getTime:-100,
blockOld:0, inputvalue:0,
endblockOld:0, // blockOld:0,
count:0, // endblockOld:0,
endCount:0, // count:0,
// endCount:0,
} }
inputChangeValue=(e)=>{ inputChangeValue(){
let val=this.refs.inputvalue.value;
this.setState({ this.setState({
value:e.target.value, inputvalue:val,
}) })
} }
inputChangeTime=(e)=>{ inputChangeTime=(e)=>{
...@@ -35,10 +37,45 @@ class App extends Component { ...@@ -35,10 +37,45 @@ class App extends Component {
}) })
} }
getInputHeight=()=>{ getInputHeight=()=>{
this.setState({
getValue:this.state.value console.log(this.state.inputvalue,'点击获取的value')
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
myChart.showLoading()
fetch(`/api/graph_by_height_and_duration?height=${this.state.inputvalue}&duration=${this.state.requestDuration}`,{
method:'GET',
headers:{
'Content-Type':'application/json;charset=UTF-8'
},
})
.then(res =>res.json())
.then((newData) => {
myChart.hideLoading()
let allRows0Arr = []
let allRows1Arr = []
let allRows2Arr = []
let allTopAxisXArr = []
let allBottomAxisXArr = []
let allLinksArr = []
let {Rows, AxisX, Links } = newData.result
let {TopAxisX, BottomAxisX} = AxisX
allRows0Arr = Rows[0]
allRows1Arr = Rows[1]
allRows2Arr = Rows[2]
allTopAxisXArr = TopAxisX
allBottomAxisXArr = BottomAxisX
allLinksArr = Links
newData.result.Rows[0] = allRows0Arr
newData.result.Rows[1] = allRows1Arr
newData.result.Rows[2] = allRows2Arr
newData.result.AxisX.TopAxisX = allTopAxisXArr
newData.result.AxisX.BottomAxisX = allBottomAxisXArr
newData.result.Links = allLinksArr
this.initChart(newData)
}) })
console.log(this.state.getValue,'点击获取的value')
} }
getInputTime=()=>{ getInputTime=()=>{
this.setState({ this.setState({
...@@ -46,7 +83,7 @@ class App extends Component { ...@@ -46,7 +83,7 @@ class App extends Component {
}) })
console.log(this.state.getTime,'点击获取的time') console.log(this.state.getTime,'点击获取的time')
} }
componentDidMount(){ componentDidMount(){
let that = this let that = this
var chartDom = document.getElementById('main'); var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
...@@ -84,40 +121,42 @@ class App extends Component { ...@@ -84,40 +121,42 @@ class App extends Component {
allBottomAxisXArr = BottomAxisX allBottomAxisXArr = BottomAxisX
allLinksArr = Links allLinksArr = Links
that.initChart(resData) that.initChart(resData)
console.log(this.state.getValue,'高') console.log(that.state.getValue,'高')
console.log(this.state.getTime,'时间') console.log(that.state.getTime,'时间')
if(!that.interval){ // if(!that.interval){
that.interval = setInterval(() => { // 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',
method:'GET', // headers:{
headers:{ // 'Content-Type':'application/json;charset=UTF-8'
'Content-Type':'application/json;charset=UTF-8' // },
}, // })
}) // .then(res =>res.json())
.then(res =>res.json()) // .then((newData) => {
.then((newData) => { // let {Rows, AxisX, Links } = newData.result
let {Rows, AxisX, Links } = newData.result // let {TopAxisX, BottomAxisX} = AxisX
let {TopAxisX, BottomAxisX} = AxisX // allRows0Arr = Rows[0]
allRows0Arr = Rows[0] // allRows1Arr = Rows[1]
allRows1Arr = Rows[1] // allRows2Arr = Rows[2]
allRows2Arr = Rows[2] // allTopAxisXArr = TopAxisX
allTopAxisXArr = TopAxisX // allBottomAxisXArr = BottomAxisX
allBottomAxisXArr = BottomAxisX // allLinksArr = Links
allLinksArr = Links // newData.result.Rows[0] = allRows0Arr
newData.result.Rows[0] = allRows0Arr // newData.result.Rows[1] = allRows1Arr
newData.result.Rows[1] = allRows1Arr // newData.result.Rows[2] = allRows2Arr
newData.result.Rows[2] = allRows2Arr // newData.result.AxisX.TopAxisX = allTopAxisXArr
newData.result.AxisX.TopAxisX = allTopAxisXArr // newData.result.AxisX.BottomAxisX = allBottomAxisXArr
newData.result.AxisX.BottomAxisX = allBottomAxisXArr // newData.result.Links = allLinksArr
newData.result.Links = allLinksArr // that.initChart(newData)
that.initChart(newData) // })
}) // }, 5000);
}, 60000);
} // }
var chartDom = document.getElementById('main'); var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
console.log(that.state.getTime,'时间2')
myChart.on('datazoom', function(params){ myChart.on('datazoom', function(params){
clearInterval(that.interval) clearInterval(that.interval)
var options = myChart.getOption(); var options = myChart.getOption();
...@@ -221,9 +260,9 @@ class App extends Component { ...@@ -221,9 +260,9 @@ class App extends Component {
requestDuration:that.state.requestDuration*(that.state.count+1) requestDuration:that.state.requestDuration*(that.state.count+1)
}) })
} }
console.log(that.state.requestDuration,'startrequestDuration') // console.log(that.state.requestDuration,'startrequestDuration')
console.log(startBlock,'startBlock') // console.log(startBlock,'startBlock')
console.log(that.state.count,'count') // console.log(that.state.count,'count')
fetch(`/api/graph_by_height_and_duration?height=${startBlock}&duration=${that.state.requestDuration}`,{ fetch(`/api/graph_by_height_and_duration?height=${startBlock}&duration=${that.state.requestDuration}`,{
method:'GET', method:'GET',
headers:{ headers:{
...@@ -271,9 +310,9 @@ class App extends Component { ...@@ -271,9 +310,9 @@ class App extends Component {
requestDuration:that.state.requestDuration*(that.state.endCount+1) requestDuration:that.state.requestDuration*(that.state.endCount+1)
}) })
} }
console.log(that.state.requestDuration,'endrequestDuration') // console.log(that.state.requestDuration,'endrequestDuration')
console.log(endBlock,'endBlock') // console.log(endBlock,'endBlock')
console.log(that.state.endCount,'endCount') // console.log(that.state.endCount,'endCount')
fetch(`/api/graph_by_height_and_duration?height=${endBlock}&duration=${that.state.requestDuration}`,{ fetch(`/api/graph_by_height_and_duration?height=${endBlock}&duration=${that.state.requestDuration}`,{
method:'GET', method:'GET',
headers:{ headers:{
...@@ -306,9 +345,9 @@ class App extends Component { ...@@ -306,9 +345,9 @@ class App extends Component {
let flag=false let flag=false
options.series.map(item=>{ options.series.map(item=>{
item.data.map(item1=>{ item.data.map(item1=>{
console.log(item1.value[0],'item.value') // console.log(item1.value[0],'item.value')
console.log(endValue,'endValue') // console.log(endValue,'endValue')
console.log(startValue,'startValue') // console.log(startValue,'startValue')
if(startValue <= item1.value[0] && endValue >= item1.value[0]){ if(startValue <= item1.value[0] && endValue >= item1.value[0]){
if(item1.value[7] === 'Witness'){ if(item1.value[7] === 'Witness'){
flag = true flag = true
...@@ -316,37 +355,37 @@ class App extends Component { ...@@ -316,37 +355,37 @@ class App extends Component {
} }
}) })
}) })
if(flag === true ){ // if(flag === true ){
that.interval = setInterval(() => { // 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}`,{
method:'GET', // method:'GET',
headers:{ // headers:{
'Content-Type':'application/json;charset=UTF-8' // 'Content-Type':'application/json;charset=UTF-8'
}, // },
}) // })
.then(res =>res.json()) // .then(res =>res.json())
.then((newData) => { // .then((newData) => {
let {Rows, AxisX, Links } = newData.result // let {Rows, AxisX, Links } = newData.result
let {TopAxisX, BottomAxisX} = AxisX // let {TopAxisX, BottomAxisX} = AxisX
allRows0Arr = Rows[0] // allRows0Arr = Rows[0]
allRows1Arr = Rows[1] // allRows1Arr = Rows[1]
allRows2Arr = Rows[2] // allRows2Arr = Rows[2]
allTopAxisXArr = TopAxisX // allTopAxisXArr = TopAxisX
allBottomAxisXArr = BottomAxisX // allBottomAxisXArr = BottomAxisX
allLinksArr = Links // allLinksArr = Links
newData.result.Rows[0] = allRows0Arr // newData.result.Rows[0] = allRows0Arr
newData.result.Rows[1] = allRows1Arr // newData.result.Rows[1] = allRows1Arr
newData.result.Rows[2] = allRows2Arr // newData.result.Rows[2] = allRows2Arr
newData.result.AxisX.TopAxisX = allTopAxisXArr // newData.result.AxisX.TopAxisX = allTopAxisXArr
newData.result.AxisX.BottomAxisX = allBottomAxisXArr // newData.result.AxisX.BottomAxisX = allBottomAxisXArr
newData.result.Links = allLinksArr // newData.result.Links = allLinksArr
that.initChart(newData) // that.initChart(newData)
}) // })
}, 60000); // }, 5000);
}else{ // }else{
clearInterval(that.interval) // clearInterval(that.interval)
} // }
}) })
}) })
...@@ -694,9 +733,9 @@ class App extends Component { ...@@ -694,9 +733,9 @@ class App extends Component {
return ( return (
<div> <div>
<div style={{width:'50%',display:'flex',justifyContent:'space-around'}}> <div style={{width:'50%',display:'flex',justifyContent:'space-around'}}>
<div> <div>
<input value={this.state.value} onChange={this.inputChangeValue} style={{width:'30%',textAlign:'center'}}/> <input ref="inputvalue" onChange={()=>this.inputChangeValue()} style={{width:'30%',textAlign:'center'}}/>
<button onClick={this.getInputHeight} style={{cursor:'pointer'}}>双击切换高度</button> <button onClick={()=>this.getInputHeight()} style={{cursor:'pointer'}}>点击切换高度</button>
</div> </div>
{/* <div> {/* <div>
<input value={this.state.time} onChange={this.inputChangeTime} style={{width:'30%',textAlign:'center'}}/> <input value={this.state.time} onChange={this.inputChangeTime} style={{width:'30%',textAlign:'center'}}/>
......
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