Skip to content

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

添加箭头轴线

parent f407b5b2
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 18 deletions
src/App.js
View file @ aeefd1b5
...@@ -4,6 +4,9 @@ import moment from 'moment' ...@@ -4,6 +4,9 @@ import moment from 'moment'
class App extends Component { class App extends Component {
state={ state={
data:[], data:[],
TopAxisX:[],
BottomAxisX:[],
TopAxisX1:[],
AxisY:[], AxisY:[],
Links:[], Links:[],
target:[], target:[],
...@@ -17,12 +20,26 @@ class App extends Component { ...@@ -17,12 +20,26 @@ class App extends Component {
}) })
.then(res =>res.json()) .then(res =>res.json())
.then((data) => { .then((data) => {
this.setState({ this.setState({
data:data.result.Rows, data:data.result.Rows,
TopAxisX:data.result.AxisX.TopAxisX,
BottomAxisX:data.result.AxisX.BottomAxisX,
AxisY:data.result.AxisY, AxisY:data.result.AxisY,
Links:data.result.Links, Links:data.result.Links,
}) })
var top=data.result.AxisX.TopAxisX
var value=top.map(item=>{
return item.Value;
})
var time=top.map(item=>{
return item.Time;
})
console.log(time,'time')
console.log(data.result.AxisX.AxisXEnd-data.result.AxisX.AxisXBegin,'时间')
var source= data.result.Rows var source= data.result.Rows
var target=[]; var target=[];
for(var i in source){ for(var i in source){
...@@ -30,7 +47,7 @@ class App extends Component { ...@@ -30,7 +47,7 @@ class App extends Component {
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, lineList[j].XAsTime/1000,
lineList[j].Type, lineList[j].Type,
lineList[j].Y, lineList[j].Y,
lineList[j].Desc, lineList[j].Desc,
...@@ -43,8 +60,18 @@ class App extends Component { ...@@ -43,8 +60,18 @@ class App extends Component {
target.push(list); target.push(list);
} }
// console.log("target", target); // 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;
...@@ -62,6 +89,9 @@ class App extends Component { ...@@ -62,6 +89,9 @@ class App extends Component {
}else if(item[7]=='Famous2'){ }else if(item[7]=='Famous2'){
colors ='#06FF02' colors ='#06FF02'
} }
return { return {
label: { label: {
show: true, show: true,
...@@ -74,24 +104,23 @@ class App extends Component { ...@@ -74,24 +104,23 @@ class App extends Component {
}, },
name: item[6], name: item[6],
value: item, value: item,
x: item[0], // x: item[0],
itemStyle:{ itemStyle:{
normal:{ normal:{
borderWidth: 1, borderWidth: 1,
borderColor: '#333', borderColor: '#333',
color:colors color:colors
} }
} },
symbolSize:item[3]==item[6]? 15 : 15
}; };
}) })
return data; return data;
}) })
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) console.log(newArr,'newArr')
// 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;
...@@ -102,7 +131,6 @@ class App extends Component { ...@@ -102,7 +131,6 @@ class App extends Component {
// links.pop(); // links.pop();
series.push({ series.push({
name: type, name: type,
type: 'graph', type: 'graph',
coordinateSystem: 'cartesian2d', coordinateSystem: 'cartesian2d',
data: newArr, data: newArr,
...@@ -125,6 +153,7 @@ class App extends Component { ...@@ -125,6 +153,7 @@ class App extends Component {
}, },
symbolSize: 15, symbolSize: 15,
// animationDelay: function (idx) { // animationDelay: function (idx) {
// return idx * 100; // return idx * 100;
// } // }
...@@ -150,17 +179,83 @@ class App extends Component { ...@@ -150,17 +179,83 @@ class App extends Component {
containLabel: true, containLabel: true,
top: 80 top: 80
}, },
xAxis: [{ xAxis: [
type: 'value', {
// min: data.result.AxisXBegin, type: 'time',
// max: data.result.AxisXEnd, axisLine:{
scale: true, show: true
}, },
{ data:time,
type: 'value', 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,
},
axisLine: {
symbol: ['none', 'arrow']
},
axisTick: { //刻度线
alignWithLabel:true, //刻度线和标签对齐，boundaryGap为true时有效
},
},
{
// type: 'value',
name:'block',
axisLine:{
show: true
},
axisLine: {
symbol: ['none', 'arrow']
},
data:value,
boundaryGap: true,
axisTick: { //刻度线
alignWithLabel:true, //刻度线和标签对齐，boundaryGap为true时有效
},
},
{
// type: 'time',
axisLine:{
show: true
},
axisLine: {
symbol: ['none', 'arrow']
},
data:time,
boundaryGap: true,
axisLabel:{
inside: true,
},
axisTick: { //刻度线
alignWithLabel:true, //刻度线和标签对齐，boundaryGap为true时有效
},
}
],
yAxis: { yAxis: {
type: 'category', type: 'category',
name:'validator',
data: this.state.AxisY, data: this.state.AxisY,
triggerEvent: true, triggerEvent: true,
axisLabel:{ axisLabel:{
......
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