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 { ...@@ -24,7 +24,6 @@ class App extends Component {
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
myChart.showLoading() 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}`,{
// 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'
...@@ -60,47 +59,47 @@ class App extends Component { ...@@ -60,47 +59,47 @@ 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(() => { if(!that.interval){
// fetch(`/api/graph_by_height_and_duration?height=0&duration=${that.state.requestDuration}`,{ that.interval = setInterval(() => {
// method:'GET', fetch(`/api/graph_by_height_and_duration?height=0&duration=${that.state.requestDuration}`,{
// headers:{ method:'GET',
// 'Content-Type':'application/json;charset=UTF-8' headers:{
// }, 'Content-Type':'application/json;charset=UTF-8'
// }) },
// .then(res =>res.json()) })
// .then((newData) => { .then(res =>res.json())
// let {Rows, AxisX, Links } = newData.result .then((newData) => {
// let {TopAxisX, BottomAxisX} = AxisX let {Rows, AxisX, Links } = newData.result
// allRows0Arr = Rows[0] let {TopAxisX, BottomAxisX} = AxisX
// allRows1Arr = Rows[1] allRows0Arr = Rows[0]
// allRows2Arr = Rows[2] allRows1Arr = Rows[1]
// allTopAxisXArr = TopAxisX allRows2Arr = Rows[2]
// allBottomAxisXArr = BottomAxisX allTopAxisXArr = TopAxisX
// allLinksArr = Links allBottomAxisXArr = BottomAxisX
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');
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.series,'series')
// var min1 // var min1
// var min2 // var min2
var min=0 var min=0
...@@ -108,7 +107,7 @@ class App extends Component { ...@@ -108,7 +107,7 @@ class App extends Component {
var min3=0 var min3=0
var startBlock=0 var startBlock=0
var endBlock=0; var endBlock=0;
var maxBlock = 0 var maxBlock = 0
var minBlock = 0 var minBlock = 0
options.series.map(item=>{ options.series.map(item=>{
item.markLine.data.forEach(item1=>{ item.markLine.data.forEach(item1=>{
...@@ -208,15 +207,13 @@ class App extends Component { ...@@ -208,15 +207,13 @@ class App extends Component {
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,1) that.initChart(newData)
}) })
}) })
// console.log(that.state.requestDuration,that.state.duration,'负负负')
} }
if(params.end === 100){ if(params.end === 100){
myChart.showLoading() myChart.showLoading()
// console.log(that.state.requestDuration,that.state.duration,'requestAnimationFrame','duration')
that.setState({ that.setState({
requestDuration:100, requestDuration:100,
duration:10, duration:10,
...@@ -248,7 +245,6 @@ class App extends Component { ...@@ -248,7 +245,6 @@ 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,'正正正')
}) })
} }
}) })
...@@ -259,7 +255,8 @@ class App extends Component { ...@@ -259,7 +255,8 @@ class App extends Component {
componentWillUnmount() { componentWillUnmount() {
this.state.interval = null this.state.interval = null
} }
initChart(data,values) { 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)
...@@ -316,7 +313,7 @@ class App extends Component { ...@@ -316,7 +313,7 @@ class App extends Component {
// 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){ if(this.state.duration>0){
mintime=moment(data.result.AxisX.BlockTime/1000000); mintime=moment(data.result.AxisX.BlockTime/1000000);
maxtime=moment(data.result.AxisX.BlockTime/1000000) maxtime=moment(data.result.AxisX.BlockTime/1000000)
...@@ -526,20 +523,31 @@ class App extends Component { ...@@ -526,20 +523,31 @@ class App extends Component {
series: series, 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('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'));
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.clear()
myChart.setOption(option,true); myChart.setOption(option,true);
// //
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