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
Hide 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 {
AxisY:[],
Links:[],
target:[],
duration: -50,
// duration: -50,
duration: -10,
interval: null,
requestDuration: -50
// requestDuration: -50
requestDuration: -10
}
componentDidMount(){
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}`,{
method:'GET',
headers:{
'Content-Type':'application/json;charset=UTF-8'
......@@ -26,6 +32,7 @@ class App extends Component {
res.json()
)
.then((resData) => {
myChart.hideLoading()
let allRows0Arr = []
let allRows1Arr = []
let allRows2Arr = []
......@@ -51,73 +58,141 @@ 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
// 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)]
// 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
// // 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)
})
}, 1000);
// 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){
console.log(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(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'),'最小')
// 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() {
this.state.interval = null
}
initChart(data) {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var dataArr=[]
// console.log(data.result.AxisX.BlockTime,'开始')
var maxtime=moment(data.result.AxisX.BlockTime/1000000)
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')
// console.log(maxtime.format('YYYY-MM-DD HH:mm:ss'))
maxtime.add(this.state.duration,'seconds').format('YYYY-MM-DD HH:mm:ss')
maxtime.unix()
var mintime=moment(data.result.AxisX.BlockTime/1000000)
var markline=data.result.AxisX.TopAxisX.map(item=>{
return [
{
......@@ -233,12 +308,6 @@ class App extends Component {
var newArr=arr.reduce(function(total,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;
links.map(item=>{
item['source'] = item['Source']
......@@ -287,19 +356,35 @@ class App extends Component {
},
grid: {
left: 40,
bottom: 0,
bottom: 50,
containLabel: true,
top: 80
},
dataZoom: [
{
type: 'inside',
start: 70,
end: 100
type: 'inside',
startValue:mintime.unix()*1000000000,
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,
end: 100,
// start: 40,
// end:60,
// startValue:mintime.unix()*1000000000,
// endValue:maxtime.unix()*1000000000,
disabled:false,
zoomLock: true,
}
],
xAxis: [
......@@ -310,9 +395,10 @@ class App extends Component {
return moment(parseInt(value/1000000)).format('YYYY-MM-DD HH:mm:ss')
})
},
max:maxtime.add(5,'seconds').unix()*1000000000,
min:mintime.unix()*1000000000,
splitNumber:10,
// max:maxtime.add(5,'seconds').unix()*1000000000,
max:maxtime.add(20,'seconds').unix()*1000000000,
min:mintime.subtract(20,'seconds').unix()*1000000000,
// splitNumber:10,
axisLine:{
show:true,
symbol: ['none', 'arrow']
......@@ -374,7 +460,6 @@ class App extends Component {
axisTick: {
alignWithLabel: true
}
},
toolbox: {
feature: {
......@@ -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`
myChart.on('mouseover',function(params){
if (params.componentType == 'yAxis') {
var elementDiv = document.querySelector('#extension')
if (params.componentType === 'yAxis') {
elementDiv = document.querySelector('#extension')
var elementStyle = styleCss
elementDiv.style.cssText = elementStyle
elementDiv.innerHTML = params.value
......@@ -416,10 +501,10 @@ class App extends Component {
elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px'
}
}else if(params.componentType == "series"){
}else if(params.componentType === "series"){
if(params.name === params.data.name){
var elementDiv = document.querySelector('#extension')
var elementStyle = styleCss
elementDiv = document.querySelector('#extension')
elementStyle = styleCss
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>`
document.querySelector('html').onmousemove = function (event) {
......@@ -430,13 +515,13 @@ class App extends Component {
elementDiv.style.left = xx + 'px'
}
}
}else if(params.componentType == "markLine"){
var elementDiv = document.querySelector('#extension')
var elementStyle = styleCss
}else if(params.componentType === "markLine"){
elementDiv = document.querySelector('#extension')
elementStyle = styleCss
elementDiv.style.cssText = elementStyle
elementDiv.innerHTML = moment(parseInt(params.data.xAxis/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')
document.querySelector('html').onmousemove = function (event) {
var elementDiv = document.querySelector('#extension')
elementDiv = document.querySelector('#extension')
var xx = event.pageX - 10
var yy = event.pageY + 15
elementDiv.style.top = yy + 'px'
......@@ -446,16 +531,16 @@ class App extends Component {
})
myChart.on('mouseout', function (params) {
var elementDiv = document.querySelector('#extension')
if (params.componentType == 'yAxis') {
elementDiv = document.querySelector('#extension')
if (params.componentType === 'yAxis') {
elementDiv.style.cssText = 'display:none'
}
if(params.componentType == "series"){
if(params.componentType === "series"){
if(params.name === params.data.name){
elementDiv.style.cssText = 'display:none'
}
}
if(params.componentType == "markLine"){
if(params.componentType === "markLine"){
elementDiv.style.cssText = 'display:none'
}
})
......
src/setupProxy.js
View file @ f75e26be
......@@ -3,6 +3,7 @@ module.exports = function (app) {
app.use(createProxyMiddleware('/api',
{
"target": "http://54.168.125.67:26657",
// "target": "http://3.9.177.160:50080",
"changeOrigin": true,
"pathRewrite": {
"^/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