zhouchijian/fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add second line in the history graph

Browse Source
This commit is contained in:
weijianli
2019-10-11 15:28:31 -05:00
parent 1edb17ab8d
commit c92ab73d1d
3 changed files with 127 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/VueUploader/index.vue
View File

@@ -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],

104
src/views/dashboard/admin/components/LineChart.vue
View File

@@ -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'
// }
]
})
}
}
}
}

25
src/views/plotTest/plotTest.vue
View File

@@ -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: {