vue中在一个页面复用同一个echarts写的组件不能显示的问题，使用ref解决问题及原理分析

1.问题：前端vue创建echarts相关组件之后，不能在同一个页面进行多次引入，只能正常显示第一个引入的问题。

2.解决办法：将id命名的dom元素改为ref方式。但是自己代码又不能直接用this,this.$ref情况。

（可以用this这种情况的请移步直接用this.$ref情况）

①在id后面加一个ref 标记，用ref来获取div容器。

②再创建一个 Vue 3 的响应式引用 perChart ，其初始值为 null，将自动与上面模板的dom元素关联起来。

//创建一个ref
const perChart = ref(null)

③最后直接用.value获取到该dom元素

 let myChart = echarts.init(perChart.value)

3.完整代码展示

<template>
  <ContentWrap :title="t('levelDemo.menu')">
    <div class="first1" style="flex: 5; padding-left: 10px; right: 10px">
      <!--      增加ref="perChart"或者替换id方式-->
      <div id="perChart" ref="perChart" style="margin-bottom: 10px; display: inline-block"></div>
      <div class="item_txt" style="text-align: center">
        <ElButton type="primary" plain>开始检测</ElButton>
      </div>
    </div>
  </ContentWrap>
</template>

<script setup lang="ts">
import { ElButton } from 'element-plus'
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { t } from '@wangeditor/editor'
//创建一个ref
const perChart = ref(null)
onMounted(() => {
  perBtn()
})
const perBtn = () => {
  //.value方式找到容器
  let myChart = echarts.init(perChart.value)
  // let myChart = echarts.init(document.getElementById('perChart'))
  //开始渲染
  let option = {}
  myChart.setOption(option)
  window.addEventListener('resize', function () {
    myChart.resize()
  })
}
</script>

4.简单原理解释

1).在Vue 3中，ref 是一个函数，用于创建一个响应式引用。当你使用 ref 创建一个引用时，它将返回一个带有 .value 属性的响应式对象，该属性可以用于访问引用的值。

2).所以，const perChart = ref(null) 这行代码的意思是创建了一个名为 perChart 的引用，并将其初始值设置为 null。

本质：当组件渲染时，Vue 会自动将 perChart的值更新为 <div ref="perChart"> 元素的引用。这就实现了将 Vue 3 的响应式引用与特定的 DOM 元素关联起来。

3).问题：那如果有多个ref，你怎么知道取哪个dom元素？

回答：按顺序依次关联，在 Vue 3 中，当你创建 ref 并将其应用到多个元素时，Vue 会根据 ref 的创建顺序依次将这些元素与对应的 ref 关联起来。

所以：在下面的代码中，element1Ref 首先被创建，然后是 element2Ref。因此，当你在模板中使用 ref="element1" 时，它会将该 ref 与第一个元素关联起来；当你在模板中使用 ref="element2" 时，它会将该 ref 与第二个元素关联起来。

<template>
  <div>
    <div ref="element1">Element 1</div>
    <div ref="element2">Element 2</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 创建两个 ref，分别关联不同的 DOM 元素
const element1Ref = ref(null)
const element2Ref = ref(null)

onMounted(() => {
  // 在组件挂载后，可以通过 ref.value 获取关联的 DOM 元素
  const element1 = element1Ref.value
  const element2 = element2Ref.value
  
  // 对关联的 DOM 元素进行操作
  console.log(element1) // 第一个 DOM 元素
  console.log(element2) // 第二个 DOM 元素
})
</script>