Skip to content

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

newup

parent 55888890
Show whitespace changes
Inline Side-by-side
Showing with 122 additions and 118 deletions
src/App.js
View file @ ccb19aed
...@@ -70,13 +70,6 @@ class App extends Component { ...@@ -70,13 +70,6 @@ class App extends Component {
// .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 = [...allRows0Arr, ...Rows[0].slice(Rows[0].length-2, Rows[0].length-1)]
// // allRows1Arr = [...allRows1Arr, ...Rows[1].slice(Rows[1].length-2, Rows[1].length-1)]
// // allRows2Arr = [...allRows2Arr, ...Rows[2].slice(Rows[2].length-2, Rows[2].length-1)]
// // allTopAxisXArr = [...allTopAxisXArr, ...TopAxisX.slice(TopAxisX.length-2, TopAxisX.length-1)]
// // allBottomAxisXArr = [...allBottomAxisXArr, ...BottomAxisX.slice(BottomAxisX.length-2, BottomAxisX.length-1)]
// // allLinksArr = [...allLinksArr, ...Links.slice(Links.length-2, Links.length-1)]
// allRows0Arr = Rows[0] // allRows0Arr = Rows[0]
// allRows1Arr = Rows[1] // allRows1Arr = Rows[1]
// allRows2Arr = Rows[2] // allRows2Arr = Rows[2]
...@@ -98,24 +91,28 @@ class App extends Component { ...@@ -98,24 +91,28 @@ class App extends Component {
var chartDom = document.getElementById('main'); var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
myChart.on('datazoom', function(params){ myChart.on('datazoom', function(params){
// clearInterval(that.interval,console.log('滑动清除定时器'))
console.log(params,'params'); console.log(params,'params');
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('开始时间：',moment(startValue/1000000).format('YYYY-MM-DD HH:mm:ss:sss')) 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'))
// console.log(options,'options') // console.log(options,'options')
// console.log(options.series,'series') // console.log(options.series,'series')
// var min1 // var min1
// var min2 // var min2
var min=0 var min=0
var endmin=0
var min3=0 var min3=0
var b=0 var b=0
var endBlock=0;
var maxB = 0 var maxB = 0
var minB = 0 var minB = 0
options.series.map(item=>{ options.series.map(item=>{
item.markLine.data.forEach(item1=>{ item.markLine.data.forEach(item1=>{
item1.map(item2=>{ item1.map(item2=>{
// console.log(item2.xAxis) // console.log(item2.xAxis,'1111')
if(item2.yAxis === 'Block'){ if(item2.yAxis === 'Block'){
if(item2.label !== undefined){ if(item2.label !== undefined){
if(maxB === 0 ){ if(maxB === 0 ){
...@@ -131,19 +128,28 @@ class App extends Component { ...@@ -131,19 +128,28 @@ class App extends Component {
} }
} }
if(min === 0){ if(min === 0){
endmin=item2.xAxis - endValue
min = item2.xAxis - startValue; min = item2.xAxis - startValue;
if(min < 0 ){ if(min < 0 ){
min = -min; min = -min;
} }
if(endmin<0){
endmin=-endmin
}
if(item2.label!==undefined){ if(item2.label!==undefined){
b=item2.label.formatter b=item2.label.formatter
endBlock=item2.label.formatter
min3=item2.xAxis min3=item2.xAxis
} }
}else { }else {
var min2=item2.xAxis - startValue; var min2=item2.xAxis - startValue;
var endmin2=item2.xAxis - endValue;
if(min2 < 0){ if(min2 < 0){
min2 = -min2; min2 = -min2;
} }
if(endmin2<0){
endmin2=-endmin2
}
if(min > min2){ if(min > min2){
min = min2 min = min2
if(item2.label !== undefined ){ if(item2.label !== undefined ){
...@@ -151,18 +157,25 @@ class App extends Component { ...@@ -151,18 +157,25 @@ class App extends Component {
min3=item2.xAxis min3=item2.xAxis
} }
} }
if(endmin > endmin2){
endmin=endmin2
if(item2.label !== undefined ){
endBlock=item2.label.formatter
// b=item2.label.formatter
min3=item2.xAxis
}
}
} }
} }
}) })
}) })
}) })
// console.log(min,'最小'); if(params.start === 0){
console.log(b,'当前'); myChart.showLoading()
console.log(maxB,'max'); that.setState({
console.log(minB,'min'); requestDuration:-100,
duration:-10,
},()=>{
if(params.start == 0){
fetch(`/api/graph_by_height_and_duration?height=${b}&duration=${that.state.requestDuration}`,{ fetch(`/api/graph_by_height_and_duration?height=${b}&duration=${that.state.requestDuration}`,{
method:'GET', method:'GET',
headers:{ headers:{
...@@ -171,15 +184,9 @@ class App extends Component { ...@@ -171,15 +184,9 @@ class App extends Component {
}) })
.then(res =>res.json()) .then(res =>res.json())
.then((newData) => { .then((newData) => {
myChart.hideLoading()
let {Rows, AxisX, Links } = newData.result let {Rows, AxisX, Links } = newData.result
let {TopAxisX, BottomAxisX} = AxisX let {TopAxisX, BottomAxisX} = AxisX
// allRows0Arr = [...allRows0Arr, ...Rows[0].slice(Rows[0].length-2, Rows[0].length-1)]
// allRows1Arr = [...allRows1Arr, ...Rows[1].slice(Rows[1].length-2, Rows[1].length-1)]
// allRows2Arr = [...allRows2Arr, ...Rows[2].slice(Rows[2].length-2, Rows[2].length-1)]
// allTopAxisXArr = [...allTopAxisXArr, ...TopAxisX.slice(TopAxisX.length-2, TopAxisX.length-1)]
// allBottomAxisXArr = [...allBottomAxisXArr, ...BottomAxisX.slice(BottomAxisX.length-2, BottomAxisX.length-1)]
// allLinksArr = [...allLinksArr, ...Links.slice(Links.length-2, Links.length-1)]
allRows0Arr = Rows[0] allRows0Arr = Rows[0]
allRows1Arr = Rows[1] allRows1Arr = Rows[1]
allRows2Arr = Rows[2] allRows2Arr = Rows[2]
...@@ -197,28 +204,48 @@ class App extends Component { ...@@ -197,28 +204,48 @@ class App extends Component {
newData.result.Links = allLinksArr newData.result.Links = allLinksArr
that.initChart(newData,1) that.initChart(newData,1)
}) })
})
console.log(that.state.requestDuration,that.state.duration,'负负负')
} }
if(params.end === 100){
myChart.showLoading()
// console.log(that.state.requestDuration,that.state.duration,'requestAnimationFrame','duration')
that.setState({
requestDuration:100,
duration:10,
},()=>{
fetch(`/api/graph_by_height_and_duration?height=${endBlock}&duration=${that.state.requestDuration}`,{
method:'GET',
headers:{
'Content-Type':'application/json;charset=UTF-8'
},
})
.then(res =>res.json())
.then((newData) => {
myChart.hideLoading()
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
// console.log(moment(min3/1000000).format('YYYY-MM-DD HH:mm:ss'),'最小') newData.result.Rows[1] = allRows1Arr
newData.result.Rows[2] = allRows2Arr
// if(params.start<=40){ newData.result.AxisX.TopAxisX = allTopAxisXArr
// console.log("该往后加载数据了") newData.result.AxisX.BottomAxisX = allBottomAxisXArr
// fetch(`/api/graph_by_height_and_duration?height=${b}&duration=${that.state.requestDuration}`,{ newData.result.Links = allLinksArr
// method:'GET', that.initChart(newData,1)
// headers:{ })
// 'Content-Type':'application/json;charset=UTF-8' console.log(that.state.requestDuration,that.state.duration,'正正正')
// }, })
// }) }
// .then(res =>res.json())
// .then((newDatas) => {
// console.log(newDatas.result)
// // console.log(moment(newDatas.result.AxisX.BlockTime/1000000).format('YYYY-MM-DD HH:mm:ss'))
// })
// }
}) })
}) })
}) })
...@@ -232,7 +259,6 @@ class App extends Component { ...@@ -232,7 +259,6 @@ class App extends Component {
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)
maxtime.format('YYYY-MM-DD HH:mm:ss') maxtime.format('YYYY-MM-DD HH:mm:ss')
// console.log(maxtime.format('YYYY-MM-DD HH:mm:ss'))
maxtime.add(this.state.duration,'seconds').format('YYYY-MM-DD HH:mm:ss') maxtime.add(this.state.duration,'seconds').format('YYYY-MM-DD HH:mm:ss')
maxtime.unix() maxtime.unix()
var mintime=moment(data.result.AxisX.BlockTime/1000000) var mintime=moment(data.result.AxisX.BlockTime/1000000)
...@@ -258,7 +284,7 @@ class App extends Component { ...@@ -258,7 +284,7 @@ class App extends Component {
] ]
}) })
data.result.AxisX.BottomAxisX.map(item=>{ data.result.AxisX.BottomAxisX.map(item=>{
markline.push( [ markline.push([
{ {
// name: 'start', // name: 'start',
xAxis:item.Time, xAxis:item.Time,
...@@ -276,16 +302,21 @@ class App extends Component { ...@@ -276,16 +302,21 @@ class App extends Component {
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.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')
}
if(this.state.duration>0){
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,'最大');
} }
var source= data.result.Rows var source= data.result.Rows
var target=[]; var target=[];
...@@ -306,9 +337,6 @@ class App extends Component { ...@@ -306,9 +337,6 @@ class App extends Component {
} }
target.push(list); target.push(list);
} }
// var chartDom = document.getElementById('main');
// var myChart = echarts.init(chartDom);
var option; var option;
const series = []; const series = [];
this.state.AxisY.forEach(function (type) { this.state.AxisY.forEach(function (type) {
...@@ -407,23 +435,16 @@ class App extends Component { ...@@ -407,23 +435,16 @@ class App extends Component {
{ {
type: 'inside', type: 'inside',
startValue:mintime.unix()*1000000000, startValue:mintime.unix()*1000000000,
endValue:maxtime.unix()*1000000000, // endValue:maxtime.unix()*1000000000,
endValue:this.state.duration < 0 ? maxtime.unix()*1000000000 : (maxtime.subtract(90,'second')).unix()*1000000000,
disabled:false, disabled:false,
zoomLock: true, zoomLock: true,
// xAxisIndex: [0],
// labelFormatter: function (dataIndex) {
// console.log(dataIndex,'dd')
// }
}, },
{ {
// start: 40,
// end:60,
// startValue:mintime.unix()*1000000000,
// endValue:maxtime.unix()*1000000000,
disabled:false, disabled:false,
zoomLock: true, zoomLock: true,
}, },
], ],
xAxis: [ xAxis: [
{ {
...@@ -433,9 +454,11 @@ class App extends Component { ...@@ -433,9 +454,11 @@ 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.add(5,'seconds').unix()*1000000000, // max:maxtime.unix()*1000000000,
max:maxtime.unix()*1000000000, // min:mintime.subtract(100,'seconds').unix()*1000000000,
min:mintime.subtract(100,'seconds').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,
// splitNumber:10, // splitNumber:10,
axisLine:{ axisLine:{
show:true, show:true,
...@@ -445,8 +468,6 @@ class App extends Component { ...@@ -445,8 +468,6 @@ class App extends Component {
alignWithLabel:true, alignWithLabel:true,
}, },
}, },
// 上边的轴指的是之前block
{ {
axisLine:{ axisLine:{
show: true, show: true,
...@@ -459,24 +480,6 @@ class App extends Component { ...@@ -459,24 +480,6 @@ class App extends Component {
alignWithLabel:true, alignWithLabel:true,
}, },
}, },
// {
// axisLine:{
// show: true,
// symbol: ['none', 'arrow']
// },
// offset:-550,
// axisLabel: {
// formatter: (function(value){
// return moment(parseInt(value/1000000)).format('YYYY-MM-DD HH:mm:ss')
// })
// },
// max:maxtime.unix()*1000000000,
// min:mintime.subtract(100,'seconds').unix()*1000000000,
// axisTick: {
// alignWithLabel:true,
// },
// },
], ],
yAxis: { yAxis: {
type: 'category', type: 'category',
...@@ -510,17 +513,18 @@ class App extends Component { ...@@ -510,17 +513,18 @@ class App extends Component {
dataZoom: {} dataZoom: {}
} }
}, },
// dataZoom: {
// type: 'inside'
// },
series: series, series: series,
}; };
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'));
myChart.setOption(option); myChart.setOption(option);
//
// window.addEventListener("resize", function () { // window.addEventListener("resize", function () {
// myChart.resize(); //使图表自适应窗口的大小 // myChart.resize(); //使图表自适应窗口的大小
// }) // })
this.extension(myChart); this.extension(myChart);
} }
extension(myChart) { 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