Skip to content

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

定时器

parent ccb19aed
Hide whitespace changes
Inline Side-by-side
Showing with 60 additions and 53 deletions
src/App.js
View file @ 07ddadbb
...@@ -58,46 +58,45 @@ class App extends Component { ...@@ -58,46 +58,45 @@ class App extends Component {
allLinksArr = Links allLinksArr = Links
// console.log(Rows, TopAxisX, BottomAxisX, Links) // console.log(Rows, TopAxisX, BottomAxisX, Links)
that.initChart(resData) that.initChart(resData)
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)
// }) })
// }, 5000); }, 5000);
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('滑动清除定时器')) clearInterval(that.interval)
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('当前结束时间：',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
...@@ -105,25 +104,24 @@ class App extends Component { ...@@ -105,25 +104,24 @@ class App extends Component {
var min=0 var min=0
var endmin=0 var endmin=0
var min3=0 var min3=0
var b=0 var startBlock=0
var endBlock=0; var endBlock=0;
var maxB = 0 var maxBlock = 0
var minB = 0 var minBlock = 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,'1111')
if(item2.yAxis === 'Block'){ if(item2.yAxis === 'Block'){
if(item2.label !== undefined){ if(item2.label !== undefined){
if(maxB === 0 ){ if(maxBlock === 0 ){
maxB=item2.label.formatter maxBlock=item2.label.formatter
minB=item2.label.formatter minBlock=item2.label.formatter
}else { }else {
if(item2.label.formatter<minB){ if(item2.label.formatter<minBlock){
minB = item2.label.formatter minBlock = item2.label.formatter
} }
if(item2.label.formatter>maxB){ if(item2.label.formatter>maxBlock){
maxB = item2.label.formatter maxBlock = item2.label.formatter
} }
} }
} }
...@@ -137,7 +135,7 @@ class App extends Component { ...@@ -137,7 +135,7 @@ class App extends Component {
endmin=-endmin endmin=-endmin
} }
if(item2.label!==undefined){ if(item2.label!==undefined){
b=item2.label.formatter startBlock=item2.label.formatter
endBlock=item2.label.formatter endBlock=item2.label.formatter
min3=item2.xAxis min3=item2.xAxis
} }
...@@ -153,7 +151,7 @@ class App extends Component { ...@@ -153,7 +151,7 @@ class App extends Component {
if(min > min2){ if(min > min2){
min = min2 min = min2
if(item2.label !== undefined ){ if(item2.label !== undefined ){
b=item2.label.formatter startBlock=item2.label.formatter
min3=item2.xAxis min3=item2.xAxis
} }
} }
...@@ -170,13 +168,19 @@ class App extends Component { ...@@ -170,13 +168,19 @@ 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({
requestDuration:-100, requestDuration:-100,
duration:-10, duration:-10,
},()=>{ },()=>{
fetch(`/api/graph_by_height_and_duration?height=${b}&duration=${that.state.requestDuration}`,{ fetch(`/api/graph_by_height_and_duration?height=${startBlock}&duration=${that.state.requestDuration}`,{
method:'GET', method:'GET',
headers:{ headers:{
'Content-Type':'application/json;charset=UTF-8' 'Content-Type':'application/json;charset=UTF-8'
...@@ -205,7 +209,7 @@ class App extends Component { ...@@ -205,7 +209,7 @@ class App extends Component {
that.initChart(newData,1) that.initChart(newData,1)
}) })
}) })
console.log(that.state.requestDuration,that.state.duration,'负负负') // console.log(that.state.requestDuration,that.state.duration,'负负负')
} }
if(params.end === 100){ if(params.end === 100){
...@@ -220,7 +224,6 @@ class App extends Component { ...@@ -220,7 +224,6 @@ class App extends Component {
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) => {
...@@ -243,7 +246,7 @@ class App extends Component { ...@@ -243,7 +246,7 @@ 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,'正正正') // console.log(that.state.requestDuration,that.state.duration,'正正正')
}) })
} }
}) })
...@@ -284,7 +287,7 @@ class App extends Component { ...@@ -284,7 +287,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,
...@@ -304,7 +307,7 @@ class App extends Component { ...@@ -304,7 +307,7 @@ class App extends Component {
}, },
]) ])
}) })
console.log('请求requestDuration',this.state.requestDuration,'时间间隔：',this.state.duration) // 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)
...@@ -444,6 +447,9 @@ class App extends Component { ...@@ -444,6 +447,9 @@ class App extends Component {
{ {
disabled:false, disabled:false,
zoomLock: true, zoomLock: true,
labelFormatter: function (value) {
return moment(value/1000000).format('YYYY-MM-DD HH:mm:ss')
}
}, },
], ],
xAxis: [ xAxis: [
...@@ -516,9 +522,10 @@ class App extends Component { ...@@ -516,9 +522,10 @@ class App extends Component {
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('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')); // 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.clear()
myChart.setOption(option,true);
// //
// window.addEventListener("resize", function () { // window.addEventListener("resize", function () {
// myChart.resize(); //使图表自适应窗口的大小 // myChart.resize(); //使图表自适应窗口的大小
......
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