Skip to content

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

new

parent 88c67866
Show whitespace changes
Inline Side-by-side
Showing with 8 additions and 194 deletions
src/App.js
View file @ 29b03a8a
import React, { Component } from 'react'; import React, { Component } from 'react';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import dateformat from 'dateformat'
import moment from 'moment' import moment from 'moment'
class App extends Component { class App extends Component {
state={ state={
...@@ -32,7 +31,6 @@ class App extends Component { ...@@ -32,7 +31,6 @@ class App extends Component {
}) })
var markline=data.result.AxisX.TopAxisX.map(item=>{ var markline=data.result.AxisX.TopAxisX.map(item=>{
console.log(item,'sssssssss');
return [ return [
{ {
// name: 'start', // name: 'start',
...@@ -55,7 +53,6 @@ class App extends Component { ...@@ -55,7 +53,6 @@ class App extends Component {
] ]
}) })
data.result.AxisX.BottomAxisX.map(item=>{ data.result.AxisX.BottomAxisX.map(item=>{
console.log(item,'sssssssss');
markline.push( [ markline.push( [
{ {
// name: 'start', // name: 'start',
...@@ -110,13 +107,13 @@ class App extends Component { ...@@ -110,13 +107,13 @@ class App extends Component {
const data = item.map((item, index) => { const data = item.map((item, index) => {
// console.log(item,'item') // console.log(item,'item')
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'
} }
...@@ -146,9 +143,6 @@ class App extends Component { ...@@ -146,9 +143,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)
}) })
// console.log(newArr,'data')
// let xTime = newArr.map(item=>moment(Number(item.x)).format('YYYY-MM-DD HH:mm:ss:msms'))
// console.log(xTime)
let links = data.result.Links; let links = data.result.Links;
links.map(item=>{ links.map(item=>{
item['source'] = item['Source'] item['source'] = item['Source']
...@@ -175,116 +169,11 @@ class App extends Component { ...@@ -175,116 +169,11 @@ class App extends Component {
color: '#333', color: '#333',
position: 'center' position: 'center'
}, },
symbolSize: 15, symbolSize: 15,
markLine:{ markLine:{
symbol:'circle', symbol:'circle',
// label: {
// show: true,
// lineHeight:25,
// // position: 'start', // 改变label位置
// position: 'insideMiddleTop',
// formatter:'44' , // 格式化标签文本
// },
// lineStyle: { color: 'red', type: 'solid',with:30},
data:markline, data:markline,
// data:data.result.AxisX.TopAxisX.map(item=>{
// console.log(item,'sssssssss');
// return [
// {
// // name: 'start',
// xAxis:item.Time,
// yAxis: '1',
// label: {
// show: true,
// lineHeight:25,
// // position: 'start', // 改变label位置
// position: 'insideMiddleTop',
// formatter:item.Value , // 格式化标签文本
// },
// },
// {
// // name: 'end',
// xAxis: item.Time,
// yAxis: '1'
// },
// ]
// })
// data: [
// [
// {
// // name: 'start',
// xAxis:1656661857445335979,
// yAxis: '1',
// label: {
// show: true,
// lineHeight:25,
// // position: 'start', // 改变label位置
// position: 'insideMiddleTop',
// formatter:'44' , // 格式化标签文本
// },
// },
// {
// // name: 'end',
// xAxis: 1656661857445335979,
// yAxis: '1'
// },
// ] ,
// [
// {
// // name: 'start',
// xAxis:1656661857445335979,
// yAxis: '0',
// label: {
// show: true,
// lineHeight:25,
// // position: 'start', // 改变label位置
// position: 'insideMiddleTop',
// formatter:'33' , // 格式化标签文本
// },
// },
// {
// // name: 'end',
// xAxis: 1656661857445335979,
// yAxis: '0'
// },
// ]
// ]
} }
// animationDelay: function (idx) {
// return idx * 100;
// }
// markLine: {
// // symbol: false, // 取消箭头
// // symbol:'circle',
// silent: true,
// label: {
// position: 'end', // 改变label位置
// formatter: obj => obj.value , // 格式化标签文本
// },
// lineStyle: { color: 'green', type: 'dashed',},
// data: [1656644187565905957,1656644189069603127].map(val => {
// return {
// xAxis: val,
// };
// }),
// data: [1656644187167024789,1656644187807296860,1656644189321454152,1656644191378335729,1656644193589957040,1656644195370205531].map(val => {
// return {
// xAxis: val,
// };
// }),
// z: 10,
// },
}); });
}); });
...@@ -306,35 +195,14 @@ class App extends Component { ...@@ -306,35 +195,14 @@ class App extends Component {
containLabel: true, containLabel: true,
top: 80 top: 80
}, },
xAxis: [ xAxis: [
{ {
// type: 'value', // type: 'value',
// type:'time', // type:'time',
axisLabel: { axisLabel: {
formatter: (function(value){ formatter: (function(value){
// let statusPassTime = moment(parseInt(value)).format('YYYY-MM-DD');
console.log(moment(parseInt(value/1000000)).format('YYYY-MM-DD HH:mm:ss'),'moment')
// return moment(parseInt(value/1000000)).format('YYYY-MM-DD HH:mm:ss')
return moment(parseInt(value/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS') return moment(parseInt(value/1000000)).format('YYYY-MM-DD HH:mm:ss.SSS')
// console.log(Math.floor(value/1000000000),'ddd')
// console.log(dateformat(Math.floor(value/1000000000), 'yyyy-mm-dd HH:MM:ss'),'sssdddggg')
// console.log(dateformat(value/1000000000, 'yyyy-mm-dd HH:MM:ss'),'dddddddddddd')
// return dateformat(value/1000000000, 'yyyy-mm-dd HH:MM:ss')
// console.log(Math.floor(value/1000000000),'value');
// console.log(value,'value11');
// return Math.floor(value/1000000000)
// let label;
// // var t = Math.floor(value/1000000000);
// var t=parseInt(value/1000000000)
// // 天 总秒数/一天的秒数=几天
// var d = parseInt( t / (24*60*60) );
// // 小时 不够一天的秒数可以换算成几小时
// var h = parseInt( ( t % (24*60*60) ) / (60*60) );
// // 分钟 不够一小时的秒数可以换算成几分钟
// var m = parseInt( ( t % (60*60) ) / 60 );
// //秒数 不够一分钟的秒数可以换算成几秒
// var s = t % 60 ;
// return d+'-'+h+':'+m+':'+s
}) })
}, },
min: data.result.AxisX.AxisXBegin, min: data.result.AxisX.AxisXBegin,
...@@ -345,30 +213,13 @@ class App extends Component { ...@@ -345,30 +213,13 @@ class App extends Component {
show:true, show:true,
symbol: ['none', 'arrow'] symbol: ['none', 'arrow']
}, },
boundaryGap: true, // boundaryGap: true,
axisTick: { axisTick: {
alignWithLabel:true, alignWithLabel:true,
}, },
}, },
// {
// // type: 'value',
// min: data.result.AxisX.AxisXBegin,
// max:data.result.AxisX.AxisXEnd,
// interval:(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin)/5,
// // offset:-75,
// axisLine:{
// show:true,
// symbol: ['none', 'arrow']
// },
// boundaryGap: true,
// axisTick: {
// alignWithLabel:true,
// },
// },
// 上边的轴指的是之前block // 上边的轴指的是之前block
{ {
name:'block', name:'block',
...@@ -381,15 +232,12 @@ class App extends Component { ...@@ -381,15 +232,12 @@ class App extends Component {
axisLabel:{ axisLabel:{
inside: false, inside: false,
}, },
boundaryGap: true, // boundaryGap: true,
axisTick: { axisTick: {
alignWithLabel:true, alignWithLabel:true,
} }
}, },
{ {
// name:'block',
// data:topTime,
// offset:-75,
axisLine:{ axisLine:{
show: true, show: true,
symbol: ['none', 'arrow'] symbol: ['none', 'arrow']
...@@ -397,45 +245,11 @@ class App extends Component { ...@@ -397,45 +245,11 @@ class App extends Component {
axisLabel:{ axisLabel:{
inside: true, inside: true,
}, },
boundaryGap: true, // boundaryGap: true,
axisTick: { axisTick: {
alignWithLabel:true, alignWithLabel:true,
} }
}, },
// // 下边的轴指的是之前的round
// {
// name:'round',
// offset:-690,
// data:bottomValue,
// axisLine:{
// show: true,
// symbol: ['none', 'arrow']
// },
// axisLabel:{
// inside: false,
// },
// boundaryGap: true,
// axisTick: {
// alignWithLabel:true,
// }
// },
// {
// // name:'round',
// offset:-690,
// data:bottomTime,
// axisLine:{
// show: true,
// symbol: ['none', 'arrow']
// },
// axisLabel:{
// inside: true,
// },
// boundaryGap: true,
// 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