// 曲线图 ==》 （首页，数据分析）
<template lang="pug">
div(:id="id", :style="{ width: '100%', height: '90%' }")
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector'

export default {
	props: ['id', 'data', 'title', 'color', 'yAxisName'],
	watch: {
		data: {
			immediate: true,
			deep: true,
			handler(newValue, oldValue) {
				this.initChart()
			}
		}
	},
	mounted() {
		this.initChart()
		const erd = elementResizeDetectorMaker()
		erd.listenTo(document.getElementById(this.id), () => {
			this.$nextTick(() => {
				//监听到事件后执行的业务逻辑
				this.initChart()
			})
		})
	},
	destroyed() {
		window.onresize = null
	},
	methods: {
		initChart() {
			let dom = document.getElementById(this.id)
			if (!dom) return
			let myCharts = this.$echarts.init(dom)
			let option = {
				// color:['#D0F0FF'],
				title: {
					text: this.title
				},
				tooltip: {
					trigger: 'axis',
					transitionDuration: 0
				},
				grid: {
					left: '3%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						// type: 'category',
						type: 'time',
						boundaryGap: false
					}
				],
				yAxis: [
					{
						type: 'value',
						name: this.yAxisName
					}
				],
				series: [
					{
						name: '',
						type: 'line',
						stack: '总量',
						smooth: true,
						// label: {
						//   show: true,
						//   position: 'top'
						// },
						areaStyle: {
							normal: {
								color: new this.$echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{
											offset: 0,
											color: this.color // 0% 处的颜色
										},
										{
											offset: 1,
											color: '#fff' // 100% 处的颜色
										}
									]
								)
							}
						},
						lineStyle: {
							color: this.color
						},
						itemStyle: {
							normal: {
								color: '#13B0FF'
							}
						},
						emphasis: {
							focus: 'series'
						},
						data: this.data
					}
				]
			}
			myCharts.setOption(option, true)
			myCharts.resize()

			window.addEventListener('resize', function() {
				myCharts.resize()
			})
		}
	}
}
</script>

<style lang="scss" scoped></style>