feat: line and bar add label show limit

components/HorizontalBar/HorizontalBar.vue

@@ -17,12 +17,16 @@
 				ec: {
 					lazyLoad: true,
 					option: {}
-				}
+				},
+				labelShow: false  // 记录当前设置的label.show的值
 			}
 		},
 		components: {
 			uniEcCanvas
 		},
+		created() {
+			this.labelShow = this.elementInfo.option.dataset.show
+		},
 		mounted() {
 			this.$refs['horizontalBarCanvas'].init(this.inited)
 		},
@@ -78,21 +82,38 @@
 				})
 				chart.on('datazoom', event => {
 					that.echartsDataZoom(event)
+					that.dealLabelShowStatus(event)
 				})
 				return chart
 			},
 			initChart() {
-				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 && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}])
-				if(chart) {
-					// 重新setOption，使得设置的formatter生效
-					chart.setOption(this.ec.option)
-				}
-				if(preview) {
-					this.cacheImages(images)
-				}
+				// 等待子组件完全挂载完成---chart初始化完成
+				this.$nextTick().then(() => {
+					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(count > this.elementInfo.option.dataset.maxCount) {
+							this.elementInfo.option.dataset.show = false
+						}
+					}
+					const dealSeries = this.dealSeriesData(series)
+					this.$set(this.ec.option, 'xAxis.data', categories)
+					this.$set(this.ec.option, 'series', dealSeries)
+					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(preview) {
+						this.cacheImages(images)
+					}
+				})
 			},
 			/**
 			 * 处理数据
@@ -141,8 +162,28 @@
 						})
 					}
 				})
-			}
-			
+			},
+			/**
+			 * 处理图表的数值是否显示
+			 * 超过10个时隐藏点的数值
+			 * event： 包含dataZoom的start和end
+			 */
+			dealLabelShowStatus(event) {
+				// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
+				if(this.labelShow) {
+					const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
+					const option = chart.getOption()
+					// TODO：切换全屏后返回，chart实例不存在了
+					if(!option) {
+						return
+					}
+					const series = option.series
+					series.map(item => {
+						item.label.show = count <= this.elementInfo.option.dataset.maxCount
+					})
+					chart.setOption(option)
+				}	
+			}			
 		}
 	}
 </script>

components/LineMixBar/LineMixBar.vue

@@ -23,7 +23,8 @@
 				ec: {
 					lazyLoad: true,
 					option: {}
-				}
+				},
+				labelShow: false  // 记录当前设置的label.show的值
 			}
 		},
 		components: {
@@ -32,6 +33,9 @@
 		mounted() {
 			this.$refs['lineMixBarCanvas'].init(this.inited)
 		},
+		created() {
+			this.labelShow = this.elementInfo.option.dataset.show
+		},
 		methods: {
 			inited(canvas, width, height, canvasDpr) {
 				chart = this.$echarts.init(canvas, null, {
@@ -86,18 +90,35 @@
 				})
 				chart.on('datazoom', event => {
 					that.echartsDataZoom(event)
+					that.dealLabelShowStatus(event)
 				})
 				return chart
 			},
 			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, 'dataZoom', this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}])
-				if(chart) {
-					// 重新setOption，使得设置的formatter生效
-					chart.setOption(this.ec.option)
-				}
+				// 等待子组件完全挂载完成---chart初始化完成
+				this.$nextTick().then(() => {
+					const { categories, series } = 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(count > this.elementInfo.option.dataset.maxCount) {
+							this.elementInfo.option.dataset.show = false
+						}
+					}
+					const dealSeries = this.dealSeriesData(series)
+					this.$set(this.ec.option, 'xAxis.data', categories)
+					this.$set(this.ec.option, 'series', dealSeries)
+					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)
+					}
+				})
 			},
 			/**
 			 * 处理数据
@@ -132,7 +153,29 @@
 					}
 				})
 				return newData
+			},
+			/**
+			 * 处理图表的数值是否显示
+			 * 超过10个时隐藏点的数值
+			 * event： 包含dataZoom的start和end
+			 */
+			dealLabelShowStatus(event) {
+				// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
+				if(this.labelShow) {
+					const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
+					const option = chart.getOption()
+					// TODO：切换全屏后返回，chart实例不存在了
+					if(!option) {
+						return
+					}
+					const series = option.series
+					series.map(item => {
+						item.label.show = count <= this.elementInfo.option.dataset.maxCount
+					})
+					chart.setOption(option)
+				}	
 			}
+			
 		}
 	}
 </script>

components/NormalBar/NormalBar.vue

@@ -18,12 +18,16 @@
 				ec: {
 					lazyLoad: true,
 					option: {}
-				}
+				},
+				labelShow: false  // 记录当前设置的label.show的值
 			}
 		},
 		components: {
 			uniEcCanvas
 		},
+		created() {
+			this.labelShow = this.elementInfo.option.dataset.show
+		},
 		mounted() {
 			this.$refs['normalbarCanvas'].init(this.inited)
 		},
@@ -72,18 +76,35 @@
 				})
 				chart.on('datazoom', event => {
 					that.echartsDataZoom(event)
+					that.dealLabelShowStatus(event)
 				})
 				return chart
 			},
 			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, 'dataZoom', this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}])
-				if(chart) {
-					// 重新setOption，使得设置的formatter生效
-					chart.setOption(this.ec.option)
-				}
+				// 等待子组件完全挂载完成---chart初始化完成
+				this.$nextTick().then(() => {
+					const { categories, series } = 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(count > this.elementInfo.option.dataset.maxCount) {
+							this.elementInfo.option.dataset.show = false
+						}
+					}
+					const dealSeries = this.dealSeriesData(series)
+					this.$set(this.ec.option, 'xAxis.data', categories)
+					this.$set(this.ec.option, 'series', dealSeries)
+					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)
+					}
+				})
 			},
 			/**
 			 * 处理数据
@@ -109,6 +130,27 @@
 					}
 				})
 				return newData
+			},
+			/**
+			 * 处理图表的数值是否显示
+			 * 超过10个时隐藏点的数值
+			 * event： 包含dataZoom的start和end
+			 */
+			dealLabelShowStatus(event) {
+				// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
+				if(this.labelShow) {
+					const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
+					const option = chart.getOption()
+					// TODO：切换全屏后返回，chart实例不存在了
+					if(!option) {
+						return
+					}
+					const series = option.series
+					series.map(item => {
+						item.label.show = count <= this.elementInfo.option.dataset.maxCount
+					})
+					chart.setOption(option)
+				}	
 			}
 		}
 	}

components/NormalLine/NormalLine.vue

@@ -17,15 +17,19 @@
 				ec: {
 					lazyLoad: true,
 					option: {}
-				}
+				},
+				labelShow: false  // 记录当前设置的label.show的值
 			}
 		},
 		components: {
 			uniEcCanvas
-		},
+		},
+		created() {
+			this.labelShow = this.elementInfo.option.dataset.show
+		},
 		mounted() {
-			this.$refs['normalLineCanvas'].init(this.inited)
-		},
+			this.$refs['normalLineCanvas'].init(this.inited)
+		},
 		methods: {
 			inited(canvas, width, height, canvasDpr) {
 				chart = this.$echarts.init(canvas, null, {
@@ -35,7 +39,7 @@
 				})
 				canvas.setChart(chart)
 				const { categories = [], series = [] } = this.elementData.dataList
-				const that = this
+				const that = this
 				that.ec.option = {
 					...that.elementInfo.option,
 					color: ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff',
@@ -67,25 +71,42 @@
 					},
 					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 => {
 					that.handleEchartsClick(event)
 				})
 				chart.on('datazoom', event => {
-					that.echartsDataZoom(event)
-				})
+					that.echartsDataZoom(event)
+					that.dealLabelShowStatus(event)
+				})
 				return chart
 			},
-			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, 'dataZoom', this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}])
-				if(chart) {
-					// 重新setOption，使得设置的formatter生效
-					chart.setOption(this.ec.option)
-				}
+			initChart() {
+				// 等待子组件完全挂载完成---chart初始化完成
+				this.$nextTick().then(() => {
+					const { categories, series } = 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(count > this.elementInfo.option.dataset.maxCount) {
+							this.elementInfo.option.dataset.show = false
+						}
+					}
+					const dealSeries = this.dealSeriesData(series)
+					this.$set(this.ec.option, 'xAxis.data', categories)
+					this.$set(this.ec.option, 'series', dealSeries)
+					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)
+					}
+				})
 			},
 			/**
 			 * 处理数据
@@ -103,7 +124,6 @@
 								return that.$u.common.converFunction(that.elementInfo.option.dataset
 									.formatter, val)
 							},
-							show: item.data.length > 10 ? false : true
 						}
 					}
 					return {
@@ -112,6 +132,27 @@
 					}
 				})
 				return newData
+			},
+			/**
+			 * 处理图表的数值是否显示
+			 * 超过10个时隐藏点的数值
+			 * event： 包含dataZoom的start和end
+			 */
+			dealLabelShowStatus(event) {
+				// 当前图表初始设置了labelShow=true时，才判断超过10个隐藏
+				if(this.labelShow) {
+					const count = this.elementData.dataList.categories.length * (event.end - event.start) / 100
+					const option = chart.getOption()
+					// TODO：切换全屏后返回，chart实例不存在了
+					if(!option) {
+						return
+					}
+					const series = option.series
+					series.map(item => {
+						item.label.show = count <= this.elementInfo.option.dataset.maxCount
+					})
+					chart.setOption(option)
+				}	
 			}
 		}
 	}