feat: charts support x y double axis

components/BarMixMap/BarMixMap.vue

@@ -71,11 +71,8 @@
 				let options = {
 					...this.elementInfo.option,
 					tooltip: {},
-					xAxis: this.$u.common.dealAxisFormatter(this.elementInfo.option.xAxis),
-					yAxis: {
-					  ...this.$u.common.dealAxisFormatter(this.elementInfo.option.yAxis),
-					  data: this.dealSeriesData(series).categories
-					},
+					yAxis: that.$u.common.dealXAxis({...this.elementInfo.option.yAxis}, this.dealSeriesData(series)),
+					xAxis: that.$u.common.dealYAxis({...this.elementInfo.option.xAxis}),
 					dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
 					series: {
 						id: 'associate',

components/HorizontalBar/HorizontalBar.vue

@@ -51,11 +51,8 @@ export default {
       const that = this
       that.ec.option = {
         ...that.elementInfo.option,
-				xAxis: that.$u.common.dealAxisFormatter(that.elementInfo.option.xAxis),
-        yAxis: {
-          ...that.$u.common.dealAxisFormatter(that.elementInfo.option.yAxis),
-          data: categories
-        },
+				yAxis: that.$u.common.dealXAxis({...that.elementInfo.option.yAxis}, that.elementData.dataList),
+				xAxis: that.$u.common.dealYAxis({...that.elementInfo.option.xAxis}),
         tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
         dataZoom:
           that.elementInfo.dataZoom && that.elementInfo.dataZoom.show
@@ -222,8 +219,8 @@ export default {
           }
         }
         return {
-          ...item,
-          ...config
+          ...config,
+          ...item
         }
       })
       return newData

components/LineMixBar/LineMixBar.vue

@@ -48,23 +48,10 @@
 				canvas.setChart(chart)
 				const {categories, series} = this.elementData.dataList
 				const that = this
-				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' })
-					]
-				}
 				that.ec.option = {
 					...that.elementInfo.option,
-					xAxis: {
-						...that.$u.common.dealAxisFormatter(that.elementInfo.option.xAxis),
-						data: categories
-					},
-					yAxis: yAxis,
+					xAxis: that.$u.common.dealXAxis({...that.elementInfo.option.xAxis}, that.elementData.dataList),
+					yAxis: that.$u.common.dealYAxis({...that.elementInfo.option.yAxis, type: 'value'}),					
 					tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
 					toolbox: {
 						...that.elementInfo.option.toolbox,
@@ -180,18 +167,14 @@
 						}
 					} else if (item.type === 'line') {
 						config = {
-							yAxisIndex: 1,
 							...config,
 							...that.elementInfo.option.line,
 							...itemStyle
 						}
 					}
-					return {
-						...item,
-						...config
-					}
+					return { ...config, ...item}
 				})
-				return newData
+				return that.$u.common.dealAxisIndex(newData, that.elementInfo)
 			},
 			/**
 			* 响应dataZoom的滑动事件

components/NormalBar/NormalBar.vue

@@ -43,20 +43,10 @@
 				canvas.setChart(chart)
 				const { categories, series } = this.elementData.dataList
 				const that = this 
-				var yAxis = that.$u.common.dealAxisFormatter({...that.elementInfo.option.yAxis})
-				if (yAxis.showDouble) {
-					yAxis = [
-				    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,
-					xAxis: {
-						...that.$u.common.dealAxisFormatter(that.elementInfo.option.xAxis),
-						data: categories
-					},
-					yAxis: yAxis,
+					xAxis: that.$u.common.dealXAxis({...that.elementInfo.option.xAxis}, that.elementData.dataList),
+					yAxis: that.$u.common.dealYAxis({...that.elementInfo.option.yAxis}),
 					tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
 					toolbox: {
 						...that.elementInfo.option.toolbox,
@@ -157,16 +147,9 @@
 							}
 						}
 					}
-					if (that.elementInfo.option.yAxis.showDouble) {
-						const yAxisIndex = data.length - 1 === index ? 1 : 0 
-						return { ...item, ...config, yAxisIndex: yAxisIndex}
-					}
-					return {
-						...item,
-						...config
-					}
+					return { ...config, ...item}
 				})
-				return newData
+				return that.$u.common.dealAxisIndex(newData, that.elementInfo)
 			},
 			/**
 			* 响应dataZoom的滑动事件

components/NormalLine/NormalLine.vue

@@ -42,20 +42,10 @@
 				canvas.setChart(chart)
 				const { categories = [], series = [] } = this.elementData.dataList
 				const that = this
-				var yAxis = that.$u.common.dealAxisFormatter({...that.elementInfo.option.yAxis})
-				if (yAxis.showDouble) {
-					yAxis = [
-				    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,
-					xAxis: {
-						...that.$u.common.dealAxisFormatter(that.elementInfo.option.xAxis),
-						data: categories
-					},
-					yAxis: yAxis,
+					xAxis: that.$u.common.dealXAxis({...that.elementInfo.option.xAxis}, that.elementData.dataList),
+					yAxis: that.$u.common.dealYAxis({...that.elementInfo.option.yAxis}),
 					tooltip: that.$u.common.dealTooltip(that.elementInfo.option.tooltip),
 					toolbox: {
 						...that.elementInfo.option.toolbox,
@@ -158,16 +148,9 @@
 							},
 						}
 					}
-					if (that.elementInfo.option.yAxis.showDouble) {
-						const yAxisIndex = data.length - 1 === index ? 1 : 0 
-						return { ...item, ...config, yAxisIndex: yAxisIndex}
-					}
-					return {
-						...item,
-						...config
-					}
+					return { ...config, ...item}
 				})
-				return newData
+				return that.$u.common.dealAxisIndex(newData, that.elementInfo)
 			},
 			/**
 			* 响应dataZoom的滑动事件

utils/common.js

@@ -246,7 +246,10 @@ const install = (Vue, vm) => {
 			position(point, params, dom, rect, size) {
 				let x = point[0];
 				let y = point[1];
-			  const { contentSize, viewSize } = size;
+				const {
+					contentSize,
+					viewSize
+				} = size;
 				const maxX = viewSize[0] - contentSize[0];
 				if (x > maxX) {
 					x -= contentSize[0];
@@ -255,7 +258,7 @@ const install = (Vue, vm) => {
 				if (y > maxY) {
 					y -= contentSize[1];
 				}
-				if(y < 0) {
+				if (y < 0) {
 					y = 0
 				}
 				return [x, y];
@@ -275,6 +278,69 @@ const install = (Vue, vm) => {
 			trigger: "axis"
 		}
 	}
+	/**
+	 * 
+	 * @param axis 表单的yAxis设置 
+	 */
+	const dealYAxis = (axis) => {
+		if (!axis) {
+			return
+		}
+		if (axis.showDouble) {
+			return [
+				dealAxisFormatter({
+					...axis
+				}),
+				dealAxisFormatter({
+					...axis,
+					...axis.second
+				})
+			]
+		}
+		return dealAxisFormatter({
+			...axis
+		})
+	}
+
+	/**
+	 * 
+	 * @param axis 表单的xAxis设置 
+	 */
+	const dealXAxis = (axis, dataList) => {
+		if (!axis) {
+			return
+		}
+		if (!dataList) {
+			return
+		}
+		const categories = dataList.categories
+		if (axis.showDouble) {
+			let data = categories
+			if (dataList.secondCategories) {
+				data = dataList.secondCategories
+			}
+			return [{
+					...dealAxisFormatter({
+						...axis
+					}),
+					data: categories
+				},
+				{
+					...dealAxisFormatter({
+						...axis,
+						...axis.second
+					}),
+					data: data
+				}
+			]
+		}
+		return {
+			...dealAxisFormatter({
+				...axis
+			}),
+			data: categories
+		}
+	}
 
 	/**
 	 * 
@@ -298,6 +364,44 @@ const install = (Vue, vm) => {
 		return axis
 	}
 
+	const dealAxisIndex = (datas, elementInfo) => {
+		const yShowDouble = elementInfo.option.yAxis.showDouble
+		let yflag = false
+		const xShowDouble = elementInfo.option.xAxis.showDouble
+		let xflag = false
+		const newData = datas.map((item, index) => {
+			let yAxisIndex = 0
+			if (yShowDouble) {
+				if (item.yAxisIndex) {
+					yAxisIndex = item.yAxisIndex
+					yflag = true
+				}
+				// 打开双轴的情况下,没有设置yAxisIndex的，默认数组最后的用右轴
+				if (datas.length > 1 && datas.length - 1 === index && !yflag) {
+					yAxisIndex = 1
+				}
+			}
+			let xAxisIndex = 0
+			if (xShowDouble) {
+				if (item.xAxisIndex) {
+					xAxisIndex = item.xAxisIndex
+					xflag = true
+				}
+				// 打开双轴的情况下,没有设置xAxisIndex的，默认数组最后的用顶轴
+				if (datas.length > 1 && datas.length - 1 === index && !xflag) {
+					xAxisIndex = 1
+				}
+			}
+			return {
+				...item,
+				yAxisIndex: yAxisIndex,
+				xAxisIndex: xAxisIndex
+			}
+
+		})
+		return newData
+	}
+
 	/**
 	 *  图层关系关联 子组件获取到folderId
 	 *  @param {elements}  
@@ -307,7 +411,7 @@ const install = (Vue, vm) => {
 			if (element.type === 'folder') {
 				element.child.data.forEach(item => {
 					const index = elements.findIndex(ele => ele.id === item)
-				if(index != -1) {
+					if (index != -1) {
 						elements[index].folderId = element.id
 						elements[index].isChild = true
 
@@ -329,7 +433,9 @@ const install = (Vue, vm) => {
 		getQueryFromString,
 		filterRequestParams,
 		dealTooltip,
-		dealAxisFormatter,
+		dealXAxis,
+		dealYAxis,
+		dealAxisIndex,
 		elementFolderId
 	}
 }