曲线图数据

src/components/Report.vue

@@ -201,96 +201,7 @@
 		methods: {
 			drawLine() {
 				// 基于准备好的dom，初始化echarts实例
-				let myChart = this.$echarts.init(document.getElementById('myChart'))
-				// 绘制图表
-
-				var colors = ['#5793f3', '#d14a61', '#675bba'];
-
-
-				var option = {
-					title: { text: '战斗场次走势图' },
-					color: colors,
-
-					tooltip: {
-						trigger: 'none',
-						axisPointer: {
-							type: 'cross'
-						}
-					},
-					legend: {
-						data: ['竞技场', '娱乐场']
-					},
-					grid: {
-						top: 70,
-						bottom: 50
-					},
-					xAxis: [
-						{
-							type: 'category',
-							axisTick: {
-								alignWithLabel: true
-							},
-							axisLine: {
-								onZero: false,
-								lineStyle: {
-									color: colors[1]
-								}
-							},
-							axisPointer: {
-								label: {
-									formatter: function (params) {
-										return '娱乐场数  ' + params.value
-											+ (params.seriesData.length ? '：' + params.seriesData[0].data : '');
-									}
-								}
-							},
-							data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
-						},
-						{
-							type: 'category',
-							axisTick: {
-								alignWithLabel: true
-							},
-							axisLine: {
-								onZero: false,
-								lineStyle: {
-									color: colors[0]
-								}
-							},
-							axisPointer: {
-								label: {
-									formatter: function (params) {
-										return '竞技场数  ' + params.value
-											+ (params.seriesData.length ? '：' + params.seriesData[0].data : '');
-									}
-								}
-							},
-							data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
-						}
-					],
-					yAxis: [
-						{
-							type: 'value'
-						}
-					],
-					series: [
-						{
-							name: '竞技场',
-							type: 'line',
-							xAxisIndex: 1,
-							smooth: true,
-							data: [2.6, 5.9, 9.0, 26.4, 1111.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
-						},
-						{
-							name: '娱乐场',
-							type: 'line',
-							smooth: true,
-							data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
-						}
-					]
-				};
-
-				myChart.setOption(option);
+				this.myChart = this.$echarts.init(document.getElementById('myChart'))
 			},
 			searchTextChange: function () {
 				var username = this.username
@@ -329,6 +240,95 @@
 				API.getReport(params).then((res) => {
 					_this.report = res.data
 					console.log(_this.report)
+
+					var colors = ['#5793f3', '#d14a61', '#675bba'];
+
+
+					var option = {
+						title: { text: '战斗场次走势图' },
+						color: colors,
+
+						tooltip: {
+							trigger: 'none',
+							axisPointer: {
+								type: 'cross'
+							}
+						},
+						legend: {
+							data: ['竞技场', '娱乐场']
+						},
+						grid: {
+							top: 70,
+							bottom: 50
+						},
+						xAxis: [
+							{
+								type: 'category',
+								axisTick: {
+									alignWithLabel: true
+								},
+								axisLine: {
+									onZero: false,
+									lineStyle: {
+										color: colors[1]
+									}
+								},
+								axisPointer: {
+									label: {
+										formatter: function (params) {
+											return '娱乐场数  ' + params.value
+												+ (params.seriesData.length ? '：' + params.seriesData[0].data : '');
+										}
+									}
+								},
+								data: Object.keys(_this.report.hourlyDataMap.entertain)
+							},
+							{
+								type: 'category',
+								axisTick: {
+									alignWithLabel: true
+								},
+								axisLine: {
+									onZero: false,
+									lineStyle: {
+										color: colors[0]
+									}
+								},
+								axisPointer: {
+									label: {
+										formatter: function (params) {
+											return '竞技场数  ' + params.value
+												+ (params.seriesData.length ? '：' + params.seriesData[0].data : '');
+										}
+									}
+								},
+								data: Object.keys(_this.report.hourlyDataMap.athletic)
+							}
+						],
+						yAxis: [
+							{
+								type: 'value'
+							}
+						],
+						series: [
+							{
+								name: '竞技场',
+								type: 'line',
+								xAxisIndex: 1,
+								smooth: true,
+								data: Object.values(_this.report.hourlyDataMap.athletic)
+							},
+							{
+								name: '娱乐场',
+								type: 'line',
+								smooth: true,
+								data: Object.values(_this.report.hourlyDataMap.entertain)
+							}
+						]
+					};
+
+					_this.myChart.setOption(option);
+
 				}, (res) => {
 					//
 				})