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)
+					// 处理dataZoom的拖动事件
+					that.handleDataZoomEvent(event)
 				})
 				return chart
 			},
@@ -166,16 +169,31 @@
 					}
 				})
 			},
+			/**
+			* 响应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) {
+			dealLabelShowStatus(event, count) {
 				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 ) {
 					// 放大的情况
@@ -185,7 +203,6 @@
 					// 缩小的情况
 					flag = true
 				}
-					lastCount = count
 				if(flag) {
 					const series = this.ec.option.series
 					series.map(item => {
@@ -195,7 +212,32 @@
 					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)
 			}			
 		}
 	}

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)
+					// 处理dataZoom的拖动事件
+					that.handleDataZoomEvent(event)
 				})
 				return chart
 			},
@@ -156,16 +159,31 @@
 				})
 				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) {
+			dealLabelShowStatus(event, count) {
 				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 ) {
 					// 放大的情况
@@ -175,7 +193,6 @@
 					// 缩小的情况
 					flag = true
 				}
-					lastCount = count
 				if(flag) {
 					const series = this.ec.option.series
 					series.map(item => {
@@ -185,7 +202,32 @@
 					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)
 			}			
 		}
 	}

components/NormalBar/NormalBar.vue

@@ -20,7 +20,8 @@
 					lazyLoad: true,
 					option: {}
 				},
-				labelShow: false  // 记录当前设置的label.show的值
+				labelShow: false,  // 记录当前设置的label.show的值
+				index: 0,  // 记录dataZoom切换当前的下标
 			}
 		},
 		components: {
@@ -76,8 +77,10 @@
 					that.handleEchartsClick(event)
 				})
 				chart.on('datazoom', event => {
+					// 传递参数给其他组件
 					that.echartsDataZoom(event)
-					that.dealLabelShowStatus(event)
+					// 处理dataZoom的拖动事件
+					that.handleDataZoomEvent(event)
 				})
 				return chart
 			},
@@ -133,16 +136,31 @@
 				})
 				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) {
+			dealLabelShowStatus(event, count) {
 				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 ) {
 					// 放大的情况
@@ -152,7 +170,6 @@
 					// 缩小的情况
 					flag = true
 				}
-					lastCount = count
 				if(flag) {
 					const series = this.ec.option.series
 					series.map(item => {
@@ -162,7 +179,32 @@
 					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)
 			}			
 		}
 	}

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,16 +138,31 @@
 				})
 				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) {
+			dealLabelShowStatus(event, count) {
 				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 ) {
 					// 放大的情况
@@ -154,7 +172,6 @@
 					// 缩小的情况
 					flag = true
 				}
-					lastCount = count
 				if(flag) {
 					const series = this.ec.option.series
 					series.map(item => {
@@ -164,7 +181,32 @@
 					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)
 			}
 		}
 	}