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
Show 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'
class App extends Component {
state={
data:[],
TopAxisX:[],
BottomAxisX:[],
TopAxisX1:[],
AxisY:[],
Links:[],
target:[],
......@@ -17,12 +20,26 @@ class App extends Component {
})
.then(res =>res.json())
.then((data) => {
this.setState({
data:data.result.Rows,
TopAxisX:data.result.AxisX.TopAxisX,
BottomAxisX:data.result.AxisX.BottomAxisX,
AxisY:data.result.AxisY,
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 target=[];
for(var i in source){
......@@ -30,7 +47,7 @@ class App extends Component {
var lineList=source[i];
for (var j in lineList) {
list.push([
lineList[j].XAsTime,
lineList[j].XAsTime/1000,
lineList[j].Type,
lineList[j].Y,
lineList[j].Desc,
......@@ -43,8 +60,18 @@ class App extends Component {
target.push(list);
}
// console.log("target", target);
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
......@@ -62,6 +89,9 @@ class App extends Component {
}else if(item[7]=='Famous2'){
colors ='#06FF02'
}
return {
label: {
show: true,
......@@ -74,24 +104,23 @@ class App extends Component {
},
name: item[6],
value: item,
x: item[0],
// x: item[0],
itemStyle:{
normal:{
borderWidth: 1,
borderColor: '#333',
color:colors
}
}
},
symbolSize:item[3]==item[6]? 15 : 15
};
})
return data;
})
var newArr=arr.reduce(function(total,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'))
// console.log(xTime)
let links = data.result.Links;
......@@ -102,7 +131,6 @@ class App extends Component {
// links.pop();
series.push({
name: type,
type: 'graph',
coordinateSystem: 'cartesian2d',
data: newArr,
......@@ -125,6 +153,7 @@ class App extends Component {
},
symbolSize: 15,
// animationDelay: function (idx) {
// return idx * 100;
// }
......@@ -150,17 +179,83 @@ class App extends Component {
containLabel: true,
top: 80
},
xAxis: [{
type: 'value',
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,
// 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: 'value',
}],
// type: 'time',
axisLine:{
show: true
},
axisLine: {
symbol: ['none', 'arrow']
},
data:time,
boundaryGap: true,
axisLabel:{
inside: true,
},
axisTick: { //刻度线
alignWithLabel:true, //刻度线和标签对齐，boundaryGap为true时有效
},
}
],
yAxis: {
type: 'category',
name:'validator',
data: this.state.AxisY,
triggerEvent: true,
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