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
Show 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 {
'Content-Type':'application/json;charset=UTF-8'
},
})
.then(res =>res.json())
.then(res =>
res.json()
)
.then((data) => {
this.setState({
data:data.result.Rows,
......@@ -28,16 +30,53 @@ class App extends Component {
Links:data.result.Links,
})
var top=data.result.AxisX.TopAxisX
var value=top.map(item=>{
return item.Value;
var markline=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 , // 格式化标签文本
},
lineStyle: { color: 'red', type: 'solid',with:30},
},
{
// name: 'end',
xAxis: item.Time,
yAxis: '1'
},
]
})
var time=top.map(item=>{
return item.Time;
data.result.AxisX.BottomAxisX.map(item=>{
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
......@@ -47,7 +86,7 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
var lineList=source[i];
for (var j in lineList) {
list.push([
lineList[j].XAsTime/1000,
lineList[j].XAsTime,
lineList[j].Type,
lineList[j].Y,
lineList[j].Desc,
......@@ -57,28 +96,18 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
lineList[j].Role
]);
}
target.push(list);
}
// console.log("target", target);
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) => {
// console.log(item,'item')
var colors
if(item[7]=='Normal'){
colors ='#4B4B4B'
......@@ -90,8 +119,6 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
colors ='#06FF02'
}
return {
label: {
show: true,
......@@ -106,11 +133,9 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
value: item,
// x: item[0],
itemStyle:{
normal:{
borderWidth: 1,
borderColor: '#333',
color:colors
}
color:colors,
},
symbolSize:item[3]==item[6]? 15 : 15
};
......@@ -120,7 +145,7 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
var newArr=arr.reduce(function(total,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'))
// console.log(xTime)
let links = data.result.Links;
......@@ -142,10 +167,8 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
color: '#333'
},
itemStyle: {
normal:{
borderWidth: 1,
borderColor: '#333',
}
},
label: {
color: '#333',
......@@ -153,14 +176,117 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
},
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,
// },
});
});
option = {
visualMap: {
show: false,
......@@ -180,78 +306,126 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
top: 80
},
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',
name:'round',
axisLine:{
show: true
},
offset:'-750',
data:['时间5','时间6','时间7','时间8'],
boundaryGap: true,
axisLabel:{
inside: false,
// type:'time',
axisLabel: {
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
})
},
axisLine: {
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']
},
axisTick: { //刻度线
alignWithLabel:true, //刻度线和标签对齐，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
{
// type: 'value',
name:'block',
// data:topValue,
// offset:-75,
axisLine:{
show: true
},
axisLine: {
show: true,
symbol: ['none', 'arrow']
},
data:value,
boundaryGap: true,
axisTick: { //刻度线
alignWithLabel:true, //刻度线和标签对齐，boundaryGap为true时有效
axisLabel:{
inside: false,
},
boundaryGap: true,
axisTick: {
alignWithLabel:true,
}
},
{
// type: 'time',
// name:'block',
// data:topTime,
// offset:-75,
axisLine:{
show: true
},
axisLine: {
show: true,
symbol: ['none', 'arrow']
},
data:time,
boundaryGap: true,
axisLabel:{
inside: true,
},
axisTick: { //刻度线
alignWithLabel: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',
......@@ -270,12 +444,14 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
}
}
},
boundaryGap: false,
// min: 0,
// max: 5,
// scale: true,
axisTick: {
alignWithLabel: true
}
},
toolbox: {
feature: {
......@@ -317,17 +493,11 @@ console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
myChart.on('mouseout', function (params) {
if (params.componentType == 'yAxis') {
var elementDiv = document.querySelector('#extension')
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