包含Echarts的模块多处引用导致显示异常问题的解决方案

包含Echarts的模块多处引用导致显示异常问题的解决方案

业务场景：

一个Echarts图表组件individual-monitoring-arc.vue，需要在一个大型项目上引用两次

但只有首次引用的该组件显示正常，后面引用的组件不会显示Echarts图表，且会影响首次引用的组件显示

两处Echarts图表数据传输没问题

问题原因：

多次引用在同一个大型项目中，会导致id为myChart的Echarts图表容器出现两次，每次执行
this.myChart = echarts.init(document.getElementById('myChart')时，都会从上向下遍历HTML文档，找到第一个符合条件的DOM元素，所以，问题的跟原在于每次都是找的同一个myChart元素。

问题解决：

在引用individual-monitoring-arc.vue组件时为其传入数据，动态的指定Echarts图表的容器ID。

代码展示：

引用Echarts组件的组件处理：

<MyEcharts echartsBoxId="monitoring">

包含Echarts的组件individual-monitoring-arc.vue处理：

<template>
<div :id="echartsBoxId"></div>
</template>

<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
	props: ["echartsBoxId"],
	data() {
	    return {
	    	echartsBoxId: 'myEchart',
	    	myChart: null
	    }
	},
	created() {
		this.echartsBoxId = this.$props.echartsBoxId
	},
	methods: () {
		initEcharts() {
			this.myChart = echarts.init(document.getElementById(this.myChartBox));
			let option = {
				//something
			};
			this.myChart.setOption(option);
		}
	}
}
</script>