解决Vue2封装组件含有echarts时多次调用出现id重复问题

解决Vue2封装组件含有echarts时多次调用出现id重复问题

  • 1、前言
  • 2、解决方法

1、前言

封装组件中使用echarts时,多次调用导致id重复,出现页面不渲染、数据覆盖等问题。

2、解决方法

  1. 把id改成动态传参(这里就不作代码展示了)

  2. 把id换成ref(推荐)

// 修改前
<div class="echarts-box">
  <div id="soh_chart" style="width: 100px; height: 100px" />
</div>
var myChartDom = document.getElementById('soh_chart')
let myChart = echarts.init(myChartDom)

// 修改后
var myChartDom = this.$refs.soh_chart
let myChart = echarts.init(myChartDom)

你可能感兴趣的:(Vue2,Echarts,echarts,前端,javascript)