完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問(wèn)題
看代碼吧~
<div class="echarts">
<IEcharts :option="bar" ref="echarts"></IEcharts>
</div>
mounted () {
this.selfAdaption ()
},
methods: {
//echarts自適應(yīng)
selfAdaption () {
const self = this;
setTimeout(() => {
window.onresize = function () {
self.$refs.echarts.resize()
}
}, 10)
}
}
上面這段代碼在出現(xiàn)多個(gè)echarts圖表時(shí)只有一個(gè)圖表自適應(yīng),修改了一下
<div class="echarts">
<IEcharts :option="bar" ref="echarts"></IEcharts>
</div>
mounted () {
this.selfAdaption ();
},
methods: {
//echarts自適應(yīng)
selfAdaption () {
let _this = this;
setTimeout(() => {
window.addEventListener('resize', function () {
_this.$refs.echarts.resize();
})
}, 10)
}
}
------------------------------------------------------------------------------------------------------------------------------------
在vue中引入多個(gè)echart圖表時(shí)
<div class="linebox">
<div :id="id" style="width:100%; height:100%;" ref="Echart"></div>
</div>
methods: {
init(){
const self = this;//因?yàn)榧^函數(shù)會(huì)改變this指向,指向windows。所以先把this保存
setTimeout(() => {
window.addEventListener('resize', function() {
self.chart = self.$echarts.init(self.$refs.Echart);
self.chart.resize();
})
},10)
}
}
補(bǔ)充知識(shí):vue項(xiàng)目在同一頁(yè)面中引入多個(gè)echarts圖表 ,并實(shí)現(xiàn)封裝,自適應(yīng)和動(dòng)態(tài)數(shù)據(jù)改變
vue-Echarts
公司最近做項(xiàng)目需要用到圖表,以前是使用echarts,現(xiàn)在也是用這個(gè),沒(méi)什么好糾結(jié)的! 但是最近發(fā)現(xiàn)以前每次做圖表之類(lèi)的都沒(méi)有封裝,每次做圖表都要從新去配置之類(lèi)的,寫(xiě)了好多重復(fù)代碼,感覺(jué)很累啊,所以自己把圖表封裝成子組件使用,代碼工作量減輕了很多,而且子組件使用了數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)和圖表自適應(yīng)屏幕大小,這樣以后會(huì)方便很多了!
當(dāng)然公司的項(xiàng)目肯定不能發(fā)出來(lái)了,我會(huì)做個(gè)簡(jiǎn)單的demo出來(lái)
先截個(gè)圖吧!

其實(shí)我也未作什么太復(fù)雜的工作,以前工作中,頁(yè)面中要2個(gè)圖表,我在methods:{}中寫(xiě)兩個(gè)方法配置之類(lèi)的,類(lèi)似這樣子:

好了,首先第一步,使用echarts當(dāng)然要引用了
1. vue 項(xiàng)目中 引用echarts
cnpm install echarts -S
執(zhí)行完畢后再 main.js中引入

因?yàn)槭莗c端的項(xiàng)目,用了element ui (不重要),引入之后就可以在全局使用了,之前對(duì)這個(gè)不是很懂,每個(gè)要圖表頁(yè)面都引入echarts,就像這個(gè)樣子:

使代碼寫(xiě)的亂七八糟的,現(xiàn)在在全局引用了,就不需要在每個(gè)用圖表的頁(yè)面中引入了
2. 父子組件中使用圖表,現(xiàn)在我做的這個(gè)頁(yè)面把他分成兩個(gè)部分,這個(gè)頁(yè)面整體為父,兩個(gè)圖表為子組件,這樣子

1.先看下父組件代碼,樣式類(lèi)的請(qǐng)忽視

import linegraph from '@/components/linegraph.vue'
export default {
data(){
return{
notAccess:false,
ChartLineGraph2:null,
option:{
title: {
text: '全年產(chǎn)量趨勢(shì)圖',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/> : {c}'
},
legend: {
left: 'center',
data: ['本年', '上年'],
bottom:0
},
xAxis: {
type: 'category',
name: 'x',
splitLine: {show: false},
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
grid: {
left: '1%',
right: '2%',
bottom: '8%',
containLabel: true
},
yAxis: {
type: 'category',
name: 'y',
splitLine: {show: true},
data:['10%','20%','30%','40%','50%','60%','70%','80%','90%','100%']
},
series: [
{
name: '本年',
type: 'line',
data: [0.8, 0.98, 0.96, 0.27, 0.81, 0.47, 0.74, 0.23, .69, 0.25, 0.36, 0.56]
},
{
name: '上年',
type: 'line',
data: [1, 0.2, 0.4, 0.8, 0.16, 0.32, 0.64, 1.28, 5.6, 0.25, 0.63, 0.65, 0.12]
},
]
},
option2:{
title: {
text: '全年設(shè)備產(chǎn)量對(duì)比圖',
left: 'center'
},
xAxis: {
type: 'category',
data: ['檢品機(jī)1', '檢品機(jī)2', '檢品機(jī)3', '檢品機(jī)4', '檢品機(jī)5', '檢品機(jī)6', '檢品機(jī)7']
},
yAxis: {
type: 'value'
},
legend: {
left: 'center',
data: ['本年', '上年'],
bottom:0
},
grid: {
left: '1%',
right: '2%',
bottom: '8%',
containLabel: true
},
series: [
{
name: '本年',
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth:30,
},
{
name: '上年',
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth:30,
}]
}
}
},
mounted(){
},
components:{
ErrorTip,
linegraph,
}
}
這是父組件代碼,兩個(gè)圖表不管是折線(xiàn)圖還是柱狀圖都是使用 linegraph.vue這個(gè)子組件來(lái)進(jìn)行的,因?yàn)槲野裡charts圖表生成的配置項(xiàng)都放在了父組件里面,然后通過(guò)父組件給子組件傳值實(shí)現(xiàn)圖表生成,
3.父組件我們看完了,現(xiàn)在我們看下是如何封裝的圖表類(lèi)linegraph.vue子組件,我先截圖一下,然后解釋?zhuān)?/strong>

這里需要注意一下這幾個(gè)問(wèn)題,
第一個(gè): 父子組件傳值問(wèn)題 ,父組件需要傳id值和配置項(xiàng)的值給子組件生成圖表,通過(guò)vue的prop傳過(guò)來(lái)的id和data(配置項(xiàng)) ,具體怎么傳值可看父子組件傳值代碼或百度;
第二點(diǎn): 我們首先設(shè)想這樣一個(gè)場(chǎng)景: 當(dāng)父組件的傳值 option或者option2 (圖表配置項(xiàng)),剛開(kāi)始在data()里面是設(shè)置為option:null,或者是一個(gè)空的對(duì)象,或者配置項(xiàng)缺少數(shù)據(jù)這部分,在methods中通過(guò)ajax調(diào)用接口獲取到數(shù)據(jù)然后賦值給option,例如:this.option = 一個(gè)對(duì)象,可以成圖表之類(lèi)的,當(dāng)option值未改變時(shí)就把option=null的值傳遞給了子組件,這樣圖表生成不了,像這樣


數(shù)據(jù)不能動(dòng)態(tài)傳值 ,數(shù)據(jù)不能動(dòng)態(tài)傳值! 要解決這個(gè)問(wèn)題,必須用到vue watch的對(duì)象深度監(jiān)聽(tīng),我之前寫(xiě)了一篇watch,正好用上了

對(duì)子組件接受到的data(配置項(xiàng))進(jìn)行深度監(jiān)聽(tīng),當(dāng)父組件通過(guò)ajax改變了傳過(guò)來(lái)的data的值,圖表將會(huì)重新渲染。
3.第三個(gè)問(wèn)題
圖表自適應(yīng),當(dāng)屏幕大小改變時(shí),圖表也需要進(jìn)行自適應(yīng),本來(lái)挺簡(jiǎn)單的東西,被我頭腦轉(zhuǎn)不過(guò)來(lái),搞了一個(gè)小時(shí),總算搞好了啊,其實(shí)之前寫(xiě)的就是在 子組件的 drawLineGraph()方法里面寫(xiě)入一個(gè)方法,這個(gè)方法
window.onresize =this.ChartLineGraph.resize;
還是出問(wèn)題了,這個(gè)頁(yè)面兩個(gè)圖表,結(jié)果只有后面的圖表會(huì)自適應(yīng),前面的那個(gè)沒(méi)反應(yīng)???,我就蒙了,還以為自己方法寫(xiě)錯(cuò)了,真是蛋疼, 改成這樣,那個(gè)this一定要注意,我就是搞錯(cuò)對(duì)象了,然后兩個(gè)圖表都可以自適應(yīng)

好吧,這是我封裝的echarts組件,沒(méi)有進(jìn)行ajax的對(duì)接操作,如果有問(wèn)題,歡迎留言!
以上這篇完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- vue使用echarts圖表自適應(yīng)的幾種解決方案
- vue中echarts3.0自適應(yīng)的方法
- vue?echarts實(shí)現(xiàn)改變canvas長(zhǎng)和寬自適應(yīng)
- Vue中使用Echarts可視化圖表寬度自適應(yīng)的完美解決方案
- Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐
- vue中的echarts實(shí)現(xiàn)寬度自適應(yīng)的解決方案
- vue中設(shè)置echarts寬度自適應(yīng)的代碼步驟
- Vue-cli3中如何引入ECharts并實(shí)現(xiàn)自適應(yīng)
- vue項(xiàng)目中echarts自適應(yīng)問(wèn)題的高級(jí)解決過(guò)程
相關(guān)文章
vue一個(gè)頁(yè)面實(shí)現(xiàn)音樂(lè)播放器的示例
這篇文章主要介紹了vue一個(gè)頁(yè)面實(shí)現(xiàn)音樂(lè)播放器的示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能實(shí)現(xiàn)
這篇文章主要介紹了vue動(dòng)態(tài)添加表單validateField驗(yàn)證功能實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04

