解決echart在vue中id重復(fù)問題
更新時(shí)間：2024年03月12日 08:47:07 作者：一碼哥
這篇文章主要介紹了解決echart在vue中id重復(fù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
echart在vue中id重復(fù)問題
封裝的echarts組件重復(fù)調(diào)用時(shí)，id重復(fù)會(huì)導(dǎo)致頁面不渲染，數(shù)據(jù)覆蓋等一系列問題
解決方法
用ref解決了問題
解決方法：
//修改前 <div id="echart"></div> //修改后 <div ref="echart"></div>
初始化調(diào)用時(shí)，document.getElementById(‘xxx’) 改成 this.$refs.xxx
//修改前
var myChart = this.$echarts.init(document.getElementById('echart'));
//修改后
var myChart = this.$echarts.init(this.$refs.echart);組件調(diào)用
//1 <echart :data="myData"></echart > //2再次調(diào)用 <echart :data="myData"></echart >
Echarts圖表復(fù)用解決id唯一性
目前市面上許多項(xiàng)目都會(huì)接觸到可視化大屏的開發(fā)，用得最多的三方組件庫Echarts，在進(jìn)行封裝后復(fù)用許多同學(xué)會(huì)發(fā)現(xiàn)頁面渲染異常問題，只會(huì)渲染第一次復(fù)用的內(nèi)容.究其原因在于我們通過Id獲取了頁面節(jié)點(diǎn)進(jìn)行渲染造成了id的重復(fù).
網(wǎng)上也有許多的解決方案.在此，給大家分享一個(gè)自己測(cè)試后的可行的實(shí)施方案.我們可以通過uuid生成不同的id向子組件傳值指定唯一性，也可以通過隨機(jī)數(shù)的方式.
具體的操作我們接著往下看.
首先我們需要將需要復(fù)用的組件進(jìn)行簡(jiǎn)單的封裝. commonEcharts.vue(子組件)
<template>
<div :id="id"></div>
</template>
<script setup>
import { number } from 'echarts';
import { ref, inject, onMounted, onUnmounted, defineProps } from 'vue'
import useDraw from '/src/util/useDraw.js'
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
const echarts = inject('$echarts')
let { id, option } = defineProps({
option: Object,
id: String
})
let tuChart = () => {
let eg = document.getElementById(id)
eg.removeAttribute('_echarts_instance_')
const myChart = echarts.init(eg)
myChart.setOption(option)
window.addEventListener("resize", function () {
myChart.resize()
})
}
onMounted(() => {
windowDraw()
calcRate()
tuChart()
})
onUnmounted(() => {
unWindowDraw()
})
</script>
<style lang="scss" scoped>
#tu {
width: 615px;
height: 300px;
border: 1px solid gray;
margin-top: 15px;
}
</style>然后在需要使用的組件中父組件()引入對(duì)應(yīng)的組件.expControl.vue
import charts from '../../../components/copycompnents/commonEcharts.vue'
接下來解決id復(fù)用的問題,新建一個(gè)js或ts文件,對(duì)方法進(jìn)行封裝并導(dǎo)出引入.
新建createID.js文件
export function createId(){
return 'id' +Math.random()
}引入js文件
import { createId } from '../../../api/createId'在父組件中傳入配置項(xiàng)option,這兒一折線圖為例
let lineTwo = reactive({
color: ['#0298DB', '#F59A23'],
title: {
text: '出院人次數(shù)',
left: 80,
top: 20,
textStyle: {
fontWeight: 400,
fontFamily: 'Arial Normal',
fontStyle: 'normal',
fontSize: 20,
color: '#555555'
}
},
grid: {
top: 70,
bottom: 40,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
yAxis: {
type: 'value',
show: true,
min: 0,
max: 5000,
iterval: 1000,
axisLine: {
show: true
},
axisLabel: {
formatter: function (value, index) {
return value >= 1000 ? parseInt(value / 1000) + '千' : value;
}
},
axisPointer: {
type: 'shadow'
}
},
legend: {
// itemStyle: {}, //繼承系列中屬性值的顏色
right: 80,
top: 15,
itemGap: 20,
itemWidth: 9,
itemHeight: 10,
data: [
{ icon: 'rect', name: '今年' },
{ icon: 'rect', name: '去年' }
],
textStyle: {
fontWeight: 400,
fontFamily: 'Arial Normal',
fontStyle: 'normal',
fontSize: 20,
color: '#555555',
}
},
series: [
{
name: '今年',
symbol: 'none',
data: [1500, 2300, 2240, 2180, 1350, 1470, 2600, 1110, 1230, 1450, 1680, 2360],
type: 'line'
},
{
name: '去年',
symbol: 'none',
data: [1000, 1300, 2504, 3080, 1050, 1740, 2200, 2120, 1230, 1550, 1460, 1530],
type: 'line'
}
]
})在父組件中傳值
<div class="atlas flex">
<charts :option="lineOne" :id="createId()" />
</div>子組件通過difineprops接收父組件傳過來的值
<template> <div :id="id"></div> </template>
let { id, option } = defineProps({
option: Object,
id: String
})效果圖:
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue的computed計(jì)算屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要給大家介紹了關(guān)于vue中事件綁定的相關(guān)資料,事件綁定在Web開發(fā)中非常常見,我們經(jīng)常需要在頁面中為某個(gè)DOM元素綁定事件,如點(diǎn)擊、鼠標(biāo)移動(dòng)、鍵盤敲擊等等,需要的朋友可以參考下2023-09-09
Element基于el-input數(shù)字范圍輸入框的實(shí)現(xiàn)
本文主要介紹了?Element基于el-input數(shù)字范圍輸入框的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue-router項(xiàng)目實(shí)戰(zhàn)總結(jié)篇
vue-router 是 Vue.js 官方的路由庫.這篇文章主要介紹了vue-router項(xiàng)目實(shí)戰(zhàn)總結(jié),需要的朋友可以參考下2018-02-02
vue+ts封裝axios網(wǎng)絡(luò)請(qǐng)求封裝方式
文章介紹了如何使用Vue和TypeScript封裝Axios網(wǎng)絡(luò)請(qǐng)求,并提供了一個(gè)示例文件`request.ts`,展示了如何封裝各種請(qǐng)求,此外,還提到了路由管理文件和狀態(tài)碼處理文件的結(jié)構(gòu)2025-12-12
本文作者分享了使用Vue進(jìn)行代理配置的個(gè)人經(jīng)驗(yàn),介紹了如何使用proxyTable進(jìn)行跨域請(qǐng)求配置,并提供了具體的配置文件和使用方法,便于同行參考和學(xué)習(xí)2024-10-10
Vue3使用LogicFlow更新節(jié)點(diǎn)名稱的方法
本文介紹了在Vue3中更新LogicFlow節(jié)點(diǎn)名稱的多種方法,包括使用updateText和setProperties方法,以及事件監(jiān)聽與交互方式,還討論了自定義節(jié)點(diǎn)名稱編輯、批量更新與高級(jí)功能,并強(qiáng)調(diào)了注意事項(xiàng)與最佳實(shí)踐,需要的朋友可以參考下2026-01-01
這篇文章主要為大家介紹了樣式穿透vue中的scoped示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue中SPA單頁面應(yīng)用程序的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
vue 使用async寫數(shù)字動(dòng)態(tài)加載效果案例
這篇文章主要介紹了vue 使用async寫數(shù)字動(dòng)態(tài)加載效果案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07