前言

由于手機(jī)屏幕寬度的限制，當(dāng)數(shù)據(jù)量較大時(shí)，觀看體驗(yàn)并不是很好，因此橫屏展示的功能就顯得必要了，還好ucharts官方提供了橫屏展示的功能，可以免去自己手改的麻煩，不過在實(shí)現(xiàn)的時(shí)候還是需要注意一些地方。

本文只貼出了部分關(guān)鍵實(shí)現(xiàn)代碼而非全部代碼，僅提供思路和實(shí)現(xiàn)參考。

實(shí)現(xiàn)思路

開啟橫屏顯示的配置如下：

opts: {
  rotate: true,
}

現(xiàn)在只需要在頁面中提供一個(gè)按鈕作為入口，動(dòng)態(tài)改變opts.rotate的值，然后提供一個(gè)用來橫屏展示的容器就可以了。

實(shí)現(xiàn)步驟

1. 添加一個(gè)按鈕用來開啟橫屏模式

用一個(gè)iconfont圖標(biāo)作為一個(gè)按鈕顯示：

<view class="rotate-mode-btn iconfont icon-a-appenlarge" @click="rotateMode"></view>

設(shè)置一下按鈕的樣式，放在一個(gè)合適的位置：

.icon-a-appenlarge {
	position: absolute;
	right: -20rpx;
	bottom: 200rpx;
	background: transparent;
	color: #a7c2fa;
}

2. 準(zhǔn)備一個(gè)容器

準(zhǔn)備的容器應(yīng)該覆蓋在其它所有組件（除了頂部導(dǎo)航）之上，可以自己寫一個(gè)容器，或者使用第三方組件達(dá)成目的。

在這里我使用了uView組件庫的遮罩層作為容器：uView-Vue3.0版

最后，為了能夠退出橫屏模式，在橫屏狀態(tài)下的右上角添加一個(gè)退出按鈕。

代碼如下：

<u-mask :show="isShowRotate">
	<view :class="maskClass">
	<view class="iconfont icon-close" @click="closeRotateMode"></view>
</u-mask>

關(guān)鍵代碼釋義

:show="isShowRotate"是顯示和隱藏遮罩層的屬性。通過第一步中綁定的方法rotateMode實(shí)現(xiàn)，代碼如下：

// 開啟橫屏模式
rotateMode() {
	this.isShowRotate = true
	// 隱藏底部導(dǎo)航
	uni.hideTabBar()	
},

@click="closeRotateMode"用來關(guān)閉遮罩層，并將數(shù)據(jù)清空，顯示底部導(dǎo)航欄：

closeRotateMode() {
	this.isShowRotate = false
	this.chartsData_rotate = {}
	uni.showTabBar()
}

<view :class="maskClass">"：maskClass是一個(gè)計(jì)算屬性，用來顯示/隱藏容器，相關(guān)scss如下，僅供參考。

.mask-wrapper {
	width: 95%;
	height: 0;
	position: absolute;
	left: 8px;
	bottom: 20px;

	&.show {
		height: calc(100% - 120px);
	}
}

結(jié)果如下：

3.將圖表放入容器中

<view class="tabel-charts-rotate">
	<u-mask :show="isShowRotate">
		<view :class="maskClass">
			<qiun-data-charts :type="chartsShowType" :chartData="chartsData_rotate" :opts="opts_rotate"
				:ontouch="true" :onzoom="true" :canvas2d="Boolean($config.data.canvas2d)"
				:canvasId="canvasId_rotate" tooltipFormat="formatTooltipData" :reshow="isShowRotate"
				:inScrollView="true" />
		</view>
		<view class="iconfont icon-close" @click="closeRotateMode"></view>
	</u-mask>
</view>

rotateMode() {
	this.isShowRotate = true
	// 設(shè)置1s延時(shí)，避免渲染出錯(cuò)
	setTimeout(() => {
		this.chartsData_rotate = JSON.parse(JSON.stringify(this.chartsData))
	}, 1000)
	// 隱藏底部導(dǎo)航
	uni.hideTabBar()
},

關(guān)鍵代碼釋義

this.chartsData_rotate = JSON.parse(JSON.stringify(this.chartsData))這段代碼是用來深拷貝原圖表數(shù)據(jù)的，因?yàn)槿绻麢M屏的圖表使用和原來的圖表同樣的數(shù)據(jù)的話，會(huì)和原圖表數(shù)據(jù)互相干擾。

<qiun-data-charts>是ucharts組件，其中的屬性由自己的需求決定，這里進(jìn)行部分說明。

:type="chartsShowType"：動(dòng)態(tài)改變圖表類型。

tooltipFormat="formatTooltipData"：提示框格式化方法。

:inScrollView="true"：圖表組件外部包裹了一個(gè)<scroll-view>組件，需要將該屬性設(shè)為true，否則會(huì)出現(xiàn)提示框定位問題。

:reshow="isShowRotate"：觸發(fā)圖表重繪。

最終效果如下：

總結(jié) 

到此這篇關(guān)于微信小程序使用ucharts在小程序中加入橫屏展示功能的全過程的文章就介紹到這了,更多相關(guān)ucharts在小程序加入橫屏展示內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論