微信小程序使用ucharts在小程序中加入橫屏展示功能的全過程

更新時間：2022年09月26日 09:42:35 作者：莫諾庫諾

這篇文章主要給大家介紹了關于微信小程序使用ucharts在小程序中加入橫屏展示功能的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用微信小程序具有一定的參考學習價值,需要的朋友可以參考下

前言

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

本文只貼出了部分關鍵實現代碼而非全部代碼，僅提供思路和實現參考。

實現思路

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

opts: {
  rotate: true,
}

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

實現步驟

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

用一個iconfont圖標作為一個按鈕顯示：

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

設置一下按鈕的樣式，放在一個合適的位置：

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

2. 準備一個容器

準備的容器應該覆蓋在其它所有組件（除了頂部導航）之上，可以自己寫一個容器，或者使用第三方組件達成目的。

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

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

代碼如下：

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

關鍵代碼釋義

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

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

@click="closeRotateMode"用來關閉遮罩層，并將數據清空，顯示底部導航欄：

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

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

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

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

結果如下：

橫屏模式容器

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
	// 設置1s延時，避免渲染出錯
	setTimeout(() => {
		this.chartsData_rotate = JSON.parse(JSON.stringify(this.chartsData))
	}, 1000)
	// 隱藏底部導航
	uni.hideTabBar()
},

關鍵代碼釋義

this.chartsData_rotate = JSON.parse(JSON.stringify(this.chartsData))這段代碼是用來深拷貝原圖表數據的，因為如果橫屏的圖表使用和原來的圖表同樣的數據的話，會和原圖表數據互相干擾。

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

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

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

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

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

最終效果如下：

最終效果