Solve the problem of ID duplication when calling multiple times when the Vue2 encapsulated component contains echarts

1 Introduction

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

2. Solution

1. Change the id to dynamic parameter transfer (the code will not be shown here)

2. Change id to ref (recommended)

// 修改前
<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)