feat：charts add datazoom function

components/HorizontalBar/HorizontalBar.vue

@@ -49,9 +49,10 @@
 					dataZoom: this.elementInfo.dataZoom,
 					series: this.dealSeriesData(series)
 				}
-				chart.setOption(this.ec.option)
+				chart.setOption(this.ec.option)
+				const that = this
 				chart.on('click', event => {
-					const { preview, images } = this.elementData.dataList
+					const { preview, images } = that.elementData.dataList
 					var urls = []
 					var caches = uni.getStorageSync('cacheImages')
 					images.forEach(url => {
@@ -68,8 +69,11 @@
 							urls: urls
 						})
 					} else {
-						this.handleEchartsClick(event)
+						that.handleEchartsClick(event)
 					}
+				})
+				chart.on('datazoom', event => {
+					that.echartsDataZoom(event)
 				})
 				return chart
 			},
@@ -77,6 +81,7 @@
 				const { categories, series, preview, images } = this.elementData.dataList
 				this.$set(this.ec.option, 'yAxis.data', categories)
 				this.$set(this.ec.option, 'series', this.dealSeriesData(series))
+				this.$set(this.ec.option, 'dataZoom', this.elementInfo.dataZoom)
 				if(preview) {
 					this.cacheImages(images)
 				}

components/LineMixBar/LineMixBar.vue

@@ -55,6 +55,7 @@
 							type: 'value'
 						}
 					],
+					dataZoom: this.elementInfo.dataZoom,
 					series: this.dealSeriesData(series)
 				}
 				chart.setOption(this.ec.option)
@@ -64,9 +65,10 @@
 				return chart
 			},
 			initChart() {
-				const {categories, series} = this.elementData.dataList
+				const {categories, series } = this.elementData.dataList
 				this.$set(this.ec.option, 'xAxis.data', categories)
 				this.$set(this.ec.option, 'series', this.dealSeriesData(series))
+				this.$set(this.ec.option, 'dataZoom', this.elementInfo.dataZoom)
 			},
 			/**
 			 * 处理数据

components/NormalBar/NormalBar.vue

@@ -54,6 +54,7 @@
 				const { categories, series } = this.elementData.dataList
 				this.$set(this.ec.option, 'xAxis.data', categories)
 				this.$set(this.ec.option, 'series', this.dealSeriesData(series))
+				this.$set(this.ec.option, 'dataZoom', this.elementInfo.dataZoom)
 			},
 			/**
 			 * 处理数据

components/NormalLine/NormalLine.vue

@@ -55,7 +55,8 @@
 			initChart() {
 				const { categories, series } = this.elementData.dataList
 				this.$set(this.ec.option, 'xAxis.data', categories)
-				this.$set(this.ec.option, 'series', this.dealSeriesData(series))
+				this.$set(this.ec.option, 'series', this.dealSeriesData(series))
+				this.$set(this.ec.option, 'dataZoom', this.elementInfo.dataZoom)
 			},
 			/**
 			 * 处理数据

mixins/echartElementData.js

@@ -80,6 +80,13 @@ export default {
 		handleEchartsClick (chartEvent ) {
 			const { index, paramName } = this.elementInfo.child
 			uni.$emit('handleLinkParams', { index, paramName, value: chartEvent.name })
+		},
+		/**
+		 * 组件datazoom交互 
+		 */
+		echartsDataZoom (chartEvent ) {
+			const { index, paramName } = this.elementInfo.child
+			uni.$emit('handleDataZoomParams', { index, paramName, value: chartEvent })
 		}
   },
   deactivated() {

pages/index/index.vue

@@ -109,12 +109,31 @@
 					if(hideData.includes(item.id)) item.hide = true
 					return item
 				})
-			})			
+			})
+			/**
+			 * datazoom交互 
+			 */
+			uni.$on('handleDataZoomParams', ({index, paramName, value}) => {
+				if(index.length && paramName && value) {
+					that.reportInfo.list = that.reportInfo.list.map(item => {
+						console.log('begin item', item)
+						const flag = index.includes(item.id)
+						if(flag && item.dataZoom) {
+							console.log('set item', item)
+							that.$set(item.dataZoom, 'start', value.start)
+							that.$set(item.dataZoom, 'end', value.end)
+						}
+						console.log('after item', item)
+						return item
+					})
+				}			
+			})
 		},
 		onHide() {
 			// 移除监听事件
 			uni.$off('handleLinkParams')
 			uni.$off('handleLinkComp')
+			uni.$off('handleDataZoomParams')
 			clearInterval(this.timename)
 		},
 		methods: {