feat: 横向柱状图点击弹框

components/ModelData/ModelData.vue

+<template>
+  <u-modal
+    class="model-data"
+    v-model="popupShow"
+    :closeOnClickOverlay="true"
+    title="明细"
+    @close="close"
+    @confirm="close"
+  >
+    <view class="slot-content">
+      <view v-for="(val, key) in popupData" class="data-view">
+        <view class="data-key ellipsis">{{ key }}</view>
+        <view class="data-val ellipsis">{{ val }}</view>
+      </view>
+    </view>
+  </u-modal>
+</template>
+
+<script>
+export default {
+  name: 'ModelData',
+  data() {
+    return {}
+  },
+  props: {
+    popupData: {
+      type: Object,
+      default: () => {}
+    },
+    popupShow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    close() {
+      console.log(1)
+      uni.$emit('showBarDetail', {
+        popupShow: false,
+        popupData: {}
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.model-data {
+  position: relative;
+  z-index: 9999999;
+}
+.slot-content {
+  margin: 10px;
+  font-size: 12px;
+  border: 1px solid #eee;
+  border-radius: 5px;
+}
+.data-view {
+  display: flex;
+  align-self: center;
+  border-bottom: 1px solid #eee;
+  padding: 5px;
+}
+.data-key {
+  min-width: 28%;
+  margin-right: 10px;
+  border-right: 1px solid #eee;
+}
+</style>

pages/index/index.vue

@@ -15,7 +15,7 @@
 					height: `${element.type == 'HorizontalBar' && horizontalBarHeight ? horizontalBarHeight : parseInt(element.height * scale)}px`,
 					left: `${parseInt(element.left * scale)}px`,
 					top: `${parseInt(element.top * scale)}px`,
-					zIndex: `${element.type == 'NormalTabs' || element.type == 'DateTimePicker' ? 999999 : index + 1}`
+					zIndex: `${element.type == 'NormalTabs' || element.type == 'DateTimePicker' ? 9999 : index + 1}`
 				}"
 			>
 				<!-- 普通柱状图 -->
@@ -59,6 +59,12 @@
 				<!-- <Table v-if="element.type == 'NormalTable'" :elementInfo="element"></Table> -->
 			</view>
 		</template>
+
+		<ModelData
+			style="position: relative;z-index: 99999;"
+			:popupShow="popupShow" 
+			:popupData="popupData"
+		></ModelData>
 	</view>
 </template>
 
@@ -70,7 +76,9 @@
 				timename: null,
 				pageScrollTop: 0,
 				stickyTables: [],   // 设置了吸顶的table
-				horizontalBarHeight: 0
+				horizontalBarHeight: 0,
+				popupShow: false,
+				popupData: {}
 			}
 		},
 		computed: {
@@ -145,6 +153,11 @@
 			uni.$on('handleUpdateHeight', (height) => {
 				that.horizontalBarHeight = height
 			})
+			uni.$on('showBarDetail', data => {
+				const { popupShow, popupData } = data
+				that.popupShow = popupShow
+				that.popupData = popupData
+			})
 		},
 		onHide() {
 			// 移除监听事件

static/style/common.scss

@@ -26,4 +26,10 @@
 	width: 100%;
 	height: 100%;
 	display:block;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
\ No newline at end of file