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>