<template>
	<div id="charts" :style="style"></div>
</template>

<script>
	import * as echarts from 'echarts';

	export default {
		name: 'jt-charts',
		data() {
			return {
				chart: ''
			}
		},
		props: {
			id: {
				type: String
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '270rem'
			},
			option: {
				type: Object,
				default () {
					return {
						
					}
				}
			}
		},
		computed: {
			style() {
				return {
					width: this.width,
					height: this.height
				}
			}
		},
		watch: {
			option: {
				handler(newVal, oldVal) {
					if (this.chart) {
						this.chart.setOption(newVal)
					} else {
						this.init();
					}
				},
				deep: true
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.chart = echarts.init(document.getElementById('charts'))
				this.chart.setOption(this.option)
				window.addEventListener("resize", this.chart.resize);
				
			}
		}
	}
</script>
