<template>
	<div class="echarts"></div>
</template>

<script>
	import * as echarts from 'echarts'
	import {
		markRaw
	} from 'vue'
	export default {
		props: {
			isUpdate: String,
			option: {
				type: Object,
				default: function () {
					return {
						type: 'default'
					}
				}
			}
		},
		watch: {
			// 防止配置改变后不更新配置，重新加载配置即可
			option: {
				deep: true,
				handler() {
					if (this.chart) {
						this.chart.setOption(this.option)
					}
				}
			},
			// 自适应大小
			isUpdate() {
				if (this.chart) {
					this.chart.resize()
				}
			}
		},
		data() {
			return {
				chart: null
			}
		},
		mounted() {
			this.initChart()
		},
		methods: {
			initChart() {
				this.chart = markRaw(echarts.init(this.$el, 'dark')) //获取自身dom元素
				// this.chart = echarts.init(this.$el, 'dark')
				if (this.option.type != 'default') {
					this.chart.setOption(this.option)
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.echarts {
		width: 100%;
		height: 100%;
	}
</style>