uniapp 秋云ucharts 当前页面图表横屏全屏展示组件

段wl

已于 2024-01-27 11:07:09 修改

阅读量696

点赞数 2

文章标签： uni-app javascript 前端

于 2024-01-27 10:47:56 首次发布

本文链接：https://blog.csdn.net/sdgjah2/article/details/135879708

版权

再给组件传参时修改的参数正常的ucharts所需参数需要修改及要携带的其他参数

//父组件
amplifyChartType.value = 'line' //图表类型
opts.value = JSON.parse(JSON.stringify(wOpts.value))//图表配置参数
amplifyChartData.value = JSON.parse(JSON.stringify(wChartData.value))//图表数据
opts.value.enableScroll = false//是否允许滑动
opts.value.rotate = true//横向展示
opts.value.dataLabel = false//图表中的默认数据
opts.value.legend.float = 'left'//修改图例位置
opts.value.legend.position = 'top'//修改图例位置
			
uni.hideTabBar() //隐藏底部栏
amplifyShow.value = true//控制图表是否显示

//组件
<template>
	<!-- 统计图横向全屏展示 -->
	<view v-if="show" @touchmove.stop.prevent="moveHandle" class="full_screen">
		<view class="full_screen_charts">
			<qiun-data-charts :type="type" :opts="opts" :ontouch="true" :chartData="chartData" />
			<view class="menu_box">
				<view>
					<image v-if="opts.dataLabel" @click="eyeShow(false)" class="eye_icon" src="https:/agent/icon/eye_icon.png" mode=""></image>
					<image v-else  @click="eyeShow(true)" class="eye_icon" src="https:/icon/eye_false_icon.png" mode=""></image>
				</view>
				<image class="reduce_icon" @click="cancel" src="https://agent/icon/reduce_icon.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 当前组件主要作用于横向全屏展示
	// 传入前就修改传入给ucharts参数  在opts对象中
	// dataLabel: false,//图表中默认数据展示
	// dataPointShape: false,//图表默认数据下方小点
	// enableScroll: true,//是否允许滑动 不允许一屏展示全部
	// rotate:true,//横屏展示
	/**
	 * @show 控制组件是否显示
	 * @opts  ucharts 插件所需参数
	 * @chartData  ucharts 插件所需参数
	 * @type  图表所显示的图类型
	 * 
	 * @cancel  关闭组件
	 * 
	**/
	
	import { ref, defineProps, defineEmits } from 'vue'
	import {
		moveHandle
	} from '../../plugins/plugins.js'
	const props = defineProps(['show', 'opts', 'chartData', 'type'])
	const emit = defineEmits(['cancel'])
	
	const cancel = () =>{
		emit('cancel')
	}
	
	const eyeShow = (type) =>{
		props.opts.dataLabel = type
	}
	
	
</script>

<style scoped>
	.full_screen{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		/* background-color: #fff; */
		background-color: rgba(0,0,0,.3);
		
	}
	
	.full_screen_charts{
		width: 100%;
		height:100%;
		background-color: #fff;
		/* transform: rotate(90deg); */
		box-sizing: border-box;
		padding: 30rpx;
	}
	
	.menu_box{
		position: absolute;
		right: 20rpx;
		bottom: 60rpx;
		transform: rotate(90deg);
		display: flex;
		align-items: center;
	}
	.rotate{
		transform: rotate(90deg);
	}
	
	.reduce_icon{
		width: 30rpx;
		height: 30rpx;
	}
	
	.eye_icon{
		width: 40rpx;
		height: 26rpx;
		margin-right: 20rpx;
	}
	
</style>