Skip to content

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

up

parent aeefd1b5
Hide whitespace changes
Inline Side-by-side
Showing with 260 additions and 90 deletions
src/App.js
View file @ 6bc4f917
...@@ -18,7 +18,9 @@ class App extends Component { ...@@ -18,7 +18,9 @@ class App extends Component {
'Content-Type':'application/json;charset=UTF-8' 'Content-Type':'application/json;charset=UTF-8'
}, },
}) })
.then(res =>res.json()) .then(res =>
res.json()
)
.then((data) => { .then((data) => {
this.setState({ this.setState({
data:data.result.Rows, data:data.result.Rows,
...@@ -27,17 +29,54 @@ class App extends Component { ...@@ -27,17 +29,54 @@ class App extends Component {
AxisY:data.result.AxisY, AxisY:data.result.AxisY,
Links:data.result.Links, Links:data.result.Links,
}) })
var top=data.result.AxisX.TopAxisX var markline=data.result.AxisX.TopAxisX.map(item=>{
var value=top.map(item=>{ console.log(item,'sssssssss');
return item.Value; return [
{
// name: 'start',
xAxis:item.Time,
yAxis: '1',
label: {
show: true,
lineHeight:25,
// position: 'start', // 改变label位置
position: 'insideMiddleTop',
formatter:item.Value , // 格式化标签文本
},
lineStyle: { color: 'red', type: 'solid',with:30},
},
{
// name: 'end',
xAxis: item.Time,
yAxis: '1'
},
]
}) })
var time=top.map(item=>{ data.result.AxisX.BottomAxisX.map(item=>{
return item.Time; console.log(item,'sssssssss');
markline.push( [
{
// name: 'start',
xAxis:item.Time,
yAxis: '0',
label: {
show: true,
lineHeight:25,
// position: 'start', // 改变label位置
position: 'insideMiddleTop',
formatter:item.Value , // 格式化标签文本
},
lineStyle: { color: 'green', type: 'solid',with:30},
},
{
// name: 'end',
xAxis: item.Time,
yAxis: '0'
},
] )
}) })
console.log(time,'time')
console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
var source= data.result.Rows var source= data.result.Rows
...@@ -47,7 +86,7 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间') ...@@ -47,7 +86,7 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
var lineList=source[i]; var lineList=source[i];
for (var j in lineList) { for (var j in lineList) {
list.push([ list.push([
lineList[j].XAsTime/1000, lineList[j].XAsTime,
lineList[j].Type, lineList[j].Type,
lineList[j].Y, lineList[j].Y,
lineList[j].Desc, lineList[j].Desc,
...@@ -57,28 +96,18 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间') ...@@ -57,28 +96,18 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
lineList[j].Role lineList[j].Role
]); ]);
} }
target.push(list); target.push(list);
} }
// console.log("target", target);
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) => {
// console.log(item,'item')
var colors var colors
if(item[7]=='Normal'){ if(item[7]=='Normal'){
colors ='#4B4B4B' colors ='#4B4B4B'
...@@ -90,8 +119,6 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间') ...@@ -90,8 +119,6 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
colors ='#06FF02' colors ='#06FF02'
} }
return { return {
label: { label: {
show: true, show: true,
...@@ -106,11 +133,9 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间') ...@@ -106,11 +133,9 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
value: item, value: item,
// x: item[0], // x: item[0],
itemStyle:{ itemStyle:{
normal:{
borderWidth: 1, borderWidth: 1,
borderColor: '#333', borderColor: '#333',
color:colors color:colors,
}
}, },
symbolSize:item[3]==item[6]? 15 : 15 symbolSize:item[3]==item[6]? 15 : 15
}; };
...@@ -120,7 +145,7 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间') ...@@ -120,7 +145,7 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
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,'newArr') // console.log(newArr,'data')
// let xTime = newArr.map(item=>moment(Number(item.x)).format('YYYY-MM-DD HH:mm:ss:msms')) // let xTime = newArr.map(item=>moment(Number(item.x)).format('YYYY-MM-DD HH:mm:ss:msms'))
// console.log(xTime) // console.log(xTime)
let links = data.result.Links; let links = data.result.Links;
...@@ -142,10 +167,8 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间') ...@@ -142,10 +167,8 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
color: '#333' color: '#333'
}, },
itemStyle: { itemStyle: {
normal:{
borderWidth: 1, borderWidth: 1,
borderColor: '#333', borderColor: '#333',
}
}, },
label: { label: {
color: '#333', color: '#333',
...@@ -153,14 +176,117 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间') ...@@ -153,14 +176,117 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
}, },
symbolSize: 15, 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) { // animationDelay: function (idx) {
// return idx * 100; // 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,
// },
}); });
}); });
option = { option = {
visualMap: { visualMap: {
show: false, show: false,
...@@ -180,78 +306,126 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间') ...@@ -180,78 +306,126 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
top: 80 top: 80
}, },
xAxis: [ xAxis: [
{
type: 'time',
axisLine:{
show: true
},
data:time,
axisTick: { //刻度线
alignWithLabel:true, //刻度线和标签对齐，boundaryGap为true时有效
show: true,
},
axisLabel:{
inside: true,
},
axisLine: {
symbol: ['none', 'arrow']
},
// min: data.result.AxisXBegin,
// max: data.result.AxisXEnd,
// scale: true,
},
{ {
// type: 'value', // type: 'value',
name:'round', // type:'time',
axisLine:{ axisLabel: {
show: true formatter: (function(value){
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 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 h+':'+m+':'+s
})
}, },
offset:'-750', min: data.result.AxisX.AxisXBegin,
data:['时间5','时间6','时间7','时间8'], max:data.result.AxisX.AxisXEnd,
boundaryGap: true, interval:(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin)/5,
axisLabel:{ // offset:-75,
inside: false, axisLine:{
}, show:true,
axisLine: {
symbol: ['none', 'arrow'] symbol: ['none', 'arrow']
}, },
axisTick: { //刻度线 boundaryGap: true,
alignWithLabel: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
{ {
// type: 'value',
name:'block', name:'block',
// data:topValue,
// offset:-75,
axisLine:{ axisLine:{
show: true show: true,
},
axisLine: {
symbol: ['none', 'arrow'] symbol: ['none', 'arrow']
}, },
data:value, axisLabel:{
boundaryGap: true, inside: false,
axisTick: { //刻度线
alignWithLabel:true, //刻度线和标签对齐，boundaryGap为true时有效
}, },
boundaryGap: true,
axisTick: {
alignWithLabel:true,
}
}, },
{ {
// type: 'time', // name:'block',
// data:topTime,
// offset:-75,
axisLine:{ axisLine:{
show: true show: true,
},
axisLine: {
symbol: ['none', 'arrow'] symbol: ['none', 'arrow']
}, },
data:time,
boundaryGap: true,
axisLabel:{ axisLabel:{
inside: true, inside: true,
}, },
axisTick: { //刻度线 boundaryGap: true,
alignWithLabel: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: { yAxis: {
type: 'category', type: 'category',
...@@ -260,7 +434,7 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间') ...@@ -260,7 +434,7 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
triggerEvent: true, triggerEvent: true,
axisLabel:{ axisLabel:{
margin:8, margin:8,
formatter:function(data){ formatter:function(data){
var val='' var val=''
if(data.length>4){ if(data.length>4){
val = data.substr(0,4)+'...'; val = data.substr(0,4)+'...';
...@@ -270,12 +444,14 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间') ...@@ -270,12 +444,14 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
} }
} }
}, },
boundaryGap: false,
// min: 0, // min: 0,
// max: 5, // max: 5,
// scale: true, // scale: true,
axisTick: { axisTick: {
alignWithLabel: true alignWithLabel: true
} }
}, },
toolbox: { toolbox: {
feature: { feature: {
...@@ -317,17 +493,11 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间') ...@@ -317,17 +493,11 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
myChart.on('mouseout', function (params) { myChart.on('mouseout', function (params) {
if (params.componentType == 'yAxis') { if (params.componentType == 'yAxis') {
var elementDiv = document.querySelector('#extension') var elementDiv = document.querySelector('#extension')
elementDiv.style.cssText = 'display:none' 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