Skip to content

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

'newup'

parent 370eaf0d
Hide whitespace changes
Inline Side-by-side
Showing with 53 additions and 45 deletions
src/App.js
View file @ 91f036e4
......@@ -24,7 +24,6 @@ class App extends Component {
var myChart = echarts.init(chartDom);
myChart.showLoading()
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',
headers:{
'Content-Type':'application/json;charset=UTF-8'
......@@ -60,47 +59,47 @@ class App extends Component {
allLinksArr = Links
// console.log(Rows, TopAxisX, BottomAxisX, Links)
that.initChart(resData)
// that.interval = setInterval(() => {
// fetch(`/api/graph_by_height_and_duration?height=0&duration=${that.state.requestDuration}`,{
// method:'GET',
// headers:{
// 'Content-Type':'application/json;charset=UTF-8'
// },
// })
// .then(res =>res.json())
// .then((newData) => {
// 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
if(!that.interval){
that.interval = setInterval(() => {
fetch(`/api/graph_by_height_and_duration?height=0&duration=${that.state.requestDuration}`,{
method:'GET',
headers:{
'Content-Type':'application/json;charset=UTF-8'
},
})
.then(res =>res.json())
.then((newData) => {
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
// that.initChart(newData)
// })
// }, 5000);
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
that.initChart(newData)
})
}, 5000);
}
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
myChart.on('datazoom', function(params){
clearInterval(that.interval,console.log('滑动清除定时器'))
// console.log(params,'params');
clearInterval(that.interval)
var options = myChart.getOption();
var endValue=options.dataZoom[0].endValue;
var startValue=options.dataZoom[0].startValue;
// 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.series,'series')
// var min1
// var min2
var min=0
......@@ -108,7 +107,7 @@ class App extends Component {
var min3=0
var startBlock=0
var endBlock=0;
var maxBlock = 0
var maxBlock = 0
var minBlock = 0
options.series.map(item=>{
item.markLine.data.forEach(item1=>{
......@@ -208,15 +207,13 @@ class App extends Component {
newData.result.AxisX.TopAxisX = allTopAxisXArr
newData.result.AxisX.BottomAxisX = allBottomAxisXArr
newData.result.Links = allLinksArr
that.initChart(newData,1)
that.initChart(newData)
})
})
// 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,
......@@ -248,7 +245,6 @@ class App extends Component {
newData.result.Links = allLinksArr
that.initChart(newData,1)
})
// console.log(that.state.requestDuration,that.state.duration,'正正正')
})
}
})
......@@ -259,7 +255,8 @@ class App extends Component {
componentWillUnmount() {
this.state.interval = null
}
initChart(data,values) {
initChart(data) {
// console.log(data);
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var maxtime=moment(data.result.AxisX.BlockTime/1000000)
......@@ -316,7 +313,7 @@ class App extends Component {
// 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')
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)
......@@ -526,20 +523,31 @@ class App extends Component {
series: series,
};
option.series.map(item=>{
item.data.map(item1=>{
if(option.dataZoom[0].startValue <= item1.value[0] && option.dataZoom[0].endValue >= item1.value[0]){
if(item1.value[7] === 'Witness'){
}
}
})
})
// 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({
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')
})
myChart.clear()
// myChart.clear()
myChart.setOption(option,true);
//
window.addEventListener("resize", function () {
myChart.resize(); //使图表自适应窗口的大小
})
// window.addEventListener("resize", function () {
// myChart.resize();
// })
this.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