<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import {
		statistics
	} from "@/api/index";
	import echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'

	const animationDuration = 6000

	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '300px'
			}
		},
		data() {
			return {
				chart: null,
				form: {
					statisticsType: '1',
				}
			}
		},
		created() {
			// this.getstatistics();
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart();
				// this.getstatistics();
			})
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			getstatistics() {
				let query = {
					statisticsType: '3',
				}
				statistics(query).then(res => {
					console.log(res.data.statistics)
					// res.data.statistics.forEach((item) => {
					// 	console.log(item.sum)
					// 	lineChartData.newVisitis.expectedData.push(item.sum);
					// });
				})
			},
			initChart() {
				this.chart = echarts.init(this.$el, 'macarons')

				this.chart.setOption({
						tooltip: {
							trigger: 'axis',
							axisPointer: { // 坐标轴指示器，坐标轴触发有效
								type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
							}
						},
						grid: {
							top: 10,
							left: '2%',
							right: '2%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: [{
							type: 'category',
							data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
							axisTick: {
								alignWithLabel: true
							}
						}],
						yAxis: [{
							type: 'value',
							axisTick: {
								show: false
							}
						}],
						series: [{
							name: 'pageC',
							type: 'bar',
							stack: 'vistors',
							barWidth: '60%',
							data: [30, 52, 200, 334, 390, 330, 220],
							animationDuration
						}]
					},
					// console.log(series.data)
				)
			}
		}
	}
</script>