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 {
duration:-10
}
componentDidMount(){
fetch(`/api/graph_by_height_and_duration?height=0&duration=-10`,{
method:'GET',
headers:{
'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,
fetch(`/api/graph_by_height_and_duration?height=0&duration=-10`,{
method:'GET',
headers:{
'Content-Type':'application/json;charset=UTF-8'
},
})
// console.log(data.result.AxisX.BlockTime,'开始')
var timeee=moment(data.result.AxisX.BlockTime/1000000)
timeee.format('YYYY-MM-DD HH:mm:ss')
timeee.add(this.state.duration,'seconds').format('YYYY-MM-DD HH:mm:ss')
timeee.unix()
var mintime=moment(data.result.AxisX.BlockTime/1000000)
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 ,
.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,
})
// console.log(data.result.AxisX.BlockTime,'开始')
var maxtime=moment(data.result.AxisX.BlockTime/1000000)
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 [
{
// 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,
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,
{
// name: 'end',
xAxis: item.Time,
yAxis: 'Block'
},
lineStyle: { color: 'green', type: 'solid',with:30},
},
{
// name: 'end',
xAxis: item.Time,
yAxis: 'Round'
},
] )
})
if(this.state.duration<0){
timeee=moment(data.result.AxisX.BlockTime/1000000)
mintime=moment(data.result.AxisX.BlockTime/1000000)
// 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')
moment(data.result.AxisX.BlockTime/1000000).format('YYYY-MM-DD HH:mm:ss')
}
// console.log(this.state.duration,'dddddd')
// console.log(-(this.state.duration),'ppppppp')
var source= data.result.Rows
var target=[];
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
]);
]
})
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},
},
{
// name: 'end',
xAxis: item.Time,
yAxis: 'Round'
},
] )
})
if(this.state.duration<0){
maxtime=moment(data.result.AxisX.BlockTime/1000000)
mintime=moment(data.result.AxisX.BlockTime/1000000)
// 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')
moment(data.result.AxisX.BlockTime/1000000).format('YYYY-MM-DD HH:mm:ss')
}
var source= data.result.Rows
var target=[];
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 myChart = echarts.init(chartDom);
var option;
const series = [];
this.state.AxisY.forEach(function (type) {
const arr = target.map(function (item) {
const data = item.map((item, index) => {
var colors
if(item[7]==='Normal'){
colors ='#4B4B4B'
}else if(item[7]==='Witness'){
colors ='#4A4CFF'
}else if(item[7]==='Famous1'){
colors ='#00FFFF'
}else if(item[7]==='Famous2'){
colors ='#06FF02'
}
return {
label: {
show: true,
position: 'top'
},
emphasis: {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
const series = [];
this.state.AxisY.forEach(function (type) {
const arr = target.map(function (item) {
const data = item.map((item, index) => {
var colors
if(item[7]==='Normal'){
colors ='#4B4B4B'
}else if(item[7]==='Witness'){
colors ='#4A4CFF'
}else if(item[7]==='Famous1'){
colors ='#00FFFF'
}else if(item[7]==='Famous2'){
colors ='#06FF02'
}
return {
label: {
show: true,
}
},
name: item[6],
value: item,
// x: item[0],
itemStyle:{
borderWidth: 1,
borderColor: '#333',
color:colors,
},
symbolSize:item[3]==item[6]? 15 : 15
};
position: 'top'
},
emphasis: {
label: {
show: true,
}
},
name: item[6],
value: item,
// x: item[0],
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)
})
let links = data.result.Links;
links.map(item=>{
item['source'] = item['Source']
item['target'] = item['Target']
})
// links.pop();
series.push({
name: type,
type: 'graph',
coordinateSystem: 'cartesian2d',
data: newArr,
links: links,
edgeSymbol: ['none', 'arrow'],
edgeSymbolSize: 5,
legendHoverLink: false,
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')
})
var newArr=arr.reduce(function(total,currentValue){
return total.concat(currentValue)
})
let links = data.result.Links;
links.map(item=>{
item['source'] = item['Source']
item['target'] = item['Target']
})
// links.pop();
series.push({
name: type,
type: 'graph',
coordinateSystem: 'cartesian2d',
data: newArr,
links: links,
edgeSymbol: ['none', 'arrow'],
edgeSymbolSize: 5,
legendHoverLink: false,
lineStyle: {
color: '#333'
},
max:timeee.unix()*1000000000,
// max:timeee.add(10,'seconds').unix()*1000000000,
min:mintime.unix()*1000000000,
splitNumber:10,
axisLine:{
show:true,
symbol: ['none', 'arrow']
itemStyle: {
borderWidth: 1,
borderColor: '#333',
},
// boundaryGap: true,
axisTick: {
alignWithLabel:true,
label: {
color: '#333',
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
},
// 上边的轴指的是之前block
{
// name:'block',
// data:topValue,
// offset:-75,
axisLine:{
show: true,
symbol: ['none', 'arrow']
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')
})
},
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
},
{
axisLine:{
show: true,
symbol: ['none', 'arrow']
],
yAxis: {
type: 'category',
name:'Validator',
nameTextStyle: {
align: "center",
lineHeight: 40,
},
data: this.state.AxisY,
triggerEvent: true,
axisLabel:{
inside: true,
},
axisTick: {
alignWithLabel:true,
margin:8,
formatter:function(data){
var val=''
if(data.length>5){
val = data.substr(0,4)+'...';
return val ;
}else {
return data;
}
}
},
// scrollBar: true
},
],
yAxis: {
type: 'category',
name:'Validator',
nameTextStyle: {
align: "center",
lineHeight: 40,
boundaryGap: false,
// scale: true,
axisTick: {
alignWithLabel: true
}
},
data: this.state.AxisY,
triggerEvent: true,
axisLabel:{
margin:8,
formatter:function(data){
var val=''
if(data.length>5){
val = data.substr(0,4)+'...';
return val ;
}else {
return data;
}
toolbox: {
feature: {
dataZoom: {}
}
},
boundaryGap: false,
// scale: true,
axisTick: {
alignWithLabel: true
}
// dataZoom: {
// type: 'inside'
// },
},
dataZoom: [
{
// height:20,
type: "slider",
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'
}
}
series: series,
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize(); //使图表自适应窗口的大小
})
myChart.on('mousemove', function (params) {
if(params.componentType == "series"){
if(params.name === params.data.name){
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=`<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) {
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 xx = event.pageX - 10
var yy = event.pageY + 15
elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px'
var 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) {
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 == "markLine"){
})
myChart.on('mousemove', function (params) {
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 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'
if (params.componentType == 'yAxis') {
elementDiv.style.cssText = 'display:none'
}
if(params.componentType == "series"){
if(params.name === params.data.name){
elementDiv.style.cssText = 'display:none'
}
}
})
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){
}
if(params.componentType == "markLine"){
elementDiv.style.cssText = 'display:none'
}
}
if(params.componentType == "markLine"){
elementDiv.style.cssText = 'display:none'
}
})
}
})
})
}
})
}
render() {
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