Skip to content

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

up

parent f75e26be
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 26 deletions
src/App.js
View file @ 55888890
...@@ -14,7 +14,7 @@ class App extends Component { ...@@ -14,7 +14,7 @@ class App extends Component {
duration: -10, duration: -10,
interval: null, interval: null,
// requestDuration: -50 // requestDuration: -50
requestDuration: -10 requestDuration: -100
} }
componentDidMount(){ componentDidMount(){
let that = this let that = this
...@@ -98,6 +98,7 @@ class App extends Component { ...@@ -98,6 +98,7 @@ 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){
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;
...@@ -156,10 +157,52 @@ class App extends Component { ...@@ -156,10 +157,52 @@ class App extends Component {
}) })
}) })
// console.log(min,'最小'); // console.log(min,'最小');
console.log(b,'bbbb'); console.log(b,'当前');
console.log(maxB,'max'); console.log(maxB,'max');
console.log(minB,'min'); console.log(minB,'min');
if(params.start == 0){
fetch(`/api/graph_by_height_and_duration?height=${b}&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 = [...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]
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,1)
})
}
// console.log(moment(min3/1000000).format('YYYY-MM-DD HH:mm:ss'),'最小') // console.log(moment(min3/1000000).format('YYYY-MM-DD HH:mm:ss'),'最小')
// if(params.start<=40){ // if(params.start<=40){
...@@ -184,7 +227,7 @@ class App extends Component { ...@@ -184,7 +227,7 @@ class App extends Component {
componentWillUnmount() { componentWillUnmount() {
this.state.interval = null this.state.interval = null
} }
initChart(data) { initChart(data,values) {
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)
...@@ -367,17 +410,11 @@ class App extends Component { ...@@ -367,17 +410,11 @@ class App extends Component {
endValue:maxtime.unix()*1000000000, endValue:maxtime.unix()*1000000000,
disabled:false, disabled:false,
zoomLock: true, zoomLock: true,
// xAxisIndex: [0],
// labelFormatter: function (dataIndex) { // labelFormatter: function (dataIndex) {
// console.log(dataIndex,'dd') // console.log(dataIndex,'dd')
// } // }
}, },
// {
// type: 'inside',
// start: 70,
// end: 100,
// disabled:false,
// zoomLock: true,
// },
{ {
// start: 40, // start: 40,
// end:60, // end:60,
...@@ -385,7 +422,8 @@ class App extends Component { ...@@ -385,7 +422,8 @@ class App extends Component {
// endValue:maxtime.unix()*1000000000, // endValue:maxtime.unix()*1000000000,
disabled:false, disabled:false,
zoomLock: true, zoomLock: true,
} },
], ],
xAxis: [ xAxis: [
{ {
...@@ -396,8 +434,8 @@ class App extends Component { ...@@ -396,8 +434,8 @@ class App extends Component {
}) })
}, },
// max:maxtime.add(5,'seconds').unix()*1000000000, // max:maxtime.add(5,'seconds').unix()*1000000000,
max:maxtime.add(20,'seconds').unix()*1000000000, max:maxtime.unix()*1000000000,
min:mintime.subtract(20,'seconds').unix()*1000000000, min:mintime.subtract(100,'seconds').unix()*1000000000,
// splitNumber:10, // splitNumber:10,
axisLine:{ axisLine:{
show:true, show:true,
...@@ -421,18 +459,24 @@ class App extends Component { ...@@ -421,18 +459,24 @@ class App extends Component {
alignWithLabel:true, alignWithLabel:true,
}, },
}, },
{ // {
axisLine:{ // axisLine:{
show: true, // show: true,
symbol: ['none', 'arrow'] // symbol: ['none', 'arrow']
}, // },
axisLabel:{ // offset:-550,
inside: true, // axisLabel: {
}, // formatter: (function(value){
axisTick: { // return moment(parseInt(value/1000000)).format('YYYY-MM-DD HH:mm:ss')
alignWithLabel:true, // })
}, // },
}, // max:maxtime.unix()*1000000000,
// min:mintime.subtract(100,'seconds').unix()*1000000000,
// axisTick: {
// alignWithLabel:true,
// },
// },
], ],
yAxis: { yAxis: {
type: 'category', type: 'category',
......
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