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 * as echarts from 'echarts';
import dateformat from 'dateformat'
import moment from 'moment'
class App extends Component {
state={
......@@ -32,7 +31,6 @@ class App extends Component {
})
var markline=data.result.AxisX.TopAxisX.map(item=>{
console.log(item,'sssssssss');
return [
{
// name: 'start',
......@@ -55,7 +53,6 @@ class App extends Component {
]
})
data.result.AxisX.BottomAxisX.map(item=>{
console.log(item,'sssssssss');
markline.push( [
{
// name: 'start',
......@@ -110,13 +107,13 @@ class App extends Component {
const data = item.map((item, index) => {
// console.log(item,'item')
var colors
if(item[7]=='Normal'){
if(item[7]==='Normal'){
colors ='#4B4B4B'
}else if(item[7]=='Witness'){
}else if(item[7]==='Witness'){
colors ='#4A4CFF'
}else if(item[7]=='Famous1'){
}else if(item[7]==='Famous1'){
colors ='#00FFFF'
}else if(item[7]=='Famous2'){
}else if(item[7]==='Famous2'){
colors ='#06FF02'
}
......@@ -146,9 +143,6 @@ class App extends Component {
var newArr=arr.reduce(function(total,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;
links.map(item=>{
item['source'] = item['Source']
......@@ -175,116 +169,11 @@ class App extends Component {
color: '#333',
position: 'center'
},
symbolSize: 15,
markLine:{
symbol:'circle',
// label: {
// show: true,
// lineHeight:25,
// // position: 'start', // 改变label位置
// position: 'insideMiddleTop',
// formatter:'44' , // 格式化标签文本
// },
// lineStyle: { color: 'red', type: 'solid',with:30},
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 {
containLabel: true,
top: 80
},
xAxis: [
{
// type: 'value',
// type:'time',
axisLabel: {
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')
// 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,
......@@ -345,30 +213,13 @@ class App extends Component {
show:true,
symbol: ['none', 'arrow']
},
boundaryGap: true,
// boundaryGap: true,
axisTick: {
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
{
name:'block',
......@@ -381,15 +232,12 @@ class App extends Component {
axisLabel:{
inside: false,
},
boundaryGap: true,
// boundaryGap: true,
axisTick: {
alignWithLabel:true,
}
},
{
// name:'block',
// data:topTime,
// offset:-75,
axisLine:{
show: true,
symbol: ['none', 'arrow']
......@@ -397,45 +245,11 @@ class App extends Component {
axisLabel:{
inside: true,
},
boundaryGap: true,
// boundaryGap: true,
axisTick: {
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: {
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