diff --git a/src/views/VueUploader/index.vue b/src/views/VueUploader/index.vue index 589dfe4a..022962db 100644 --- a/src/views/VueUploader/index.vue +++ b/src/views/VueUploader/index.vue @@ -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 future = response['future'] var past = response['past'] @@ -547,7 +567,6 @@ export default { // this.$router.push({ name: "plot" }) this.$router.push({ name: "plotTest", params: { past, - past_predict, future }}) } diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue index e9c7ffef..85bcd782 100644 --- a/src/views/dashboard/admin/components/LineChart.vue +++ b/src/views/dashboard/admin/components/LineChart.vue @@ -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, @@ -108,29 +186,14 @@ export default { data: yAxisData, 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' - // } + } + ] }) + + } + + } } } diff --git a/src/views/plotTest/plotTest.vue b/src/views/plotTest/plotTest.vue index 680c1ec4..1e545d4f 100644 --- a/src/views/plotTest/plotTest.vue +++ b/src/views/plotTest/plotTest.vue @@ -3,10 +3,10 @@
-

History Plot

-

Prediction Plot

+

History Plot

+
@@ -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' } }, past_predict: {