feat:charts axis formatter

components/BarMixMap/BarMixMap.vue

@@ -71,8 +71,9 @@
 				let options = {
 					...this.elementInfo.option,
 					tooltip: {},
+					xAxis: this.$u.common.dealAxisFormatter(this.elementInfo.option.xAxis),
 					yAxis: {
-						...this.elementInfo.option.yAxis,
+					  ...this.$u.common.dealAxisFormatter(this.elementInfo.option.yAxis),
 					  data: this.dealSeriesData(series).categories
 					},
 					dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
@@ -91,6 +92,13 @@
 						data: this.dealSeriesData(series).series
 					}
 				}
+				// 如果设置了颜色配置，使用颜色配置
+				if (this.elementInfo.option.colorConfig && this.elementInfo.option.colorConfig.value) {
+				  return {
+				    options,
+				    color: this.elementInfo.option.colorConfig.value
+				  } 
+				}
 				return options
 			},
 			setMapOption() {

components/HorizontalBar/HorizontalBar.vue

@@ -49,20 +49,14 @@ export default {
         dataList: { categories, series }
       } = this.elementData
       const that = this
-			var color = ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff',
-					'#f0ad54', '#ffffff', '#000000'
-			]
-			if(that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
-				color = that.elementInfo.option.colorConfig.value
-			}	
       that.ec.option = {
         ...that.elementInfo.option,
-				color: color,
+				xAxis: that.$u.common.dealAxisFormatter(that.elementInfo.option.xAxis),
         yAxis: {
-          ...that.elementInfo.option.yAxis,
+          ...that.$u.common.dealAxisFormatter(that.elementInfo.option.yAxis),
           data: categories
         },
-        tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
+        tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
         dataZoom:
           that.elementInfo.dataZoom && that.elementInfo.dataZoom.show
             ? [
@@ -189,38 +183,27 @@ export default {
         }
       })
     },
-    /**
-     *
-     * @param tooltip 表单的tooltip设置
-     */
-    dealTooltip(tooltip) {
-      if (!tooltip) {
-        return
-      }
-      if (tooltip.formatter && tooltip.formatter.length) {
-        return {
-          ...tooltip,
-          formatter: val => {
-            return this.$u.common.converFunction(tooltip.formatter, val)
-          },
-          trigger: 'axis'
-        }
-      }
-      return {
-        ...tooltip,
-        trigger: 'axis'
-      }
-    },
+
     /**
      * 处理数据
      */
     dealSeriesData(data) {
       if (!data) return
       const that = this
-      const newData = data.map(item => {
+      const newData = data.map((item, index) => {
+        // 如果设置了颜色配置，使用颜色配置
+        let itemStyle = {...that.elementInfo.option.bar.itemStyle}
+        if (that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
+          const colors = that.elementInfo.option.colorConfig.value
+          itemStyle = {
+            ...that.elementInfo.option.bar.itemStyle,
+            color: colors[index % colors.length]
+          }
+        }
 				const config = {
           type: 'bar',
           ...that.elementInfo.option.bar,
+					...itemStyle,
           label: {
             ...that.elementInfo.option.dataset,
             formatter: val => {

components/LineMixBar/LineMixBar.vue

@@ -48,29 +48,24 @@
 				canvas.setChart(chart)
 				const {categories, series} = this.elementData.dataList
 				const that = this
-				var color = ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff',
-						'#f0ad54', '#ffffff', '#000000'
+				let yAxis = [
+					that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, type: 'value' }),
+					that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, type: 'value' })
+				]
+				if (that.elementInfo.option.yAxis.showDouble) {
+					yAxis = [
+						that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, type: 'value' }),
+						that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second, type: 'value' })
 					]
-				if(that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
-					color = that.elementInfo.option.colorConfig.value
 				}
 				that.ec.option = {
 					...that.elementInfo.option,
-					color: color,
 					xAxis: {
 						...that.elementInfo.option.xAxis,
 						data: categories
 					},
-					yAxis: [{
-							...that.elementInfo.option.yAxis,
-							type: 'value'
-						},
-						{
-							...that.elementInfo.option.yAxis,
-							type: 'value'
-						}
-					],
-					tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
+					yAxis: yAxis,
+					tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
 					toolbox: {
 						...that.elementInfo.option.toolbox,
 						feature: {
@@ -110,6 +105,10 @@
 					if(this.labelShow) {
 					// 处理初始状态时，数值显示的数量是否超过了配置的最大值
 						let count = categories.length
+						if(count < this.elementInfo.option.dataset.maxCount) {
+							this.elementInfo.dataZoom.start = 0
+							this.elementInfo.dataZoom.end = 100
+						}
 						if(this.elementInfo.dataZoom && this.elementInfo.dataZoom.show) {
 							count = count * (this.elementInfo.dataZoom.end - this.elementInfo.dataZoom.start) / 100
 						}
@@ -130,35 +129,32 @@
 					}
 				})
 			},
-			/**
-			 * 
-			 * @param tooltip 表单的tooltip设置 
-			 */
-			dealTooltip(tooltip) {
-				if (!tooltip) {
-					return
-				}
-				if (tooltip.formatter && tooltip.formatter.length) {
-					return {
-						...tooltip,
-						formatter: (val) => {
-							return this.$u.common.converFunction(tooltip.formatter, val)
-						},
-						trigger: "axis"
-					}
-				}
-				return {
-					...tooltip,
-					trigger: "axis"
-				}
-			},
+
 			/**
 			 * 处理数据
 			 */
 			dealSeriesData(data) {
 				if (!data) return
 				const that = this
-				const newData = data.map(item => {
+				const newData = data.map((item, index) => {
+					// 如果设置了颜色配置，使用颜色配置
+					let itemStyle = {...that.elementInfo.option.bar.itemStyle}
+					if (item.type === 'line') {
+						itemStyle = {...that.elementInfo.option.line.itemStyle}
+					}
+					if (that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
+						const colors = that.elementInfo.option.colorConfig.value
+						itemStyle = {
+							...that.elementInfo.option.bar.itemStyle,
+							color: colors[index % colors.length]
+						}
+						if (item.type === 'line') {
+							itemStyle = {
+								...that.elementInfo.option.line.itemStyle,
+								color: colors[index % colors.length]
+							}
+						}
+					}
 					let config = {
 						label: {
 							...that.elementInfo.option.dataset,
@@ -170,13 +166,15 @@
 					if (item.type === 'bar') {
 						config = {
 							...config,
-							...that.elementInfo.option.bar
+							...that.elementInfo.option.bar,
+							...itemStyle
 						}
 					} else if (item.type === 'line') {
 						config = {
 							yAxisIndex: 1,
 							...config,
-							...that.elementInfo.option.line
+							...that.elementInfo.option.line,
+							...itemStyle
 						}
 					}
 					return {

components/NormalBar/NormalBar.vue

@@ -43,28 +43,21 @@
 				canvas.setChart(chart)
 				const { categories, series } = this.elementData.dataList
 				const that = this 
-				var color = ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff',
-						'#f0ad54', '#ffffff', '#000000'
-				]
-				if(that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
-					color = that.elementInfo.option.colorConfig.value
-				}	
-				var yAxis = that.dealYAxis({...that.elementInfo.option.yAxis})
+				var yAxis = that.$u.common.dealAxisFormatter({...that.elementInfo.option.yAxis})
 				if (yAxis.showDouble) {
 					yAxis = [
-				    that.dealYAxis({ ...that.elementInfo.option.yAxis}),
-				    that.dealYAxis({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second })
+				    that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis}),
+				    that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second })
 				  ]
 				}
 				that.ec.option = {
 					...that.elementInfo.option,
-					color: color,
 					xAxis: {
 						...that.elementInfo.option.xAxis,
 						data: categories
 					},
 					yAxis: yAxis,
-					tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
+					tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
 					toolbox: {
 						...that.elementInfo.option.toolbox,
 						feature: {
@@ -124,59 +117,27 @@
 					}
 				})
 			},
-			/**
-			 * 
-			 * @param tooltip 表单的tooltip设置 
-			 */
-			dealTooltip(tooltip) {
-				if (!tooltip) {
-					return
-				}
-				if (tooltip.formatter && tooltip.formatter.length) {
-					return {
-						...tooltip,
-						formatter: (val) => {
-							return this.$u.common.converFunction(tooltip.formatter, val)
-						},
-						trigger: "axis"
-					}
-				}
-				return {
-					...tooltip,
-					trigger: "axis"
-				}
-			},
-			/**
-			 * 
-			 * @param yAxis 表单的yAxis设置 
-			 */
-			dealYAxis(yAxis) {
-				if (!yAxis) {
-					return
-				}
-				if (yAxis.axisLabel.formatter && yAxis.axisLabel.formatter.length) {
-				  return {
-						...yAxis,
-				    axisLabel: {
-							...yAxis.axisLabel,
-				      formatter: (val) => {
-				        return this.$u.common.converFunction(yAxis.axisLabel.formatter, val)
-				      },
-				    } 
-				  }
-				}
-				return yAxis
-			},
+			
 			/**
 			 * 处理数据
 			 */
 			dealSeriesData(data) {
 				if (!data) return
 				const that = this
-				const newData = data.map(item => {
+				const newData = data.map((item, index) => {
+					// 如果设置了颜色配置，使用颜色配置
+					let itemStyle = {...that.elementInfo.option.bar.itemStyle}
+					if (that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
+						const colors = that.elementInfo.option.colorConfig.value
+						itemStyle = {
+							...that.elementInfo.option.bar.itemStyle,
+							color: colors[index % colors.length]
+						}
+					}
 					const config = {
 						type: 'bar',
 						...that.elementInfo.option.bar,
+						...itemStyle,
 						label: {
 							...that.elementInfo.option.dataset,
 							formatter: val => {

components/NormalLine/NormalLine.vue

@@ -42,28 +42,21 @@
 				canvas.setChart(chart)
 				const { categories = [], series = [] } = this.elementData.dataList
 				const that = this
-				var color = ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff',
-						'#f0ad54', '#ffffff', '#000000'
-				]
-				if(that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
-					color = that.elementInfo.option.colorConfig.value
-				}	
-				var yAxis = that.dealYAxis({...that.elementInfo.option.yAxis})
+				var yAxis = that.$u.common.dealAxisFormatter({...that.elementInfo.option.yAxis})
 				if (yAxis.showDouble) {
 					yAxis = [
-				    that.dealYAxis({ ...that.elementInfo.option.yAxis}),
-				    that.dealYAxis({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second})
+				    that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis}),
+				    that.$u.common.dealAxisFormatter({ ...that.elementInfo.option.yAxis, ...that.elementInfo.option.yAxis.second})
 				  ]
 				}
 				that.ec.option = {
 					...that.elementInfo.option,
-					color: color,
 					xAxis: {
 						...that.elementInfo.option.xAxis,
 						data: categories
 					},
 					yAxis: yAxis,
-					tooltip: that.dealTooltip(that.elementInfo.option.tooltip),
+					tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
 					toolbox: {
 						...that.elementInfo.option.toolbox,
 						feature: {
@@ -123,49 +116,7 @@
 					}
 				})
 			},
-			/**
-			 * 
-			 * @param tooltip 表单的tooltip设置 
-			 */
-			dealTooltip(tooltip) {
-				if (!tooltip) {
-					return
-				}
-				if (tooltip.formatter && tooltip.formatter.length) {
-					return {
-						...tooltip,
-						formatter: (val) => {
-							return this.$u.common.converFunction(tooltip.formatter, val)
-						},
-						trigger: "axis"
-					}
-				}
-				return {
-					...tooltip,
-					trigger: "axis"
-				}
-			},
-			/**
-			 * 
-			 * @param yAxis 表单的yAxis设置 
-			 */
-			dealYAxis(yAxis) {
-				if (!yAxis) {
-					return
-				}
-				if (yAxis.axisLabel.formatter && yAxis.axisLabel.formatter.length) {
-				  return {
-						...yAxis,
-				    axisLabel: {
-							...yAxis.axisLabel,
-				      formatter: (val) => {
-				        return this.$u.common.converFunction(yAxis.axisLabel.formatter, val)
-				      },
-				    } 
-				  }
-				}
-				return yAxis
-			},
+
 			/**
 			 * 处理数据
 			 */
@@ -173,9 +124,18 @@
 				if (!data) return []
 				const that = this
 				const newData = data.map((item, index) => {
+					let itemStyle = {...that.elementInfo.option.line.itemStyle}
+					if (that.elementInfo.option.colorConfig && that.elementInfo.option.colorConfig.value) {
+					  const colors = that.elementInfo.option.colorConfig.value
+					  itemStyle = {
+					    ...that.elementInfo.option.line.itemStyle,
+					    color: colors[index % colors.length]
+					  }
+					}
 					const config = {
 						type: 'line',
 						...that.elementInfo.option.line,
+						...itemStyle,
 						label: {
 							...that.elementInfo.option.dataset,
 							formatter: val => {

pages/index/index.vue

@@ -277,7 +277,7 @@
 						if (item.child.index.length) {
 							item.child.index.forEach(child => {
 								const index = data.list.findIndex(i => i.id === child )
-								data.list[index].linkTabsId = item.id
+								data.list[index].linkTabsId = item
 							})
 						}
 						if (item.child.data.length) {

utils/common.js

@@ -163,12 +163,12 @@ const install = (Vue, vm) => {
 
 		// ios会有零宽断言的兼容性问题，废弃掉正则判断，使用强制解析判断
 		const reg = '@diffOfNow('
-		if(paramStr.includes(reg)) {
+		if (paramStr.includes(reg)) {
 			const match = paramStr.split(reg)
-			if(match.length >= 2) {
+			if (match.length >= 2) {
 				const str = match[1]
 				const nums = str.split(')')
-				if(nums.length) {
+				if (nums.length) {
 					const res = reg + nums[0] + ')'
 					paramStr = paramStr.replace(res, diffOfNow(parseInt(nums[0])))
 				}
@@ -193,7 +193,7 @@ const install = (Vue, vm) => {
 		let d1 = new Date();
 		let d2 = new Date();
 		d2.setMonth(0);
-		d2.setDate(3);//3 周一为本周第一天；2 周日为本周第一天；1 周六为本周第一天
+		d2.setDate(3); //3 周一为本周第一天；2 周日为本周第一天；1 周六为本周第一天
 		let rq = d1 - d2;
 		let days = Math.ceil(rq / (24 * 60 * 60 * 1000));
 		let weekly = Math.ceil(days / 7);
@@ -233,6 +233,53 @@ const install = (Vue, vm) => {
 
 	}
 
+	/**
+	 * 
+	 * @param tooltip 表单的tooltip设置 
+	 */
+	const dealTooltip = (tooltip) => {
+		if (!tooltip) {
+			return
+		}
+		if (tooltip.formatter && tooltip.formatter.length) {
+			return {
+				...tooltip,
+				formatter: (val) => {
+					return converFunction(tooltip.formatter, val)
+				},
+				trigger: "axis"
+			}
+		}
+		return {
+			...tooltip,
+			trigger: "axis"
+		}
+	}
+
+	/**
+	 * 
+	 * @param yAxis 表单的yAxis设置 
+	 */
+	const dealAxisFormatter = (axis) => {
+		if (!axis) {
+			return
+		}
+		if (axis.axisLabel.formatter && axis.axisLabel.formatter.length) {
+			return {
+				...axis,
+				axisLabel: {
+					...axis.axisLabel,
+					formatter: (val) => {
+						return converFunction(axis.axisLabel.formatter, val)
+					},
+				}
+			}
+		}
+		return axis
+	}
+
+
+
 	vm.$u.common = {
 		converFunction,
 		fillDigit,
@@ -242,7 +289,9 @@ const install = (Vue, vm) => {
 		rpxToPx,
 		chunk,
 		getQueryFromString,
-		filterRequestParams
+		filterRequestParams,
+		dealTooltip,
+		dealAxisFormatter
 	}
 }