Skip to content

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

up

parent 265bd232
Hide whitespace changes
Inline Side-by-side
Showing with 1 addition and 51 deletions
src/App.js
View file @ 25249cdf
...@@ -10,10 +10,8 @@ class App extends Component { ...@@ -10,10 +10,8 @@ class App extends Component {
AxisY:[], AxisY:[],
Links:[], Links:[],
target:[], target:[],
// duration: -50,
duration: -10, duration: -10,
interval: null, interval: null,
// requestDuration: -50
requestDuration: -100, requestDuration: -100,
startText:'', startText:'',
endText:'', endText:'',
...@@ -47,8 +45,6 @@ class App extends Component { ...@@ -47,8 +45,6 @@ class App extends Component {
AxisY: resData.result.AxisY, AxisY: resData.result.AxisY,
Links: resData.result.Links, Links: resData.result.Links,
}, ()=>{ }, ()=>{
// handle arr Rows [3 arr]\TopAxisX [...{}]\BottomAxisX [...{}]\Links [...{}]
let {Rows, AxisX, Links } = resData.result let {Rows, AxisX, Links } = resData.result
let {TopAxisX, BottomAxisX} = AxisX let {TopAxisX, BottomAxisX} = AxisX
allRows0Arr = Rows[0] allRows0Arr = Rows[0]
...@@ -76,9 +72,6 @@ class App extends Component { ...@@ -76,9 +72,6 @@ class App extends Component {
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
...@@ -96,11 +89,6 @@ class App extends Component { ...@@ -96,11 +89,6 @@ class App extends Component {
var options = myChart.getOption(); var options = myChart.getOption();
var endValue=options.dataZoom[0].endValue; var endValue=options.dataZoom[0].endValue;
var startValue=options.dataZoom[0].startValue; var startValue=options.dataZoom[0].startValue;
// console.log(options,'option')
// console.log('当前开始时间：',moment(startValue/1000000).format('YYYY-MM-DD HH:mm:ss:sss'))
// console.log('当前结束时间：',moment(endValue/1000000).format('YYYY-MM-DD HH:mm:ss:sss'))
// var min1
// var min2
var min=0 var min=0
var endmin=0 var endmin=0
var min3=0 var min3=0
...@@ -159,7 +147,6 @@ class App extends Component { ...@@ -159,7 +147,6 @@ class App extends Component {
endmin=endmin2 endmin=endmin2
if(item2.label !== undefined ){ if(item2.label !== undefined ){
endBlock=item2.label.formatter endBlock=item2.label.formatter
// b=item2.label.formatter
min3=item2.xAxis min3=item2.xAxis
} }
} }
...@@ -168,12 +155,6 @@ class App extends Component { ...@@ -168,12 +155,6 @@ class App extends Component {
}) })
}) })
}) })
// console.log(min,'最小');
// console.log(startBlock,'当前开始b');
// console.log(endBlock,'当前结束endBlock')
// console.log(maxBlock,'maxBlock');
// console.log(minBlock,'minBlock');
if(params.start === 0){ if(params.start === 0){
myChart.showLoading() myChart.showLoading()
that.setState({ that.setState({
...@@ -197,9 +178,6 @@ class App extends Component { ...@@ -197,9 +178,6 @@ class App extends Component {
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
...@@ -250,7 +228,6 @@ class App extends Component { ...@@ -250,7 +228,6 @@ class App extends Component {
options.series.map(item=>{ options.series.map(item=>{
item.data.map(item1=>{ item.data.map(item1=>{
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
} }
...@@ -276,8 +253,6 @@ class App extends Component { ...@@ -276,8 +253,6 @@ class App extends Component {
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
...@@ -300,7 +275,6 @@ class App extends Component { ...@@ -300,7 +275,6 @@ class App extends Component {
this.state.interval = null this.state.interval = null
} }
initChart(data) { initChart(data) {
// console.log(data);
var chartDom = document.getElementById('main'); var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var maxtime=moment(data.result.AxisX.BlockTime/1000000) var maxtime=moment(data.result.AxisX.BlockTime/1000000)
...@@ -311,7 +285,6 @@ class App extends Component { ...@@ -311,7 +285,6 @@ class App extends Component {
var markline=data.result.AxisX.TopAxisX.map(item=>{ var markline=data.result.AxisX.TopAxisX.map(item=>{
return [ return [
{ {
// name: 'start',
xAxis:item.Time, xAxis:item.Time,
yAxis: 'Block', yAxis: 'Block',
label: { label: {
...@@ -323,7 +296,6 @@ class App extends Component { ...@@ -323,7 +296,6 @@ class App extends Component {
lineStyle: { color: 'red', type: 'solid',with:30}, lineStyle: { color: 'red', type: 'solid',with:30},
}, },
{ {
// name: 'end',
xAxis: item.Time, xAxis: item.Time,
yAxis: 'Block' yAxis: 'Block'
}, },
...@@ -332,7 +304,6 @@ class App extends Component { ...@@ -332,7 +304,6 @@ class App extends Component {
data.result.AxisX.BottomAxisX.map(item=>{ data.result.AxisX.BottomAxisX.map(item=>{
markline.push([ markline.push([
{ {
// name: 'start',
xAxis:item.Time, xAxis:item.Time,
yAxis: 'Round', yAxis: 'Round',
label: { label: {
...@@ -344,17 +315,14 @@ class App extends Component { ...@@ -344,17 +315,14 @@ class App extends Component {
lineStyle: { color: 'green', type: 'solid',with:30}, lineStyle: { color: 'green', type: 'solid',with:30},
}, },
{ {
// name: 'end',
xAxis: item.Time, xAxis: item.Time,
yAxis: 'Round' yAxis: 'Round'
}, },
]) ])
}) })
// console.log('请求requestDuration',this.state.requestDuration,'时间间隔：',this.state.duration)
if(this.state.duration<0){ if(this.state.duration<0){
maxtime=moment(data.result.AxisX.BlockTime/1000000) maxtime=moment(data.result.AxisX.BlockTime/1000000)
mintime=moment(data.result.AxisX.BlockTime/1000000) mintime=moment(data.result.AxisX.BlockTime/1000000)
// mintime.add(-(this.state.duration),'seconds').format('YYYY-MM-DD HH:mm:ss')
mintime.subtract(-(this.state.duration),'seconds').format('YYYY-MM-DD HH:mm:ss') mintime.subtract(-(this.state.duration),'seconds').format('YYYY-MM-DD HH:mm:ss')
moment(data.result.AxisX.BlockTime/1000000).format('YYYY-MM-DD HH:mm:ss') moment(data.result.AxisX.BlockTime/1000000).format('YYYY-MM-DD HH:mm:ss')
} }
...@@ -364,7 +332,6 @@ class App extends Component { ...@@ -364,7 +332,6 @@ class App extends Component {
maxtime.add(this.state.requestDuration,'seconds').format('YYYY-MM-DD HH:mm:ss') maxtime.add(this.state.requestDuration,'seconds').format('YYYY-MM-DD HH:mm:ss')
} }
// 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 source= data.result.Rows
var target=[]; var target=[];
for(var i in source){ for(var i in source){
...@@ -412,7 +379,6 @@ class App extends Component { ...@@ -412,7 +379,6 @@ class App extends Component {
}, },
name: item[6], name: item[6],
value: item, value: item,
// x: item[0],
itemStyle:{ itemStyle:{
borderWidth: 1, borderWidth: 1,
borderColor: '#333', borderColor: '#333',
...@@ -431,7 +397,6 @@ class App extends Component { ...@@ -431,7 +397,6 @@ class App extends Component {
item['source'] = item['Source'] item['source'] = item['Source']
item['target'] = item['Target'] item['target'] = item['Target']
}) })
// links.pop();
series.push({ series.push({
name: type, name: type,
type: 'graph', type: 'graph',
...@@ -482,7 +447,6 @@ class App extends Component { ...@@ -482,7 +447,6 @@ class App extends Component {
{ {
type: 'inside', type: 'inside',
startValue:mintime.unix()*1000000000, startValue:mintime.unix()*1000000000,
// endValue:maxtime.unix()*1000000000,
endValue:this.state.duration < 0 ? maxtime.unix()*1000000000 : (maxtime.subtract(90,'second')).unix()*1000000000, endValue:this.state.duration < 0 ? maxtime.unix()*1000000000 : (maxtime.subtract(90,'second')).unix()*1000000000,
startText:'11111', startText:'11111',
disabled:false, disabled:false,
...@@ -505,12 +469,9 @@ class App extends Component { ...@@ -505,12 +469,9 @@ class App extends Component {
return moment(parseInt(value/1000000)).format('YYYY-MM-DD HH:mm:ss') return moment(parseInt(value/1000000)).format('YYYY-MM-DD HH:mm:ss')
}) })
}, },
// max:maxtime.unix()*1000000000,
// min:mintime.subtract(100,'seconds').unix()*1000000000,
max:this.state.duration < 0 ? maxtime.unix()*1000000000 : maxtime.add(100,'second').unix()*1000000000, max:this.state.duration < 0 ? maxtime.unix()*1000000000 : maxtime.add(100,'second').unix()*1000000000,
min:this.state.duration <0 ? mintime.subtract(100,'second').unix()*1000000000 : mintime.unix()*1000000000, min:this.state.duration <0 ? mintime.subtract(100,'second').unix()*1000000000 : mintime.unix()*1000000000,
// splitNumber:10,
axisLine:{ axisLine:{
show:true, show:true,
symbol: ['none', 'arrow'] symbol: ['none', 'arrow']
...@@ -554,7 +515,6 @@ class App extends Component { ...@@ -554,7 +515,6 @@ class App extends Component {
} }
}, },
boundaryGap: false, boundaryGap: false,
// scale: true,
axisTick: { axisTick: {
alignWithLabel: true alignWithLabel: true
} }
...@@ -566,22 +526,12 @@ class App extends Component { ...@@ -566,22 +526,12 @@ class App extends Component {
}, },
series: series, series: series,
}; };
// console.log(option.dataZoom[0].startValue,'11')//1658299327000000000
// console.log(option.dataZoom[0].endValue,'22')//1658299337000000000
// console.log(option.series,'option')
// 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({ this.setState({
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')
}) })
// myChart.clear()
myChart.setOption(option,true); myChart.setOption(option,true);
//
// window.addEventListener("resize", function () {
// myChart.resize();
// })
this.extension(myChart); this.extension(myChart);
} }
......
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