add second line in the history graph
This commit is contained in:
weijianli
parent
1edb17ab8d
commit
c92ab73d1d
|
|
@ -537,6 +537,26 @@ export default {
|
|||
this.$router.push({ name: "analyze" })
|
||||
this.listLoading = true
|
||||
sendAnalyzeRequest().then(response => {
|
||||
this.$router.push({ name: "plotTest", params: {
|
||||
past: {
|
||||
yAxisData: [100, 120, 161, 134, 105, 160, 165, 190,200,250],
|
||||
xAxisData: ['2019-7-13', '2019-7-14', '2019-7-15', '2019-7-16', '2019-7-17', '2019-7-18', '2019-7-19', '2019-7-20','2019-7-21','2019-7-22'] ,
|
||||
label: 'Past',
|
||||
colorPicked: '#999997',
|
||||
twoLines: true,
|
||||
yAxisData2: [30, 140, 150, 200, 150, 170, 165, 170,150,230],
|
||||
label2: 'Prediction',
|
||||
colorPicked2: '#999997'
|
||||
},
|
||||
future: {
|
||||
yAxisData: [260, 230, 270, 285, 295, 300, 310,330],
|
||||
xAxisData: ['2019-8-13', '2019-8-14', '2019-8-15', '2019-8-16', '2019-8-17', '2019-8-18', '2019-8-19', '2019-8-20'] ,
|
||||
label: 'Future',
|
||||
colorPicked: '#519e19'
|
||||
}
|
||||
}})
|
||||
|
||||
|
||||
var token = response['token']
|
||||
var para = response['future']
|
||||
|
||||
|
|
@ -548,7 +568,11 @@ export default {
|
|||
yAxisData: [100, 120, 161, 134, 105, 160, 165, 190,200,250],
|
||||
xAxisData: ['2019-7-13', '2019-7-14', '2019-7-15', '2019-7-16', '2019-7-17', '2019-7-18', '2019-7-19', '2019-7-20','2019-7-21','2019-7-22'] ,
|
||||
label: 'Past',
|
||||
colorPicked: '#999997'
|
||||
colorPicked: '#999997',
|
||||
twoLines: true,
|
||||
yAxisData2: [100, 140, 161, 134, 105, 160, 165, 190,200,250],
|
||||
label2: 'Past2',
|
||||
colorPicked2: '#999997'
|
||||
},
|
||||
future: {
|
||||
yAxisData: [260, 230, 270, 285, 295, 300, 310,330],
|
||||
|
|
|
|||
|
|
@ -62,7 +62,85 @@ export default {
|
|||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
this.setOptions(this.chartData)
|
||||
},
|
||||
setOptions({ xAxisData, yAxisData, label, colorPicked} = {}) {
|
||||
setOptions({ xAxisData, yAxisData, label, colorPicked, twoLines = false, label2 = "none", yAxisData2 = [], colorPicked2 = ""} = {}) {
|
||||
if (twoLines) {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
top: 30,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
padding: [5, 10]
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: [label, label2]
|
||||
},
|
||||
series: [{
|
||||
name: label, itemStyle: {
|
||||
normal: {
|
||||
color: colorPicked,
|
||||
lineStyle: {
|
||||
color: colorPicked,
|
||||
width: 3
|
||||
}
|
||||
}
|
||||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: yAxisData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut'
|
||||
},
|
||||
{
|
||||
name: label2, itemStyle: {
|
||||
normal: {
|
||||
color: colorPicked2,
|
||||
lineStyle: {
|
||||
color: colorPicked2,
|
||||
width: 3
|
||||
}
|
||||
}
|
||||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#3888fa',
|
||||
lineStyle: {
|
||||
color: '#3888fa',
|
||||
width: 3
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#f3f8ff'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: yAxisData2,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut'
|
||||
}
|
||||
]
|
||||
})
|
||||
} else {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
|
|
@ -109,28 +187,12 @@ export default {
|
|||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut'
|
||||
}
|
||||
// {
|
||||
// name: 'actual',
|
||||
// smooth: true,
|
||||
// type: 'line',
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// color: '#3888fa',
|
||||
// lineStyle: {
|
||||
// color: '#3888fa',
|
||||
// width: 3
|
||||
// },
|
||||
// areaStyle: {
|
||||
// color: '#f3f8ff'
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
// data: actualData,
|
||||
// animationDuration: 2800,
|
||||
// animationEasing: 'quadraticOut'
|
||||
// }
|
||||
]
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
<div class="dashboard-editor-container">
|
||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
||||
<!-- <line-chart :chart-data="{xAxisData, yAxisData, label}" /> -->
|
||||
<h2>History Plot</h2>
|
||||
<line-chart :chart-data="past" />
|
||||
<h2>Prediction Plot</h2>
|
||||
<line-chart :chart-data="future" />
|
||||
<h2>History Plot</h2>
|
||||
<line-chart :chart-data="past" />
|
||||
</el-row>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -49,18 +49,31 @@ export default {
|
|||
BoxCard
|
||||
},
|
||||
props: {
|
||||
twoLines: true,
|
||||
past: {
|
||||
xAxisData: {
|
||||
default: [120, 82, 91, 154, 162, 140, 145,230]
|
||||
},
|
||||
yAxisData: {
|
||||
default: ['a', 'x', 'c', 'd', 'e', 'f', 'g', 'h']
|
||||
},
|
||||
yAxisData: {
|
||||
default: [120, 82, 91, 154, 162, 140, 145,230]
|
||||
},
|
||||
label: {
|
||||
default: 'Future'
|
||||
default: 'Past'
|
||||
},
|
||||
colorPicked: {
|
||||
default: '#999997'
|
||||
},
|
||||
twoLines: {
|
||||
default: true
|
||||
},
|
||||
yAxisData2: {
|
||||
default: [150, 96, 190, 150, 180, 160, 76,180]
|
||||
},
|
||||
label2: {
|
||||
default: 'Prediction'
|
||||
},
|
||||
colorPicked2: {
|
||||
default: '#999997'
|
||||
}
|
||||
},
|
||||
future: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue