<template>
	<el-card shadow="hover" header="实时收入" v-loading="loading">
		<xEcharts ref="c1" height="300px" :option="option"></xEcharts>
	</el-card>
</template>

<script>
	import xEcharts from '@/components/xEcharts';

	export default {
		title: "实时收入",
		icon: "el-icon-data-line",
		description: "Echarts组件演示",
		components: {
			xEcharts
		},
		data() {
			return {
				loading: true,
				option: {}
			}
		},
		created() {
			var _this = this;
			setTimeout(function() {
				_this.loading = false
			}, 500);

			var option = {
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					boundaryGap: false,
					type: 'category',
					data: (function (){
						var now = new Date();
						var res = [];
						var len = 30;
						while (len--) {
							res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
							now = new Date(now - 2000);
						}
						return res;
					})()
				},
				yAxis: [{
					type: 'value',
					name: '价格',
					"splitLine": {
						"show": false
					}
				}],
				series: [
					{
						name: '收入',
						type: 'line',
						symbol: 'none',
						lineStyle: {
							width: 1,
							color: '#409EFF'
						},
						areaStyle: {
							opacity: 0.1,
							color: '#79bbff'
						},
						data: (function (){
							var res = [];
							var len = 30;
							while (len--) {
								res.push(Math.round(Math.random() * 0));
							}
							return res;
						})()
					},
				],
			};
			this.option = option;

		},
		mounted(){
			 var _this = this;
			setInterval(function (){
				var o = _this.option;

				o.series[0].data.shift()
				o.series[0].data.push(Math.round(Math.random() * 100));

				o.xAxis.data.shift();
				o.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));


				//_this.$refs.c1.myChart.setOption(o)
			},2100)

		},
	}
</script>
