包含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>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
