Skip to content

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

'up'

parent bfb75d0a
Show whitespace changes
Inline Side-by-side
Showing with 162 additions and 76 deletions
src/App.js
View file @ f75e26be
...@@ -10,13 +10,19 @@ class App extends Component { ...@@ -10,13 +10,19 @@ class App extends Component {
AxisY:[], AxisY:[],
Links:[], Links:[],
target:[], target:[],
duration: -50, // duration: -50,
duration: -10,
interval: null, interval: null,
requestDuration: -50 // requestDuration: -50
requestDuration: -10
} }
componentDidMount(){ componentDidMount(){
let that = this let that = this
var chartDom = document.getElementById('main');
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}`,{
// 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'
...@@ -26,6 +32,7 @@ class App extends Component { ...@@ -26,6 +32,7 @@ class App extends Component {
res.json() res.json()
) )
.then((resData) => { .then((resData) => {
myChart.hideLoading()
let allRows0Arr = [] let allRows0Arr = []
let allRows1Arr = [] let allRows1Arr = []
let allRows2Arr = [] let allRows2Arr = []
...@@ -51,73 +58,141 @@ class App extends Component { ...@@ -51,73 +58,141 @@ 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(() => {
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 = [...allRows0Arr, ...Rows[0].slice(Rows[0].length-2, Rows[0].length-1)] // that.interval = setInterval(() => {
// allRows1Arr = [...allRows1Arr, ...Rows[1].slice(Rows[1].length-2, Rows[1].length-1)] // fetch(`/api/graph_by_height_and_duration?height=0&duration=${that.state.requestDuration}`,{
// allRows2Arr = [...allRows2Arr, ...Rows[2].slice(Rows[2].length-2, Rows[2].length-1)] // method:'GET',
// allTopAxisXArr = [...allTopAxisXArr, ...TopAxisX.slice(TopAxisX.length-2, TopAxisX.length-1)] // headers:{
// allBottomAxisXArr = [...allBottomAxisXArr, ...BottomAxisX.slice(BottomAxisX.length-2, BottomAxisX.length-1)] // 'Content-Type':'application/json;charset=UTF-8'
// allLinksArr = [...allLinksArr, ...Links.slice(Links.length-2, Links.length-1)] // },
allRows0Arr = Rows[0] // })
allRows1Arr = Rows[1] // .then(res =>res.json())
allRows2Arr = Rows[2] // .then((newData) => {
allTopAxisXArr = TopAxisX // let {Rows, AxisX, Links } = newData.result
allBottomAxisXArr = BottomAxisX // let {TopAxisX, BottomAxisX} = AxisX
allLinksArr = Links
// // 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[0] = allRows0Arr
newData.result.Rows[2] = allRows2Arr // newData.result.Rows[1] = allRows1Arr
newData.result.AxisX.TopAxisX = allTopAxisXArr // newData.result.Rows[2] = allRows2Arr
newData.result.AxisX.BottomAxisX = allBottomAxisXArr // newData.result.AxisX.TopAxisX = allTopAxisXArr
newData.result.Links = allLinksArr // newData.result.AxisX.BottomAxisX = allBottomAxisXArr
that.initChart(newData) // newData.result.Links = allLinksArr
}) // that.initChart(newData)
}, 1000); // })
// }, 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){
console.log(params) 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(options,'options')
// console.log(options.series,'series')
// var min1
// var min2
var min=0
var min3=0
var b=0
var maxB = 0
var minB = 0
options.series.map(item=>{
item.markLine.data.forEach(item1=>{
item1.map(item2=>{
// console.log(item2.xAxis)
if(item2.yAxis === 'Block'){
if(item2.label !== undefined){
if(maxB === 0 ){
maxB=item2.label.formatter
minB=item2.label.formatter
}else {
if(item2.label.formatter<minB){
minB = item2.label.formatter
}
if(item2.label.formatter>maxB){
maxB = item2.label.formatter
}
}
}
if(min === 0){
min = item2.xAxis - startValue;
if(min < 0 ){
min = -min;
}
if(item2.label!==undefined){
b=item2.label.formatter
min3=item2.xAxis
}
}else {
var min2=item2.xAxis - startValue;
if(min2 < 0){
min2 = -min2;
}
if(min > min2){
min = min2
if(item2.label !== undefined ){
b=item2.label.formatter
min3=item2.xAxis
}
}
}
}
})
})
})
// console.log(min,'最小');
console.log(b,'bbbb');
console.log(maxB,'max');
console.log(minB,'min');
// console.log(moment(min3/1000000).format('YYYY-MM-DD HH:mm:ss'),'最小')
clearInterval(that.interval) // if(params.start<=40){
// console.log("该往后加载数据了")
// 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((newDatas) => {
// console.log(newDatas.result)
// // console.log(moment(newDatas.result.AxisX.BlockTime/1000000).format('YYYY-MM-DD HH:mm:ss'))
// })
// }
}) })
}) })
}) })
} }
componentWillUnmount() { componentWillUnmount() {
this.state.interval = null this.state.interval = null
} }
initChart(data) { initChart(data) {
var chartDom = document.getElementById('main'); var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var dataArr=[]
// console.log(data.result.AxisX.BlockTime,'开始')
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')) // 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)
var markline=data.result.AxisX.TopAxisX.map(item=>{ var markline=data.result.AxisX.TopAxisX.map(item=>{
return [ return [
{ {
...@@ -233,12 +308,6 @@ class App extends Component { ...@@ -233,12 +308,6 @@ class App extends Component {
var newArr=arr.reduce(function(total,currentValue){ var newArr=arr.reduce(function(total,currentValue){
return total.concat(currentValue) return total.concat(currentValue)
}) })
dataArr=arr.reduce(function(total,currentValue){
return total.concat(currentValue)
})
// console.log(dataArr,'初始')
// console.log(dataArr.length,'初始长度')
// console.log(newArr,'new')
let links = data.result.Links; let links = data.result.Links;
links.map(item=>{ links.map(item=>{
item['source'] = item['Source'] item['source'] = item['Source']
...@@ -287,19 +356,35 @@ class App extends Component { ...@@ -287,19 +356,35 @@ class App extends Component {
}, },
grid: { grid: {
left: 40, left: 40,
bottom: 0, bottom: 50,
containLabel: true, containLabel: true,
top: 80 top: 80
}, },
dataZoom: [ dataZoom: [
{ {
type: 'inside', type: 'inside',
start: 70, startValue:mintime.unix()*1000000000,
end: 100 endValue:maxtime.unix()*1000000000,
}, disabled:false,
zoomLock: true,
// labelFormatter: function (dataIndex) {
// console.log(dataIndex,'dd')
// }
},
// {
// type: 'inside',
// start: 70,
// end: 100,
// disabled:false,
// zoomLock: true,
// },
{ {
start: 70, // start: 40,
end: 100, // end:60,
// startValue:mintime.unix()*1000000000,
// endValue:maxtime.unix()*1000000000,
disabled:false,
zoomLock: true,
} }
], ],
xAxis: [ xAxis: [
...@@ -310,9 +395,10 @@ class App extends Component { ...@@ -310,9 +395,10 @@ 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.add(5,'seconds').unix()*1000000000,
min:mintime.unix()*1000000000, max:maxtime.add(20,'seconds').unix()*1000000000,
splitNumber:10, min:mintime.subtract(20,'seconds').unix()*1000000000,
// splitNumber:10,
axisLine:{ axisLine:{
show:true, show:true,
symbol: ['none', 'arrow'] symbol: ['none', 'arrow']
...@@ -374,7 +460,6 @@ class App extends Component { ...@@ -374,7 +460,6 @@ class App extends Component {
axisTick: { axisTick: {
alignWithLabel: true alignWithLabel: true
} }
}, },
toolbox: { toolbox: {
feature: { feature: {
...@@ -404,8 +489,8 @@ class App extends Component { ...@@ -404,8 +489,8 @@ class App extends Component {
} }
var styleCss=`position: absolute;margin-left:35px;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px` var styleCss=`position: absolute;margin-left:35px;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px`
myChart.on('mouseover',function(params){ myChart.on('mouseover',function(params){
if (params.componentType == 'yAxis') { if (params.componentType === 'yAxis') {
var elementDiv = document.querySelector('#extension') elementDiv = document.querySelector('#extension')
var elementStyle = styleCss var elementStyle = styleCss
elementDiv.style.cssText = elementStyle elementDiv.style.cssText = elementStyle
elementDiv.innerHTML = params.value elementDiv.innerHTML = params.value
...@@ -416,10 +501,10 @@ class App extends Component { ...@@ -416,10 +501,10 @@ class App extends Component {
elementDiv.style.top = yy + 'px' elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px' elementDiv.style.left = xx + 'px'
} }
}else if(params.componentType == "series"){ }else if(params.componentType === "series"){
if(params.name === params.data.name){ if(params.name === params.data.name){
var elementDiv = document.querySelector('#extension') elementDiv = document.querySelector('#extension')
var elementStyle = styleCss elementStyle = styleCss
elementDiv.style.cssText = elementStyle elementDiv.style.cssText = elementStyle
elementDiv.innerHTML=`<p>${moment(parseInt(params.data.value[0]/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')}</p><p>round：${params.data.value[4]}</p>` elementDiv.innerHTML=`<p>${moment(parseInt(params.data.value[0]/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')}</p><p>round：${params.data.value[4]}</p>`
document.querySelector('html').onmousemove = function (event) { document.querySelector('html').onmousemove = function (event) {
...@@ -430,13 +515,13 @@ class App extends Component { ...@@ -430,13 +515,13 @@ class App extends Component {
elementDiv.style.left = xx + 'px' elementDiv.style.left = xx + 'px'
} }
} }
}else if(params.componentType == "markLine"){ }else if(params.componentType === "markLine"){
var elementDiv = document.querySelector('#extension') elementDiv = document.querySelector('#extension')
var elementStyle = styleCss elementStyle = styleCss
elementDiv.style.cssText = elementStyle elementDiv.style.cssText = elementStyle
elementDiv.innerHTML = moment(parseInt(params.data.xAxis/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS') elementDiv.innerHTML = moment(parseInt(params.data.xAxis/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')
document.querySelector('html').onmousemove = function (event) { document.querySelector('html').onmousemove = function (event) {
var elementDiv = document.querySelector('#extension') elementDiv = document.querySelector('#extension')
var xx = event.pageX - 10 var xx = event.pageX - 10
var yy = event.pageY + 15 var yy = event.pageY + 15
elementDiv.style.top = yy + 'px' elementDiv.style.top = yy + 'px'
...@@ -446,16 +531,16 @@ class App extends Component { ...@@ -446,16 +531,16 @@ class App extends Component {
}) })
myChart.on('mouseout', function (params) { myChart.on('mouseout', function (params) {
var elementDiv = document.querySelector('#extension') elementDiv = document.querySelector('#extension')
if (params.componentType == 'yAxis') { if (params.componentType === 'yAxis') {
elementDiv.style.cssText = 'display:none' elementDiv.style.cssText = 'display:none'
} }
if(params.componentType == "series"){ if(params.componentType === "series"){
if(params.name === params.data.name){ if(params.name === params.data.name){
elementDiv.style.cssText = 'display:none' elementDiv.style.cssText = 'display:none'
} }
} }
if(params.componentType == "markLine"){ if(params.componentType === "markLine"){
elementDiv.style.cssText = 'display:none' elementDiv.style.cssText = 'display:none'
} }
}) })
......
src/setupProxy.js
View file @ f75e26be
...@@ -3,6 +3,7 @@ module.exports = function (app) { ...@@ -3,6 +3,7 @@ module.exports = function (app) {
app.use(createProxyMiddleware('/api', app.use(createProxyMiddleware('/api',
{ {
"target": "http://54.168.125.67:26657", "target": "http://54.168.125.67:26657",
// "target": "http://3.9.177.160:50080",
"changeOrigin": true, "changeOrigin": true,
"pathRewrite": { "pathRewrite": {
"^/api": "/" "^/api": "/"
......
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