解決echart在vue中id重復(fù)問題
echart在vue中id重復(fù)問題
封裝的echarts組件重復(fù)調(diào)用時(shí)，id重復(fù)會(huì)導(dǎo)致頁(yè)面不渲染，數(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ā)，用得最多的三方組件庫(kù)Echarts，在進(jìn)行封裝后復(fù)用許多同學(xué)會(huì)發(fā)現(xiàn)頁(yè)面渲染異常問題，只會(huì)渲染第一次復(fù)用的內(nèi)容.究其原因在于我們通過Id獲取了頁(yè)面節(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'
接下來(lái)解決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接收父組件傳過來(lái)的值
<template> <div :id="id"></div> </template>
let { id, option } = defineProps({
option: Object,
id: String
})效果圖:
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue+drf+第三方滑動(dòng)驗(yàn)證碼接入的實(shí)現(xiàn)
這篇文章要給大家介紹的是vue和drf以及第三方滑動(dòng)驗(yàn)證碼接入的實(shí)現(xiàn)，下文小編講詳細(xì)講解該內(nèi)容，感興趣的小伙伴可以和小編一起來(lái)學(xué)習(xí)奧2021-10-10
vue+elementUI-el-table實(shí)現(xiàn)動(dòng)態(tài)顯示隱藏列方式
這篇文章主要介紹了vue+elementUI-el-table實(shí)現(xiàn)動(dòng)態(tài)顯示隱藏列方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue-cli創(chuàng)建項(xiàng)目從單頁(yè)面到多頁(yè)面的方法
本篇文章主要介紹了Vue-cli創(chuàng)建項(xiàng)目從單頁(yè)面到多頁(yè)面的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-09-09
Vue使用axios發(fā)送請(qǐng)求并實(shí)現(xiàn)簡(jiǎn)單封裝的示例詳解
這篇文章主要介紹了Vue使用axios發(fā)送請(qǐng)求并實(shí)現(xiàn)簡(jiǎn)單封裝,主要包括安裝axios及簡(jiǎn)單使用配置方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
Vue 中自定義文件上傳組件的實(shí)現(xiàn)代碼
在Vue項(xiàng)目中,自定義文件上傳組件能夠提升用戶交互體驗(yàn)和界面控制,樣式可根據(jù)需求定制,在其他組件中引用時(shí),可以進(jìn)一步擴(kuò)展功能,如文件類型限制和上傳進(jìn)度條,本文給大家介紹Vue 中自定義文件上傳組件的實(shí)現(xiàn)代碼,感興趣的朋友跟隨小編一起看看吧2024-11-11
Vue實(shí)現(xiàn)一個(gè)返回頂部backToTop組件
本篇文章主要介紹了Vue實(shí)現(xiàn)一個(gè)返回頂部backToTop組件，可以實(shí)現(xiàn)回到頂部效果，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了vue中keep-alive，include的緩存問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了Vue Element-ui 鍵盤事件失效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue仿支付寶支付功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
vue3中el-table實(shí)現(xiàn)表格合計(jì)行的示例代碼
這篇文章主要介紹了vue3中el-table實(shí)現(xiàn)表格合計(jì)行,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01