Skip to content

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

提交

parent 7b5f56c0
Show whitespace changes
Inline Side-by-side
Showing with 417 additions and 351 deletions
src/App.js
View file @ bfb75d0a
......@@ -10,10 +10,13 @@ class App extends Component {
AxisY:[],
Links:[],
target:[],
duration:-10
duration: -50,
interval: null,
requestDuration: -50
}
componentDidMount(){
fetch(`/api/graph_by_height_and_duration?height=0&duration=-10`,{
let that = this
fetch(`/api/graph_by_height_and_duration?height=0&duration=${that.state.requestDuration}`,{
method:'GET',
headers:{
'Content-Type':'application/json;charset=UTF-8'
......@@ -22,18 +25,92 @@ class App extends Component {
.then(res =>
res.json()
)
.then((data) => {
.then((resData) => {
let allRows0Arr = []
let allRows1Arr = []
let allRows2Arr = []
let allTopAxisXArr = []
let allBottomAxisXArr = []
let allLinksArr = []
this.setState({
data:data.result.Rows,
TopAxisX:data.result.AxisX.TopAxisX,
BottomAxisX:data.result.AxisX.BottomAxisX,
AxisY:data.result.AxisY,
Links:data.result.Links,
data: resData.result.Rows,
TopAxisX: resData.result.AxisX.TopAxisX,
BottomAxisX: resData.result.AxisX.BottomAxisX,
AxisY: resData.result.AxisY,
Links: resData.result.Links,
}, ()=>{
// handle arr Rows [3 arr]\TopAxisX [...{}]\BottomAxisX [...{}]\Links [...{}]
let {Rows, AxisX, Links } = resData.result
let {TopAxisX, BottomAxisX} = AxisX
allRows0Arr = Rows[0]
allRows1Arr = Rows[1]
allRows2Arr = Rows[2]
allTopAxisXArr = TopAxisX
allBottomAxisXArr = BottomAxisX
allLinksArr = Links
// console.log(Rows, TopAxisX, BottomAxisX, Links)
that.initChart(resData)
that.interval = setInterval(() => {
fetch(`/api/graph_by_height_and_duration?height=0&duration=${that.state.requestDuration}`,{
method:'GET',
headers:{
'Content-Type':'application/json;charset=UTF-8'
},
})
.then(res =>res.json())
.then((newData) => {
let {Rows, AxisX, Links } = newData.result
let {TopAxisX, BottomAxisX} = AxisX
// allRows0Arr = [...allRows0Arr, ...Rows[0].slice(Rows[0].length-2, Rows[0].length-1)]
// allRows1Arr = [...allRows1Arr, ...Rows[1].slice(Rows[1].length-2, Rows[1].length-1)]
// allRows2Arr = [...allRows2Arr, ...Rows[2].slice(Rows[2].length-2, Rows[2].length-1)]
// allTopAxisXArr = [...allTopAxisXArr, ...TopAxisX.slice(TopAxisX.length-2, TopAxisX.length-1)]
// allBottomAxisXArr = [...allBottomAxisXArr, ...BottomAxisX.slice(BottomAxisX.length-2, BottomAxisX.length-1)]
// allLinksArr = [...allLinksArr, ...Links.slice(Links.length-2, Links.length-1)]
allRows0Arr = Rows[0]
allRows1Arr = Rows[1]
allRows2Arr = Rows[2]
allTopAxisXArr = TopAxisX
allBottomAxisXArr = BottomAxisX
allLinksArr = Links
newData.result.Rows[0] = allRows0Arr
newData.result.Rows[1] = allRows1Arr
newData.result.Rows[2] = allRows2Arr
newData.result.AxisX.TopAxisX = allTopAxisXArr
newData.result.AxisX.BottomAxisX = allBottomAxisXArr
newData.result.Links = allLinksArr
that.initChart(newData)
})
}, 1000);
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
myChart.on('datazoom', function(params){
console.log(params)
clearInterval(that.interval)
})
})
})
}
componentWillUnmount() {
this.state.interval = null
}
initChart(data) {
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var dataArr=[]
// console.log(data.result.AxisX.BlockTime,'开始')
var maxtime=moment(data.result.AxisX.BlockTime/1000000)
maxtime.format('YYYY-MM-DD HH:mm:ss')
console.log(maxtime.format('YYYY-MM-DD HH:mm:ss'))
maxtime.add(this.state.duration,'seconds').format('YYYY-MM-DD HH:mm:ss')
maxtime.unix()
......@@ -112,8 +189,8 @@ class App extends Component {
target.push(list);
}
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
// var chartDom = document.getElementById('main');
// var myChart = echarts.init(chartDom);
var option;
const series = [];
this.state.AxisY.forEach(function (type) {
......@@ -156,6 +233,12 @@ class App extends Component {
var newArr=arr.reduce(function(total,currentValue){
return total.concat(currentValue)
})
dataArr=arr.reduce(function(total,currentValue){
return total.concat(currentValue)
})
// console.log(dataArr,'初始')
// console.log(dataArr.length,'初始长度')
// console.log(newArr,'new')
let links = data.result.Links;
links.map(item=>{
item['source'] = item['Source']
......@@ -190,24 +273,6 @@ class App extends Component {
});
});
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,
......@@ -226,22 +291,28 @@ class App extends Component {
containLabel: true,
top: 80
},
dataZoom: [
{
type: 'inside',
start: 70,
end: 100
},
{
start: 70,
end: 100,
}
],
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,
max:maxtime.add(5,'seconds').unix()*1000000000,
min:mintime.unix()*1000000000,
splitNumber:10,
axisLine:{
show:true,
symbol: ['none', 'arrow']
......@@ -317,11 +388,13 @@ class App extends Component {
series: series,
};
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize(); //使图表自适应窗口的大小
})
extension(myChart);
function extension(myChart){
// window.addEventListener("resize", function () {
// myChart.resize(); //使图表自适应窗口的大小
// })
this.extension(myChart);
}
extension(myChart) {
var elementDiv = document.getElementById('extension');
if(!elementDiv){
var div = document.createElement('div')
......@@ -343,10 +416,7 @@ class App extends Component {
elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px'
}
}
})
myChart.on('mousemove', function (params) {
if(params.componentType == "series"){
}else if(params.componentType == "series"){
if(params.name === params.data.name){
var elementDiv = document.querySelector('#extension')
var elementStyle = styleCss
......@@ -360,10 +430,7 @@ class App extends Component {
elementDiv.style.left = xx + 'px'
}
}
}
})
myChart.on('mousemove', function (params) {
if(params.componentType == "markLine"){
}else if(params.componentType == "markLine"){
var elementDiv = document.querySelector('#extension')
var elementStyle = styleCss
elementDiv.style.cssText = elementStyle
......@@ -377,6 +444,7 @@ class App extends Component {
}
}
})
myChart.on('mouseout', function (params) {
var elementDiv = document.querySelector('#extension')
if (params.componentType == 'yAxis') {
......@@ -392,11 +460,9 @@ class App extends Component {
}
})
}
})
}
render() {
return (
<div id="main" className="container" style={{ padding: '50px', boxSizing:'border-box', width: '100%', height: 1000 }}>
<div id="main" className="container" style={{ padding: '50px', boxSizing:'border-box', width: '100%', height: 900 }}>
</div>
);
}
......
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