Solve the problem of ID duplication when calling multiple times when the Vue2 encapsulated component contains echarts
1 Introduction
封装组件中使用echarts时,多次调用导致id重复,出现页面不渲染、数据覆盖等问题。
2. Solution
-
Change the id to dynamic parameter transfer (the code will not be shown here)
-
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)