feat: 横向柱状图点击弹框

components/HorizontalBar/HorizontalBar.vue

 <template>
-	<uni-ec-canvas class="uni-ec-canvas" id="horizontal-bar" ref="horizontalBarCanvas" canvas-id="horizontal-bar-chart"
-		:ec="ec"></uni-ec-canvas>
+  <uni-ec-canvas
+    class="uni-ec-canvas"
+    id="horizontal-bar"
+    ref="horizontalBarCanvas"
+    canvas-id="horizontal-bar-chart"
+    :ec="ec"
+  ></uni-ec-canvas>
 </template>
 
 <script>
-	import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
-	import echartElementData from '@/mixins/echartElementData.js'
-	import {
-		DATAZOOM_DEFAULT
-	} from '@/mixins/zoomConfig.js'
-	let chart = null
-	let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
+import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
+import echartElementData from '@/mixins/echartElementData.js'
+import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
+let chart = null
+let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
 
-	export default {
-		name: "HorizontalBar",
+export default {
+  name: 'HorizontalBar',
   mixins: [echartElementData],
   data() {
     return {
@@ -22,7 +25,7 @@
         option: {}
       },
       labelShow: false, // 记录当前设置的label.show的值
-				index: 0, // 记录dataZoom切换当前的下标
+      index: 0 // 记录dataZoom切换当前的下标
     }
   },
   components: {
@@ -43,10 +46,7 @@
       })
       canvas.setChart(chart)
       const {
-					dataList: {
-						categories,
-						series,
-					}
+        dataList: { categories, series }
       } = this.elementData
       const that = this
       that.ec.option = {
@@ -56,22 +56,27 @@
           data: categories
         },
         tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
-					dataZoom: that.elementInfo.dataZoom && that.elementInfo.dataZoom.show ? [{
+        dataZoom:
+          that.elementInfo.dataZoom && that.elementInfo.dataZoom.show
+            ? [
+                {
                   ...that.elementInfo.dataZoom,
                   ...DATAZOOM_DEFAULT
-					}] : [{
+                }
+              ]
+            : [
+                {
                   show: false
-					}],
+                }
+              ],
         series: that.dealSeriesData(series)
       }
       chart.setOption(that.ec.option)
       chart.on('click', event => {
-					const {
-						preview,
-						images
-					} = that.elementData.dataList
+        const { preview, images, popup, data } = that.elementData.dataList
         var urls = []
         var caches = uni.getStorageSync('cacheImages')
+        images &&
           images.forEach(url => {
             if (caches.hasOwnProperty(url)) {
               urls.push(caches[url])
@@ -85,6 +90,11 @@
             current: event.dataIndex,
             urls: urls
           })
+        } else if (popup) {
+          uni.$emit('showBarDetail', {
+            popupShow: true,
+            popupData: data[event.dataIndex]
+          })
         } else {
           that.handleEchartsClick(event)
         }
@@ -100,19 +110,22 @@
     initChart() {
       // 等待子组件完全挂载完成---chart初始化完成
       this.$nextTick().then(() => {
-					const {
-						categories,
-						series,
-						preview,
-						images
-					} = this.elementData.dataList
+        const { categories, series, preview, images } =
+          this.elementData.dataList
         if (this.labelShow) {
           // 处理初始状态时，数值显示的数量是否超过了配置的最大值
           let count = categories.length
           if (this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) {
-							count = count * (this.elementInfo.dataZoom.end - this.elementInfo.dataZoom.start) / 100
-						}
-						if (this.elementInfo.option.dataset.maxCount != null && count > this.elementInfo.option.dataset.maxCount) {
+            count =
+              (count *
+                (this.elementInfo.dataZoom.end -
+                  this.elementInfo.dataZoom.start)) /
+              100
+          }
+          if (
+            this.elementInfo.option.dataset.maxCount != null &&
+            count > this.elementInfo.option.dataset.maxCount
+          ) {
             this.elementInfo.option.dataset.show = false
           }
           lastCount = count
@@ -121,20 +134,30 @@
         const dealSeries = this.dealSeriesData(series)
         this.$set(this.ec.option, 'yAxis.data', categories)
         this.$set(this.ec.option, 'series', dealSeries)
-					this.$set(this.ec.option, 'dataZoom', this.elementInfo.dataZoom && this.elementInfo.dataZoom
-						.show ? [{
+        this.$set(
+          this.ec.option,
+          'dataZoom',
+          this.elementInfo.dataZoom && this.elementInfo.dataZoom.show
+            ? [
+                {
                   ...this.elementInfo.dataZoom,
                   ...DATAZOOM_DEFAULT
-						}] : [{
+                }
+              ]
+            : [
+                {
                   show: false
-						}])
+                }
+              ]
+        )
         if (chart) {
           const option = chart.getOption()
           option.series = dealSeries
           // 重新setOption，使得设置的formatter生效
           chart.setOption(option)
           if (Number(dealSeries[0].barWidth)) {
-							const height = categories.length * (Number(dealSeries[0].barWidth) + 5) + 25
+            const height =
+              categories.length * (Number(dealSeries[0].barWidth) + 5) + 25
             uni.$emit('handleUpdateHeight', height)
             chart.resize({
               width: chart.getWidth(),
@@ -158,15 +181,15 @@
       if (tooltip.formatter && tooltip.formatter.length) {
         return {
           ...tooltip,
-						formatter: (val) => {
+          formatter: val => {
             return this.$u.common.converFunction(tooltip.formatter, val)
           },
-						trigger: "axis"
+          trigger: 'axis'
         }
       }
       return {
         ...tooltip,
-					trigger: "axis"
+        trigger: 'axis'
       }
     },
     /**
@@ -182,8 +205,10 @@
           label: {
             ...that.elementInfo.option.dataset,
             formatter: val => {
-								return that.$u.common.converFunction(that.elementInfo.option.dataset
-									.formatter, val)
+              return that.$u.common.converFunction(
+                that.elementInfo.option.dataset.formatter,
+                val
+              )
             }
           }
         }
@@ -207,7 +232,7 @@
         if (!caches.hasOwnProperty(url)) {
           uni.downloadFile({
             url: url,
-							success: (res) => {
+            success: res => {
               if (res.statusCode === 200) {
                 caches[url] = res.tempFilePath
                 uni.setStorageSync('cacheImages', caches)
@@ -222,10 +247,19 @@
      * event： 包含dataZoom的start和end
      */
     handleDataZoomEvent(event) {
-				var count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
+      var count =
+        (this.elementData.dataList.categories.length *
+          (event.end - event.start)) /
+        100
       // 给小程序里面赋值datas，如果存在且不为空，代表可以左右滑动切换
-				if (this.elementData.dataList.datas && this.elementData.dataList.datas.length) {
-					count = this.elementData.dataList.datas[this.index].categories.length * (event.end - event.start) / 100
+      if (
+        this.elementData.dataList.datas &&
+        this.elementData.dataList.datas.length
+      ) {
+        count =
+          (this.elementData.dataList.datas[this.index].categories.length *
+            (event.end - event.start)) /
+          100
         this.switchData(event, count)
       }
       // 当前图表初始设置了labelShow=true时，才判断超过最大个数隐藏
@@ -270,8 +304,13 @@
     switchData(event, count) {
       const categories = this.elementData.dataList.datas[this.index].categories
       // 容错在一个百分点内，认为是滑块滚动
-				const flag = Math.abs(lastCount - count) <= categories.length / 100 ? true : false
-				if (flag && event.end === 100 && this.index != this.elementData.dataList.datas.length - 1) {
+      const flag =
+        Math.abs(lastCount - count) <= categories.length / 100 ? true : false
+      if (
+        flag &&
+        event.end === 100 &&
+        this.index != this.elementData.dataList.datas.length - 1
+      ) {
         this.index += 1
         this.setChartDatas(event)
       }
@@ -290,7 +329,5 @@
       this.$set(this.ec.option, 'dataZoom.end', event.end)
     }
   }
-	}
+}
 </script>
-<style scoped>
-</style>

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

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