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 { ...@@ -10,10 +10,13 @@ class App extends Component {
AxisY:[], AxisY:[],
Links:[], Links:[],
target:[], target:[],
duration:-10 duration: -50,
interval: null,
requestDuration: -50
} }
componentDidMount(){ 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', method:'GET',
headers:{ headers:{
'Content-Type':'application/json;charset=UTF-8' 'Content-Type':'application/json;charset=UTF-8'
...@@ -22,18 +25,92 @@ class App extends Component { ...@@ -22,18 +25,92 @@ class App extends Component {
.then(res => .then(res =>
res.json() res.json()
) )
.then((data) => { .then((resData) => {
let allRows0Arr = []
let allRows1Arr = []
let allRows2Arr = []
let allTopAxisXArr = []
let allBottomAxisXArr = []
let allLinksArr = []
this.setState({ this.setState({
data:data.result.Rows, data: resData.result.Rows,
TopAxisX:data.result.AxisX.TopAxisX, TopAxisX: resData.result.AxisX.TopAxisX,
BottomAxisX:data.result.AxisX.BottomAxisX, BottomAxisX: resData.result.AxisX.BottomAxisX,
AxisY:data.result.AxisY, AxisY: resData.result.AxisY,
Links:data.result.Links, 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,'开始') // console.log(data.result.AxisX.BlockTime,'开始')
var maxtime=moment(data.result.AxisX.BlockTime/1000000) var maxtime=moment(data.result.AxisX.BlockTime/1000000)
maxtime.format('YYYY-MM-DD HH:mm:ss') 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.add(this.state.duration,'seconds').format('YYYY-MM-DD HH:mm:ss')
maxtime.unix() maxtime.unix()
...@@ -112,8 +189,8 @@ class App extends Component { ...@@ -112,8 +189,8 @@ class App extends Component {
target.push(list); target.push(list);
} }
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) {
...@@ -156,6 +233,12 @@ class App extends Component { ...@@ -156,6 +233,12 @@ 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)
}) })
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; let links = data.result.Links;
links.map(item=>{ links.map(item=>{
item['source'] = item['Source'] item['source'] = item['Source']
...@@ -190,24 +273,6 @@ class App extends Component { ...@@ -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 = { option = {
visualMap: { visualMap: {
show: false, show: false,
...@@ -226,22 +291,28 @@ class App extends Component { ...@@ -226,22 +291,28 @@ class App extends Component {
containLabel: true, containLabel: true,
top: 80 top: 80
}, },
dataZoom: [
{
type: 'inside',
start: 70,
end: 100
},
{
start: 70,
end: 100,
}
],
xAxis: [ xAxis: [
{ {
name:'Time', name:'Time',
axisLabel: { axisLabel: {
formatter: (function(value){ formatter: (function(value){
// console.log(value,'value')
return moment(parseInt(value/1000000)).format('YYYY-MM-DD HH:mm:ss') return moment(parseInt(value/1000000)).format('YYYY-MM-DD HH:mm:ss')
}) })
}, },
max:maxtime.add(5,'seconds').unix()*1000000000,
max:maxtime.unix()*1000000000,
// max:maxtime.add(10,'seconds').unix()*1000000000,
min:mintime.unix()*1000000000, min:mintime.unix()*1000000000,
splitNumber:10, splitNumber:10,
axisLine:{ axisLine:{
show:true, show:true,
symbol: ['none', 'arrow'] symbol: ['none', 'arrow']
...@@ -317,11 +388,13 @@ class App extends Component { ...@@ -317,11 +388,13 @@ class App extends Component {
series: series, series: series,
}; };
myChart.setOption(option); myChart.setOption(option);
window.addEventListener("resize", function () { // window.addEventListener("resize", function () {
myChart.resize(); //使图表自适应窗口的大小 // myChart.resize(); //使图表自适应窗口的大小
}) // })
extension(myChart); this.extension(myChart);
function extension(myChart){ }
extension(myChart) {
var elementDiv = document.getElementById('extension'); var elementDiv = document.getElementById('extension');
if(!elementDiv){ if(!elementDiv){
var div = document.createElement('div') var div = document.createElement('div')
...@@ -343,10 +416,7 @@ class App extends Component { ...@@ -343,10 +416,7 @@ class App extends Component {
elementDiv.style.top = yy + 'px' elementDiv.style.top = yy + 'px'
elementDiv.style.left = xx + 'px' elementDiv.style.left = xx + 'px'
} }
} }else if(params.componentType == "series"){
})
myChart.on('mousemove', function (params) {
if(params.componentType == "series"){
if(params.name === params.data.name){ if(params.name === params.data.name){
var elementDiv = document.querySelector('#extension') var elementDiv = document.querySelector('#extension')
var elementStyle = styleCss var elementStyle = styleCss
...@@ -360,10 +430,7 @@ class App extends Component { ...@@ -360,10 +430,7 @@ class App extends Component {
elementDiv.style.left = xx + 'px' elementDiv.style.left = xx + 'px'
} }
} }
} }else if(params.componentType == "markLine"){
})
myChart.on('mousemove', function (params) {
if(params.componentType == "markLine"){
var elementDiv = document.querySelector('#extension') var elementDiv = document.querySelector('#extension')
var elementStyle = styleCss var elementStyle = styleCss
elementDiv.style.cssText = elementStyle elementDiv.style.cssText = elementStyle
...@@ -377,6 +444,7 @@ class App extends Component { ...@@ -377,6 +444,7 @@ class App extends Component {
} }
} }
}) })
myChart.on('mouseout', function (params) { myChart.on('mouseout', function (params) {
var elementDiv = document.querySelector('#extension') var elementDiv = document.querySelector('#extension')
if (params.componentType == 'yAxis') { if (params.componentType == 'yAxis') {
...@@ -392,11 +460,9 @@ class App extends Component { ...@@ -392,11 +460,9 @@ class App extends Component {
} }
}) })
} }
})
}
render() { render() {
return ( 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> </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