feat: canvas 画布坐标显示

components/BarMixMap/BarMixMap.vue

 <template>
-	<view>
 	<uni-ec-canvas
 		class="uni-ec-canvas"
 		id="bar-mix-map"
 		ref="barMixMapCanvas"
 		canvas-id="bar-mix-map-chart"
 		:ec="ec"
-			:style="[elStyleObject]"
 	></uni-ec-canvas>
-	</view>
 </template>
 
 <script>

components/ChinaMap/ChinaMap.vue

 <template>
-	<view>
 	<uni-ec-canvas
 		class="uni-ec-canvas"
 		id="china-map"
 		ref="chinaMapCanvas"
 		canvas-id="china-map-chart"
 		:ec="ec"
-			:style="[elStyleObject]"
 	></uni-ec-canvas>
-	</view>
 </template>
 
 <script>

components/DashboardProgress/DashboardProgress.vue

 <template>
-	<view>
 	<uni-ec-canvas
 		class="uni-ec-canvas" 
 		id="dashboard-progress" 
 		ref="dashboardProgressCanvas"
 		canvas-id="dashboard-progress-chart" 
 		:ec="ec"
-		 :style="[elStyleObject]"
 	></uni-ec-canvas>
-	</view>
 </template>
 
 <script>

components/HorizontalBar/HorizontalBar.vue

 <template>
-	<view>
 	<uni-ec-canvas
 		class="uni-ec-canvas"
 		id="horizontal-bar"
 		ref="horizontalBarCanvas"
 		canvas-id="horizontal-bar-chart"
 		:ec="ec"
-			:style="[elStyleObject]"
 	></uni-ec-canvas>
-	</view>
 </template>
 
 <script>

components/LineMixBar/LineMixBar.vue

 <template>
-	<view>
 	<uni-ec-canvas
 		class="uni-ec-canvas"
 		id="line-mix-bar"
 		ref="lineMixBarCanvas"
 		canvas-id="line-mix-bar-chart"
 		:ec="ec"
-			:style="[elStyleObject]"
 	></uni-ec-canvas>
-	</view>
 </template>
 
 <script>

components/NormalBar/NormalBar.vue

 <template>
-	<view>
 	<uni-ec-canvas
 		class="uni-ec-canvas"
 		id="normal-bar"
 		ref="normalbarCanvas"
 		canvas-id="normal-bar-chart"
 		:ec="ec"
-			:style="[elStyleObject]"
 	></uni-ec-canvas>
-	</view>
 </template>
 
 <script>

components/NormalGauge/NormalGauge.vue

 <template>
-	<view>
 	<uni-ec-canvas
 		class="uni-ec-canvas"
 		id="normal-gauge"
 		ref="normalGaugeCanvas"
 		canvas-id="normal-gauge-chart"
 		:ec="ec"
-			:style="[elStyleObject]"
 	></uni-ec-canvas>
-	</view>
 </template>
 
 <script>

components/NormalLine/NormalLine.vue

 <template>
-	<view>
 	<uni-ec-canvas
 		class="uni-ec-canvas"
 		id="normal-line"
 		ref="normalLineCanvas"
 		canvas-id="normal-line-chart"
 		:ec="ec"
-			:style="[elStyleObject]"
 	></uni-ec-canvas>
-	</view>
 </template>
 
 <script>

components/NormalPie/NormalPie.vue

 <template>
-	<view>
 	<uni-ec-canvas
 		class="uni-ec-canvas"
 		id="normal-pie"
 		ref="normalPieCanvas"
 		canvas-id="normal-pie-chart"
 		:ec="ec"
-			:style="[elStyleObject]"
 	></uni-ec-canvas>
-	</view>
 </template>
 
 <script>

components/NormalProgress/NormalProgress.vue

@@ -9,7 +9,8 @@
 			:inactive-color="elementInfo.option.progress.trailColor"
 			:round="elementInfo.option.progress.strokeLinecap == 'round' ? true : false"
 			:percent="elementInfo.data.dataList.endVal"
-        :show-percent="elementInfo.option.progress.showInfo">
+			:show-percent="elementInfo.option.progress.showInfo"
+		>
 		</u-line-progress>
 		<u-circle-progress 
 			class="u-circle"
@@ -19,10 +20,11 @@
 			:active-color="elementInfo.option.progress.strokeColor"
 			:inactive-color="elementInfo.option.progress.trailColor"
 			:percent="elementInfo.data.dataList.endVal"
-        :bg-color="00000000">
+			:bg-color="00000000"
+		>
 			<view class="u-progress-text">{{elementInfo.data.dataList.endVal}}%</view>
 		</u-circle-progress>
-		<DashboardProgress v-if="elementInfo.option.progress.type === 'dashboard'" :elementInfo="elementInfo"></DashboardProgress>
+		<DashboardProgress style="height: 100%;" v-if="elementInfo.option.progress.type === 'dashboard'" :elementInfo="elementInfo"></DashboardProgress>
 	</view>
 </template>
 
@@ -45,6 +47,7 @@ export default {
 <style>
 	.container {
 		width: 100%;
+		height: 100%;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;

components/NormalRadar/NormalRadar.vue

 <template>
-	<view>
 	<uni-ec-canvas
 		class="uni-ec-canvas" 
 		id="normalra-dar" 
 		ref="normalRadarCanvas" 
 		canvas-id="normalra-dar-chart"
 		:ec="ec"
-			:style="[elStyleObject]"
 	></uni-ec-canvas>
-	</view>
 </template>
 
 <script>

mixins/echartElementData.js

@@ -11,16 +11,6 @@ export default {
 			required: true
 		}
   },
-	computed: {
-		elStyleObject() {
-			const { windowWidth } = uni.getSystemInfoSync()
-			const { width, height } = this.elementInfo
-			return {
-				'width': `${width > windowWidth ? '100%' : width + 'px'}`,
-				'height': `${width > windowWidth ? height / width * windowWidth : height}px`
-			}
-		}
-	},
   methods: {
 		/**
 		 * 静态数据

pages/index/index.vue

@@ -3,8 +3,22 @@
 		class="canvas"
 		:style="[styleObject]"
 	>
-		<view v-for="element in reportData" :key="item.id">
-			<template v-if="!element.hide">
+		<view class="viewport-wrapper" :style="{
+			width: `${reportInfo.width * scale}px`,
+			height: `${reportInfo.height * scale}px`
+		}">
+			<template v-for="(element, index) in reportData">
+				<view
+					class="view-element"
+					v-if="!element.hide"
+					:key="element.id"
+					:style="{
+						width: `${element.width * scale}px`,
+						height: `${element.height * scale}px`,
+						transform: `translate(${element.left * scale}px, ${element.top * scale}px)`,
+						zIndex: index + 1
+					}"
+				>
 					<!-- 普通柱状图 -->
 					<NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar>
 					<!-- 普通折线图 -->
@@ -41,6 +55,7 @@
 					<RemoteImage v-if="element.type == 'RemoteImage'" :elementInfo="element"></RemoteImage>
 					<!-- 普通表格 -->
 					<NormalTable v-if="element.type == 'NormalTable'" :elementInfo="element"></NormalTable>
+				</view>
 			</template>
 		</view>
   </view>
@@ -52,7 +67,7 @@
 			return {
 				reportInfo: {},
 				reportData: [],
-				timer: null
+				timename: null
 			}
 		},
 		computed: {
@@ -64,6 +79,11 @@
 					'background-color': backgroundColor,
 					...params
 				}
+			},
+			scale() {
+				const { windowWidth } = uni.getSystemInfoSync()
+				const { width, height } = this.reportInfo
+				return windowWidth / width
 			}
 		}, 
 		onLoad() {
@@ -89,7 +109,7 @@
 		onUnload() {
 			// 移除监听事件
 			uni.$off('handleLinkParams')
-			clearInterval(this.timer)
+			clearInterval(this.timename)
 		},
 		methods: {
 			//检查是否登录
@@ -127,14 +147,14 @@
 			 * 获取页面报表配置
 			 */
 			async getReportList() {
-				clearInterval(this.timer)
+				clearInterval(this.timename)
 				let res = await this.$u.api.getReportList({id: '61cd2ba1c06bffbdae442c4f'})
 				const { Status, Result: { info, list } } = res.data
 				if (Status === 'true') {
 					if(info.dataUrl) {
 						this.getGlobalData(info)
 						if(info.dataPollingInterval) {
-							this.timer = setInterval(() => {
+							this.timename = setInterval(() => {
 								this.getGlobalData(info)
 							}, parseInt(info.dataPollingInterval) * 1000)
 						}
@@ -186,11 +206,23 @@
 .canvas {
 	position: relative;
 	height: 100%;
-	padding: 20rpx;
 	user-select: none;
 	overflow: auto;
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: center;
 }
+.viewport-wrapper {
+	position: relative;
+}
+.view-element {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	will-change: transform;
+	user-select: none;
+	cursor: move;
+}
 </style>

static/style/common.scss

@@ -24,7 +24,6 @@
 
 .uni-ec-canvas{
 	width: 100%;
-	height: 750rpx;
+	height: 100%;
 	display:block;
-	margin: 20rpx auto;
 }
\ No newline at end of file