解決echart在vue中id重復問題
更新時間：2024年03月12日 08:47:07 作者：一碼哥
這篇文章主要介紹了解決echart在vue中id重復問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
echart在vue中id重復問題
封裝的echarts組件重復調用時，id重復會導致頁面不渲染，數(shù)據(jù)覆蓋等一系列問題
解決方法
用ref解決了問題
解決方法：
//修改前 <div id="echart"></div> //修改后 <div ref="echart"></div>
初始化調用時，document.getElementById(‘xxx’) 改成 this.$refs.xxx
//修改前
var myChart = this.$echarts.init(document.getElementById('echart'));
//修改后
var myChart = this.$echarts.init(this.$refs.echart);組件調用
//1 <echart :data="myData"></echart > //2再次調用 <echart :data="myData"></echart >
Echarts圖表復用解決id唯一性
目前市面上許多項目都會接觸到可視化大屏的開發(fā)，用得最多的三方組件庫Echarts，在進行封裝后復用許多同學會發(fā)現(xiàn)頁面渲染異常問題，只會渲染第一次復用的內容.究其原因在于我們通過Id獲取了頁面節(jié)點進行渲染造成了id的重復.
網(wǎng)上也有許多的解決方案.在此，給大家分享一個自己測試后的可行的實施方案.我們可以通過uuid生成不同的id向子組件傳值指定唯一性，也可以通過隨機數(shù)的方式.
具體的操作我們接著往下看.
首先我們需要將需要復用的組件進行簡單的封裝. 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>然后在需要使用的組件中父組件()引入對應的組件.expControl.vue
import charts from '../../../components/copycompnents/commonEcharts.vue'
接下來解決id復用的問題,新建一個js或ts文件,對方法進行封裝并導出引入.
新建createID.js文件
export function createId(){
return 'id' +Math.random()
}引入js文件
import { createId } from '../../../api/createId'在父組件中傳入配置項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
})效果圖:
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章要給大家介紹的是vue和drf以及第三方滑動驗證碼接入的實現(xiàn)，下文小編講詳細講解該內容，感興趣的小伙伴可以和小編一起來學習奧2021-10-10
vue+elementUI-el-table實現(xiàn)動態(tài)顯示隱藏列方式
這篇文章主要介紹了vue+elementUI-el-table實現(xiàn)動態(tài)顯示隱藏列方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue-cli創(chuàng)建項目從單頁面到多頁面的方法
本篇文章主要介紹了Vue-cli創(chuàng)建項目從單頁面到多頁面的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue使用axios發(fā)送請求并實現(xiàn)簡單封裝的示例詳解
這篇文章主要介紹了Vue使用axios發(fā)送請求并實現(xiàn)簡單封裝,主要包括安裝axios及簡單使用配置方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
在Vue項目中,自定義文件上傳組件能夠提升用戶交互體驗和界面控制,樣式可根據(jù)需求定制,在其他組件中引用時,可以進一步擴展功能,如文件類型限制和上傳進度條,本文給大家介紹Vue 中自定義文件上傳組件的實現(xiàn)代碼,感興趣的朋友跟隨小編一起看看吧2024-11-11
本篇文章主要介紹了Vue實現(xiàn)一個返回頂部backToTop組件，可以實現(xiàn)回到頂部效果，具有一定的參考價值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了vue中keep-alive，include的緩存問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了Vue Element-ui 鍵盤事件失效的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue仿支付寶支付功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
vue3中el-table實現(xiàn)表格合計行的示例代碼
這篇文章主要介紹了vue3中el-table實現(xiàn)表格合計行,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01