<template>
	<div style="width: 100%; height: 100%">
		<div :id="echartsId" ref="echarts" style="width: 100%; height: 100%"></div>
	</div>
</template>
<script>
	export default {
		name: "EchartsComponents",
		data() {
			return {
				myChart: {},
			};
		},
		watch: {
			echartObj: {
				//添加监听echartObj参数 修改自动刷新
				handler(newVal, oldVal) {
					//this.myChart.setOption(newVal || oldVal);
					this.loadEchart()
				},
				deep: true, //对象内部属性的监听
			},
		},
		props: {
			echartObj: {
				type: Object,
				default() {
					return {};
				},
			},
			events: {
				type: Function,
				default() {
					// console.log("echarts事件默认函数");
				},
			},
		},
		mounted() {
			this.$nextTick(() => {
				this.loadEchart();
			});
		},
		methods: {
			loadEchart() {
				var _this = this;
				this.myChart = echarts.init(document.getElementById(this.echartsId));

				var myChart = this.myChart;
				var echartObj = this.echartObj;

				myChart.setOption(echartObj);
				if(
					Object.prototype.toString.call(echartObj.series) === "[object Object]"
				) {

					if(echartObj.series.type == "map") {
						var events = this.events;

						myChart.on("click", function(params) {
							//点击事件
							events(myChart, echartObj, params);
						});
					}
				} else {
					if(this.events){
							this.myChart.on('click', this.events)
					}
				}

			},
		},
		computed: {
			echartsId() {
				return "echarts" + Math.random() * 100000;
			},
		},
	};
</script>