fix: bar and line add datazoom to change data

components/HorizontalBar/HorizontalBar.vue

@@ -19,7 +19,8 @@
 					lazyLoad: true,
 					option: {}
 				},
-				labelShow: false  // 记录当前设置的label.show的值
+				labelShow: false,  // 记录当前设置的label.show的值
+				index: 0,  // 记录dataZoom切换当前的下标
 			}
 		},
 		components: {
@@ -82,8 +83,10 @@
 					}
 				})
 				chart.on('datazoom', event => {
-					that.echartsDataZoom(event)
-					that.dealLabelShowStatus(event)
+					// 传递参数给其他组件
+					that.echartsDataZoom(event)
+					// 处理dataZoom的拖动事件
+					that.handleDataZoomEvent(event)
 				})
 				return chart
 			},
@@ -166,37 +169,76 @@
 					}
 				})
 			},
+			/**
+			* 响应dataZoom的滑动事件
+			* event： 包含dataZoom的start和end
+			*/
+			handleDataZoomEvent(event) {
+				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
+					this.switchData(event, count)
+				}
+				// 当前图表初始设置了labelShow=true时，才判断超过最大个数隐藏
+				if(this.labelShow) {
+					this.dealLabelShowStatus(event, count)
+				}
+				lastCount = count	
+			},
 			/**
 			 * 处理图表的数值是否显示
 			 * 超过maxCount个时隐藏点的数值
 			 * event： 包含dataZoom的start和end
+			 * count: 当前图表显示的数量
 			*/
-			dealLabelShowStatus(event) {
-				// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
-				if(this.labelShow) {
-					var flag = false
-					const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
-					const maxCount = this.elementInfo.option.dataset.maxCount
-					if(lastCount < count && lastCount <= maxCount  && count > maxCount ) {
-						// 放大的情况
-						flag = true
-					}
-					if(lastCount > count && lastCount >= maxCount && count < maxCount) {
-						// 缩小的情况
-						flag = true
-					}
-					lastCount = count
-					if(flag) {
-						const series = this.ec.option.series
-						series.map(item => {
-							item.label.show = count <= this.elementInfo.option.dataset.maxCount
-						})
-						this.$set(this.ec.option, 'series', series)
-						this.$set(this.ec.option, 'dataZoom.start', event.start)
-						this.$set(this.ec.option, 'dataZoom.end', event.end)
-					}
-				}	
-			}
+			dealLabelShowStatus(event, count) {
+				var flag = false
+				const maxCount = this.elementInfo.option.dataset.maxCount
+				if(lastCount < count && lastCount <= maxCount  && count > maxCount ) {
+					// 放大的情况
+					flag = true
+				}
+				if(lastCount > count && lastCount >= maxCount && count < maxCount) {
+					// 缩小的情况
+					flag = true
+				}
+				if(flag) {
+					const series = this.ec.option.series
+					series.map(item => {
+						item.label.show = count <= this.elementInfo.option.dataset.maxCount
+					})
+					this.$set(this.ec.option, 'series', series)
+					this.$set(this.ec.option, 'dataZoom.start', event.start)
+					this.$set(this.ec.option, 'dataZoom.end', event.end)
+				}
+			},
+			/**
+			 * 处理数据的切换
+			 * 滑块滚动到最左边或者最右边去切换上一个或者下一个数据
+			 * event： 包含dataZoom的start和end
+			 * count: 当前图表显示的数量
+			*/
+			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) {
+					this.index += 1
+					this.setChartDatas()
+				}
+				if(flag && event.start === 0 && this.index != 0) {
+					this.index -= 1
+					this.setChartDatas()
+				}
+			},
+			setChartDatas() {
+				const categories = this.elementData.dataList.datas[this.index].categories
+			    const series = this.elementData.dataList.datas[this.index].series
+				const dealSeries = this.dealSeriesData(series)
+				this.$set(this.ec.option, 'yAxis.data', categories)
+				this.$set(this.ec.option, 'series', dealSeries)
+			}			
 		}
 	}
 </script>

components/LineMixBar/LineMixBar.vue

@@ -25,7 +25,8 @@
 					lazyLoad: true,
 					option: {}
 				},
-				labelShow: false  // 记录当前设置的label.show的值
+				labelShow: false,  // 记录当前设置的label.show的值
+				index: 0,  // 记录dataZoom切换当前的下标
 			}
 		},
 		components: {
@@ -90,8 +91,10 @@
 					that.handleEchartsClick(event)
 				})
 				chart.on('datazoom', event => {
-					that.echartsDataZoom(event)
-					that.dealLabelShowStatus(event)
+					// 传递参数给其他组件
+					that.echartsDataZoom(event)
+					// 处理dataZoom的拖动事件
+					that.handleDataZoomEvent(event)
 				})
 				return chart
 			},
@@ -156,37 +159,76 @@
 				})
 				return newData
 			},
+			/**
+			* 响应dataZoom的滑动事件
+			* event： 包含dataZoom的start和end
+			*/
+			handleDataZoomEvent(event) {
+				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
+					this.switchData(event, count)
+				}
+				// 当前图表初始设置了labelShow=true时，才判断超过最大个数隐藏
+				if(this.labelShow) {
+					this.dealLabelShowStatus(event, count)
+				}
+				lastCount = count	
+			},
 			/**
 			 * 处理图表的数值是否显示
 			 * 超过maxCount个时隐藏点的数值
 			 * event： 包含dataZoom的start和end
+			 * count: 当前图表显示的数量
 			*/
-			dealLabelShowStatus(event) {
-				// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
-				if(this.labelShow) {
-					var flag = false
-					const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
-					const maxCount = this.elementInfo.option.dataset.maxCount
-					if(lastCount < count && lastCount <= maxCount  && count > maxCount ) {
-						// 放大的情况
-						flag = true
-					}
-					if(lastCount > count && lastCount >= maxCount && count < maxCount) {
-						// 缩小的情况
-						flag = true
-					}
-					lastCount = count
-					if(flag) {
-						const series = this.ec.option.series
-						series.map(item => {
-							item.label.show = count <= this.elementInfo.option.dataset.maxCount
-						})
-						this.$set(this.ec.option, 'series', series)
-						this.$set(this.ec.option, 'dataZoom.start', event.start)
-						this.$set(this.ec.option, 'dataZoom.end', event.end)
-					}
-				}	
-			}
+			dealLabelShowStatus(event, count) {
+				var flag = false
+				const maxCount = this.elementInfo.option.dataset.maxCount
+				if(lastCount < count && lastCount <= maxCount  && count > maxCount ) {
+					// 放大的情况
+					flag = true
+				}
+				if(lastCount > count && lastCount >= maxCount && count < maxCount) {
+					// 缩小的情况
+					flag = true
+				}
+				if(flag) {
+					const series = this.ec.option.series
+					series.map(item => {
+						item.label.show = count <= this.elementInfo.option.dataset.maxCount
+					})
+					this.$set(this.ec.option, 'series', series)
+					this.$set(this.ec.option, 'dataZoom.start', event.start)
+					this.$set(this.ec.option, 'dataZoom.end', event.end)
+				}
+			},
+			/**
+			 * 处理数据的切换
+			 * 滑块滚动到最左边或者最右边去切换上一个或者下一个数据
+			 * event： 包含dataZoom的start和end
+			 * count: 当前图表显示的数量
+			*/
+			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) {
+					this.index += 1
+					this.setChartDatas()
+				}
+				if(flag && event.start === 0 && this.index != 0) {
+					this.index -= 1
+					this.setChartDatas()
+				}
+			},
+			setChartDatas() {
+				const categories = this.elementData.dataList.datas[this.index].categories
+			    const series = this.elementData.dataList.datas[this.index].series
+				const dealSeries = this.dealSeriesData(series)
+				this.$set(this.ec.option, 'xAxis.data', categories)
+				this.$set(this.ec.option, 'series', dealSeries)
+			}			
 		}
 	}
 </script>

components/NormalBar/NormalBar.vue

@@ -20,7 +20,8 @@
 					lazyLoad: true,
 					option: {}
 				},
-				labelShow: false  // 记录当前设置的label.show的值
+				labelShow: false,  // 记录当前设置的label.show的值
+				index: 0,  // 记录dataZoom切换当前的下标
 			}
 		},
 		components: {
@@ -75,9 +76,11 @@
 				chart.on('click', event => {
 					that.handleEchartsClick(event)
 				})
-				chart.on('datazoom', event => {
-					that.echartsDataZoom(event)
-					that.dealLabelShowStatus(event)
+				chart.on('datazoom', event => {
+					// 传递参数给其他组件
+					that.echartsDataZoom(event)
+					// 处理dataZoom的拖动事件
+					that.handleDataZoomEvent(event)
 				})
 				return chart
 			},
@@ -132,38 +135,77 @@
 					}
 				})
 				return newData
+			},
+			/**
+			* 响应dataZoom的滑动事件
+			* event： 包含dataZoom的start和end
+			*/
+			handleDataZoomEvent(event) {
+				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
+					this.switchData(event, count)
+				}
+				// 当前图表初始设置了labelShow=true时，才判断超过最大个数隐藏
+				if(this.labelShow) {
+					this.dealLabelShowStatus(event, count)
+				}
+				lastCount = count	
 			},
 			/**
 			 * 处理图表的数值是否显示
 			 * 超过maxCount个时隐藏点的数值
 			 * event： 包含dataZoom的start和end
+			 * count: 当前图表显示的数量
 			*/
-			dealLabelShowStatus(event) {
-				// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
-				if(this.labelShow) {
-					var flag = false
-					const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
-					const maxCount = this.elementInfo.option.dataset.maxCount
-					if(lastCount < count && lastCount <= maxCount  && count > maxCount ) {
-						// 放大的情况
-						flag = true
-					}
-					if(lastCount > count && lastCount >= maxCount && count < maxCount) {
-						// 缩小的情况
-						flag = true
-					}
-					lastCount = count
-					if(flag) {
-						const series = this.ec.option.series
-						series.map(item => {
-							item.label.show = count <= this.elementInfo.option.dataset.maxCount
-						})
-						this.$set(this.ec.option, 'series', series)
-						this.$set(this.ec.option, 'dataZoom.start', event.start)
-						this.$set(this.ec.option, 'dataZoom.end', event.end)
-					}
-				}	
-			}
+			dealLabelShowStatus(event, count) {
+				var flag = false
+				const maxCount = this.elementInfo.option.dataset.maxCount
+				if(lastCount < count && lastCount <= maxCount  && count > maxCount ) {
+					// 放大的情况
+					flag = true
+				}
+				if(lastCount > count && lastCount >= maxCount && count < maxCount) {
+					// 缩小的情况
+					flag = true
+				}
+				if(flag) {
+					const series = this.ec.option.series
+					series.map(item => {
+						item.label.show = count <= this.elementInfo.option.dataset.maxCount
+					})
+					this.$set(this.ec.option, 'series', series)
+					this.$set(this.ec.option, 'dataZoom.start', event.start)
+					this.$set(this.ec.option, 'dataZoom.end', event.end)
+				}
+			},
+			/**
+			 * 处理数据的切换
+			 * 滑块滚动到最左边或者最右边去切换上一个或者下一个数据
+			 * event： 包含dataZoom的start和end
+			 * count: 当前图表显示的数量
+			*/
+			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) {
+					this.index += 1
+					this.setChartDatas()
+				}
+				if(flag && event.start === 0 && this.index != 0) {
+					this.index -= 1
+					this.setChartDatas()
+				}
+			},
+			setChartDatas() {
+				const categories = this.elementData.dataList.datas[this.index].categories
+			    const series = this.elementData.dataList.datas[this.index].series
+				const dealSeries = this.dealSeriesData(series)
+				this.$set(this.ec.option, 'xAxis.data', categories)
+				this.$set(this.ec.option, 'series', dealSeries)
+			}			
 		}
 	}
 </script>

components/NormalLine/NormalLine.vue

@@ -19,7 +19,8 @@
 					lazyLoad: true,
 					option: {}
 				},
-				labelShow: false  ,// 记录当前设置的label.show的值
+				labelShow: false, // 记录当前设置的label.show的值
+				index: 0,  // 记录dataZoom切换当前的下标
 			}
 		},
 		components: {
@@ -78,8 +79,10 @@
 					that.handleEchartsClick(event)
 				})
 				chart.on('datazoom', event => {
+					// 传递参数给其他组件
 					that.echartsDataZoom(event)
-					that.dealLabelShowStatus(event)
+					// 处理dataZoom的拖动事件
+					that.handleDataZoomEvent(event)
 				})
 				return chart
 			},
@@ -135,37 +138,76 @@
 				})
 				return newData
 			},
+			/**
+			* 响应dataZoom的滑动事件
+			* event： 包含dataZoom的start和end
+			*/
+			handleDataZoomEvent(event) {
+				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
+					this.switchData(event, count)
+				}
+				// 当前图表初始设置了labelShow=true时，才判断超过最大个数隐藏
+				if(this.labelShow) {
+					this.dealLabelShowStatus(event, count)
+				}
+				lastCount = count	
+			},
 			/**
 			 * 处理图表的数值是否显示
 			 * 超过maxCount个时隐藏点的数值
 			 * event： 包含dataZoom的start和end
+			 * count: 当前图表显示的数量
 			*/
-			dealLabelShowStatus(event) {
-				// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
-				if(this.labelShow) {
-					var flag = false
-					const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
-					const maxCount = this.elementInfo.option.dataset.maxCount
-					if(lastCount < count && lastCount <= maxCount  && count > maxCount ) {
-						// 放大的情况
-						flag = true
-					}
-					if(lastCount > count && lastCount >= maxCount && count < maxCount) {
-						// 缩小的情况
-						flag = true
-					}
-					lastCount = count
-					if(flag) {
-						const series = this.ec.option.series
-						series.map(item => {
-							item.label.show = count <= this.elementInfo.option.dataset.maxCount
-						})
-						this.$set(this.ec.option, 'series', series)
-						this.$set(this.ec.option, 'dataZoom.start', event.start)
-						this.$set(this.ec.option, 'dataZoom.end', event.end)
-					}
-				}	
-			}
+			dealLabelShowStatus(event, count) {
+				var flag = false
+				const maxCount = this.elementInfo.option.dataset.maxCount
+				if(lastCount < count && lastCount <= maxCount  && count > maxCount ) {
+					// 放大的情况
+					flag = true
+				}
+				if(lastCount > count && lastCount >= maxCount && count < maxCount) {
+					// 缩小的情况
+					flag = true
+				}
+				if(flag) {
+					const series = this.ec.option.series
+					series.map(item => {
+						item.label.show = count <= this.elementInfo.option.dataset.maxCount
+					})
+					this.$set(this.ec.option, 'series', series)
+					this.$set(this.ec.option, 'dataZoom.start', event.start)
+					this.$set(this.ec.option, 'dataZoom.end', event.end)
+				}
+			},
+			/**
+			 * 处理数据的切换
+			 * 滑块滚动到最左边或者最右边去切换上一个或者下一个数据
+			 * event： 包含dataZoom的start和end
+			 * count: 当前图表显示的数量
+			*/
+			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) {
+					this.index += 1
+					this.setChartDatas()
+				}
+				if(flag && event.start === 0 && this.index != 0) {
+					this.index -= 1
+					this.setChartDatas()
+				}
+			},
+			setChartDatas() {
+				const categories = this.elementData.dataList.datas[this.index].categories
+			    const series = this.elementData.dataList.datas[this.index].series
+				const dealSeries = this.dealSeriesData(series)
+				this.$set(this.ec.option, 'xAxis.data', categories)
+				this.$set(this.ec.option, 'series', dealSeries)
+			}
 		}
 	}
 </script>