解决Vue页面中复用同一ECharts组件导致图表不显示的问题

问题背景与现象

由于项目中需要展示ECharts图表的场景较多，为了提高开发效率，我们将图表功能封装为独立组件以便复用，具体效果如图：

我们需要实现一个饼图组件，并且该组件将在后续多个页面或位置中被反复调用。

直接复制ECharts官方示例代码，修改相关数据配置，即可在需要时直接调用该组件。

然而，在实际使用中遇到了一个问题：如果在同一个Vue页面中多次实例化该组件，图表无法正常渲染。经过分析发现，ECharts库通过DOM元素的ID来获取目标对象进行初始化。

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

当我们将ECharts封装为Vue组件并多次使用时，如果组件内部固定的DOM ID保持不变，会导致同一页面中出现多个相同的ID。ECharts在初始化时无法正确区分这些元素，从而导致图表显示异常或失败。

解决方案与实现

针对上述问题，我们提出以下解决方案：

假设我们需要在一个页面中同时使用该组件两次，

首先，在子组件的data中新增一个变量，暂命名为type。其次，在父组件的数据定义中，为第一个图表实例的数据对象pieData1添加属性type: 1，为第二个图表实例的数据对象pieData2添加属性type: 2。

 pieData1:{
 type: 1,
 title: '失败次数',
 list:[
  {value:335, name:'502 Bad Gateway'},
  {value:310, name:'404 Not Found'},
  {value:234, name:'无法连接服务器'},
  {value:135, name:'请求超时'},
  {value:1548, name:'Trace LOSS'},
 ],
 pieStyle: {
  width: '400px',
  height: '400px',
  float: 'right'
 }
 },
 
 pieData2:{
 type: 2,
 title: '失败次数',
 list:[
  {value:335, name:'502 Bad Gateway'},
  {value:310, name:'404 Not Found'},
  {value:234, name:'无法连接服务器'},
  {value:135, name:'请求超时'},
  {value:1548, name:'Trace LOSS'},
 ],
 pieStyle: {
  width: '400px',
  height: '400px',
  float: 'right'
 }
 }

接下来，修改子组件以支持在同一Vue页面中多次调用：

HTML结构部分：

<div id="demo1" :style="pieStyle" v-if="pieData.type==1"></div>

<div id="demo2" :style="pieStyle" v-if="pieData.type==2"></div>

JavaScript逻辑部分：

var myPie 
 if(this.pieData.type==1){
 myPie = echarts.init(document.getElementById("demo1"));
 }else if(this.pieData.type==2){
 myPie = echarts.init(document.getElementById("demo2"));
 }

通过上述修改，问题得以解决，最终效果如下图所示：

如果后续发现其他更优方案，将在此补充。

常见问题分析

补充知识：在Vue中，当封装的ECharts组件被同一页面多次调用时，常出现数据覆盖或图表不显示的问题。

这通常是因为echarts.init初始化逻辑存在问题，例如使用了固定的class或id选择器来定位DOM元素进行初始化。

错误的实现方式示例：

正确的实现方式示例：

以上即为解决Vue页面中复用同一ECharts组件导致图表不显示问题的完整方案，希望能为读者提供参考，也欢迎大家继续支持本站。