Skip to content

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

newup

parent 34798fcc
Hide whitespace changes
Inline Side-by-side
Showing with 347 additions and 358 deletions
src/App.js
View file @ 7b5f56c0
...@@ -13,397 +13,386 @@ class App extends Component { ...@@ -13,397 +13,386 @@ class App extends Component {
duration:-10 duration:-10
} }
componentDidMount(){ componentDidMount(){
fetch(`/api/graph_by_height_and_duration?height=0&duration=-10`,{ fetch(`/api/graph_by_height_and_duration?height=0&duration=-10`,{
method:'GET', method:'GET',
headers:{ headers:{
'Content-Type':'application/json;charset=UTF-8' 'Content-Type':'application/json;charset=UTF-8'
}, },
})
.then(res =>
res.json()
)
.then((data) => {
this.setState({
data:data.result.Rows,
TopAxisX:data.result.AxisX.TopAxisX,
BottomAxisX:data.result.AxisX.BottomAxisX,
AxisY:data.result.AxisY,
Links:data.result.Links,
}) })
.then(res =>
// console.log(data.result.AxisX.BlockTime,'开始') res.json()
var timeee=moment(data.result.AxisX.BlockTime/1000000) )
timeee.format('YYYY-MM-DD HH:mm:ss') .then((data) => {
timeee.add(this.state.duration,'seconds').format('YYYY-MM-DD HH:mm:ss') this.setState({
data:data.result.Rows,
timeee.unix() TopAxisX:data.result.AxisX.TopAxisX,
BottomAxisX:data.result.AxisX.BottomAxisX,
AxisY:data.result.AxisY,
var mintime=moment(data.result.AxisX.BlockTime/1000000) Links:data.result.Links,
})
var markline=data.result.AxisX.TopAxisX.map(item=>{
return [ // console.log(data.result.AxisX.BlockTime,'开始')
{ var maxtime=moment(data.result.AxisX.BlockTime/1000000)
// name: 'start', maxtime.format('YYYY-MM-DD HH:mm:ss')
xAxis:item.Time, maxtime.add(this.state.duration,'seconds').format('YYYY-MM-DD HH:mm:ss')
yAxis: 'Block',
label: { maxtime.unix()
show: true,
lineHeight:25,
position: 'insideMiddleTop', var mintime=moment(data.result.AxisX.BlockTime/1000000)
formatter:item.Value ,
var markline=data.result.AxisX.TopAxisX.map(item=>{
return [
{
// name: 'start',
xAxis:item.Time,
yAxis: 'Block',
label: {
show: true,
lineHeight:25,
position: 'insideMiddleTop',
formatter:item.Value ,
},
lineStyle: { color: 'red', type: 'solid',with:30},
}, },
lineStyle: { color: 'red', type: 'solid',with:30}, {
}, // name: 'end',
{ xAxis: item.Time,
// name: 'end', yAxis: 'Block'
xAxis: item.Time,
yAxis: 'Block'
},
]
})
data.result.AxisX.BottomAxisX.map(item=>{
markline.push( [
{
// name: 'start',
xAxis:item.Time,
yAxis: 'Round',
label: {
show: true,
lineHeight:10,
position: 'insideMiddleTop',
formatter:item.Value,
}, },
lineStyle: { color: 'green', type: 'solid',with:30}, ]
}, })
{ data.result.AxisX.BottomAxisX.map(item=>{
// name: 'end', markline.push( [
xAxis: item.Time, {
yAxis: 'Round' // name: 'start',
}, xAxis:item.Time,
] ) yAxis: 'Round',
}) label: {
show: true,
if(this.state.duration<0){ lineHeight:10,
timeee=moment(data.result.AxisX.BlockTime/1000000) position: 'insideMiddleTop',
mintime=moment(data.result.AxisX.BlockTime/1000000) formatter:item.Value,
// 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') lineStyle: { color: 'green', type: 'solid',with:30},
moment(data.result.AxisX.BlockTime/1000000).format('YYYY-MM-DD HH:mm:ss') },
{
} // name: 'end',
// console.log(this.state.duration,'dddddd') xAxis: item.Time,
// console.log(-(this.state.duration),'ppppppp') yAxis: 'Round'
var source= data.result.Rows },
var target=[]; ] )
for(var i in source){ })
var list=[];
var lineList=source[i]; if(this.state.duration<0){
for (var j in lineList) { maxtime=moment(data.result.AxisX.BlockTime/1000000)
list.push([ mintime=moment(data.result.AxisX.BlockTime/1000000)
lineList[j].XAsTime, // mintime.add(-(this.state.duration),'seconds').format('YYYY-MM-DD HH:mm:ss')
lineList[j].Type, mintime.subtract(-(this.state.duration),'seconds').format('YYYY-MM-DD HH:mm:ss')
lineList[j].Y, moment(data.result.AxisX.BlockTime/1000000).format('YYYY-MM-DD HH:mm:ss')
lineList[j].Desc,
lineList[j].Round, }
lineList[j].Index, var source= data.result.Rows
lineList[j].ID, var target=[];
lineList[j].Role for(var i in source){
]); var list=[];
var lineList=source[i];
for (var j in lineList) {
list.push([
lineList[j].XAsTime,
lineList[j].Type,
lineList[j].Y,
lineList[j].Desc,
lineList[j].Round,
lineList[j].Index,
lineList[j].ID,
lineList[j].Role
]);
}
target.push(list);
} }
target.push(list);
} var chartDom = document.getElementById('main');
var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom);
var myChart = echarts.init(chartDom); var option;
var option; const series = [];
const series = []; this.state.AxisY.forEach(function (type) {
this.state.AxisY.forEach(function (type) { const arr = target.map(function (item) {
const arr = target.map(function (item) { const data = item.map((item, index) => {
const data = item.map((item, index) => { var colors
var colors if(item[7]==='Normal'){
if(item[7]==='Normal'){ colors ='#4B4B4B'
colors ='#4B4B4B' }else if(item[7]==='Witness'){
}else if(item[7]==='Witness'){ colors ='#4A4CFF'
colors ='#4A4CFF' }else if(item[7]==='Famous1'){
}else if(item[7]==='Famous1'){ colors ='#00FFFF'
colors ='#00FFFF' }else if(item[7]==='Famous2'){
}else if(item[7]==='Famous2'){ colors ='#06FF02'
colors ='#06FF02' }
}
return {
return {
label: {
show: true,
position: 'top'
},
emphasis: {
label: { label: {
show: true, show: true,
} position: 'top'
}, },
name: item[6], emphasis: {
value: item, label: {
// x: item[0], show: true,
itemStyle:{ }
borderWidth: 1, },
borderColor: '#333', name: item[6],
color:colors, value: item,
}, // x: item[0],
symbolSize:item[3]==item[6]? 15 : 15 itemStyle:{
}; borderWidth: 1,
borderColor: '#333',
color:colors,
},
symbolSize:item[3]==item[6]? 15 : 15
};
})
return data;
}) })
return data; var newArr=arr.reduce(function(total,currentValue){
}) return total.concat(currentValue)
var newArr=arr.reduce(function(total,currentValue){ })
return total.concat(currentValue) let links = data.result.Links;
}) links.map(item=>{
let links = data.result.Links; item['source'] = item['Source']
links.map(item=>{ item['target'] = item['Target']
item['source'] = item['Source'] })
item['target'] = item['Target'] // links.pop();
}) series.push({
// links.pop(); name: type,
series.push({ type: 'graph',
name: type, coordinateSystem: 'cartesian2d',
type: 'graph', data: newArr,
coordinateSystem: 'cartesian2d', links: links,
data: newArr, edgeSymbol: ['none', 'arrow'],
links: links, edgeSymbolSize: 5,
edgeSymbol: ['none', 'arrow'], legendHoverLink: false,
edgeSymbolSize: 5, lineStyle: {
legendHoverLink: false, color: '#333'
lineStyle: {
color: '#333'
},
itemStyle: {
borderWidth: 1,
borderColor: '#333',
},
label: {
color: '#333',
position: 'center'
},
symbolSize: 15,
markLine:{
symbol:'circle',
data:markline,
}
});
});
option = {
visualMap: {
show: false,
dimension: 1,
},
legend: {
show: false,
data: this.state.AxisY,
selectedMode: 'single',
right: 100
},
grid: {
left: 40,
bottom: 0,
containLabel: true,
top: 80
},
xAxis: [
{
name:'Time',
axisLabel: {
formatter: (function(value){
// console.log(value,'value')
return moment(parseInt(value/1000000)).format('YYYY-MM-DD HH:mm:ss')
})
}, },
itemStyle: {
max:timeee.unix()*1000000000, borderWidth: 1,
// max:timeee.add(10,'seconds').unix()*1000000000, borderColor: '#333',
min:mintime.unix()*1000000000,
splitNumber:10,
axisLine:{
show:true,
symbol: ['none', 'arrow']
}, },
// boundaryGap: true, label: {
axisTick: { color: '#333',
alignWithLabel:true, position: 'center'
}, },
// scrollBar: true symbolSize: 15,
markLine:{
symbol:'circle',
data:markline,
}
});
});
function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round(value)
]
};
}
let datas = [];
let now = new Date(1997, 9, 3);
let oneDay = 24 * 3600 * 1000;
let value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
datas.push(randomData());
}
option = {
visualMap: {
show: false,
dimension: 1,
},
legend: {
show: false,
data: this.state.AxisY,
selectedMode: 'single',
right: 100
}, },
grid: {
// 上边的轴指的是之前block left: 40,
{ bottom: 0,
// name:'block', containLabel: true,
// data:topValue, top: 80
// offset:-75, },
axisLine:{ xAxis: [
show: true,
symbol: ['none', 'arrow'] {
name:'Time',
axisLabel: {
formatter: (function(value){
// console.log(value,'value')
return moment(parseInt(value/1000000)).format('YYYY-MM-DD HH:mm:ss')
})
},
max:maxtime.unix()*1000000000,
// max:maxtime.add(10,'seconds').unix()*1000000000,
min:mintime.unix()*1000000000,
splitNumber:10,
axisLine:{
show:true,
symbol: ['none', 'arrow']
},
axisTick: {
alignWithLabel:true,
},
}, },
axisLabel:{
inside: false, // 上边的轴指的是之前block
{
axisLine:{
show: true,
symbol: ['none', 'arrow']
},
axisLabel:{
inside: false,
},
axisTick: {
alignWithLabel:true,
},
}, },
axisTick: { {
alignWithLabel:true, axisLine:{
show: true,
symbol: ['none', 'arrow']
},
axisLabel:{
inside: true,
},
axisTick: {
alignWithLabel:true,
},
}, },
// scrollBar: true ],
}, yAxis: {
{ type: 'category',
axisLine:{ name:'Validator',
show: true, nameTextStyle: {
symbol: ['none', 'arrow'] align: "center",
lineHeight: 40,
}, },
data: this.state.AxisY,
triggerEvent: true,
axisLabel:{ axisLabel:{
inside: true, margin:8,
}, formatter:function(data){
axisTick: { var val=''
alignWithLabel:true, if(data.length>5){
val = data.substr(0,4)+'...';
return val ;
}else {
return data;
}
}
}, },
// scrollBar: true boundaryGap: false,
}, // scale: true,
], axisTick: {
yAxis: { alignWithLabel: true
type: 'category', }
name:'Validator',
nameTextStyle: {
align: "center",
lineHeight: 40,
}, },
data: this.state.AxisY, toolbox: {
triggerEvent: true, feature: {
axisLabel:{ dataZoom: {}
margin:8,
formatter:function(data){
var val=''
if(data.length>5){
val = data.substr(0,4)+'...';
return val ;
}else {
return data;
}
} }
}, },
boundaryGap: false, // dataZoom: {
// scale: true, // type: 'inside'
axisTick: { // },
alignWithLabel: true
}
}, series: series,
dataZoom: [ };
{ myChart.setOption(option);
// height:20, window.addEventListener("resize", function () {
type: "slider", myChart.resize(); //使图表自适应窗口的大小
show: true,
xAxisIndex: [0],
left: '5%',
bottom:-1,
start: 0,
end: 80
},
{
type: "inside", // 支持内部鼠标滚动平移
start: 0,
end: 5,
zoomOnMouseWheel: false, // 关闭滚轮缩放
moveOnMouseWheel: true, // 开启滚轮平移
moveOnMouseMove: true // 鼠标移动能触发数据窗口平移
}
],
toolbox: {
feature: {
dataZoom: {}
}
},
// dataZoom: {
// type: 'inside'
// },
series: series,
};
// console.log(option,'opitons')
myChart.setOption(option);
// window.addEventListener("resize", function () {
// myChart.resize(); //使图表自适应窗口的大小
// });
extension(myChart);
function extension(myChart){
var elementDiv = document.getElementById('extension');
if(!elementDiv){
var div = document.createElement('div')
div.setAttribute('id', 'extension')
div.style.display = 'block'
document.querySelector('html').appendChild(div)
}
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')
var elementStyle = styleCss
elementDiv.style.cssText = elementStyle
elementDiv.innerHTML = params.value
document.querySelector('html').onmousemove = function (event) {
var elementDiv = document.querySelector('#extension')
var xx = event.pageX - 10
var yy = event.pageY + 15
elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px'
}
}
}) })
myChart.on('mousemove', function (params) { extension(myChart);
if(params.componentType == "series"){ function extension(myChart){
if(params.name === params.data.name){ var elementDiv = document.getElementById('extension');
if(!elementDiv){
var div = document.createElement('div')
div.setAttribute('id', 'extension')
div.style.display = 'block'
document.querySelector('html').appendChild(div)
}
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') var elementDiv = document.querySelector('#extension')
var elementStyle = styleCss var 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 = params.value
document.querySelector('html').onmousemove = function (event) { document.querySelector('html').onmousemove = function (event) {
var elementDiv = document.querySelector('#extension')
var xx = event.pageX - 10
var yy = event.pageY + 15
elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px'
}
}
})
myChart.on('mousemove', function (params) {
if(params.componentType == "series"){
if(params.name === params.data.name){
var elementDiv = document.querySelector('#extension') var elementDiv = document.querySelector('#extension')
var xx = event.pageX - 10 var elementStyle = styleCss
var yy = event.pageY + 15 elementDiv.style.cssText = elementStyle
elementDiv.style.top = yy + 'px' 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.style.left = xx + 'px' document.querySelector('html').onmousemove = function (event) {
var elementDiv = document.querySelector('#extension')
var xx = event.pageX - 10
var yy = event.pageY + 15
elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px'
}
} }
} }
} })
}) myChart.on('mousemove', function (params) {
myChart.on('mousemove', function (params) { if(params.componentType == "markLine"){
if(params.componentType == "markLine"){ var elementDiv = document.querySelector('#extension')
var 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')
var xx = event.pageX - 10
var yy = event.pageY + 15
elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px'
}
}
})
myChart.on('mouseout', function (params) {
var elementDiv = document.querySelector('#extension') var elementDiv = document.querySelector('#extension')
var elementStyle = styleCss if (params.componentType == 'yAxis') {
elementDiv.style.cssText = elementStyle elementDiv.style.cssText = 'display:none'
elementDiv.innerHTML = moment(parseInt(params.data.xAxis/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS') }
document.querySelector('html').onmousemove = function (event) { if(params.componentType == "series"){
var elementDiv = document.querySelector('#extension') if(params.name === params.data.name){
var xx = event.pageX - 10 elementDiv.style.cssText = 'display:none'
var yy = event.pageY + 15
elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px'
} }
} }
}) if(params.componentType == "markLine"){
myChart.on('mouseout', function (params) {
var elementDiv = document.querySelector('#extension')
if (params.componentType == 'yAxis') {
elementDiv.style.cssText = 'display:none'
}
if(params.componentType == "series"){
if(params.name === params.data.name){
elementDiv.style.cssText = 'display:none' elementDiv.style.cssText = 'display:none'
} }
} })
if(params.componentType == "markLine"){ }
elementDiv.style.cssText = 'display:none' })
}
})
}
})
} }
render() { render() {
return ( return (
......
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