Merge branch 'master' of http://8.136.199.33:3000/eta_front/eta_chart_front

src/hooks/chart/useChartRender.ts

@@ -42,9 +42,13 @@ interface StateProps {
     max?: number;
     x_min?:number;
     x_max?:number;
+    rightMin?:number;
+    rightMax?:number;
+    rightTwoMin?:number;
+    rightTwoMax?:number;
   }
   dataList: any[];
-  chartInfo: any
+  chartInfo: any;
 }
 
 /**
@@ -69,7 +73,14 @@ interface StateProps {
 const state = reactive<StateProps>({
   chartInfo: {},
   dataList: [],
-  chartLimit: {},
+  chartLimit: {
+    min:0, //左轴上下限
+    max:0,
+    rightMin:0,//右轴上下限
+    rightMax:0,
+    rightTwoMin:0,//右二轴上下限
+    rightTwoMax:0,
+  },
 })
 const language = ref('')
 const routeQuery = ref<any>({});//路由参
@@ -86,6 +97,7 @@ export const useChartRender = (Data,lang='ch',) => {
 
   //eta图
   if (Data.ChartInfo.Source === 1) {
+    setLimitData(state.dataList)
     const typeMap = {
       1: setDefaultLineOptions,
       2: setSeasonOptions,
@@ -142,6 +154,26 @@ const setDefaultLineOptions = () => {
     let sameSideIndex = chartData.findIndex(
       (i:IDataProps) => i.IsAxis === item.IsAxis
     );
+    //获取对应轴的上下限
+    //非ETA图库图表也不设置自定义上下限,相关性和统计特征也会用到曲线图
+    //若chartInfo.Source为1，需在之前调用setLimitData
+    const isETASource = state.chartInfo.Source===1
+    let minLimit = 0,maxLimit = 0
+    if(isETASource){
+        const limitMap = {
+            0:['rightMin','rightMax'],
+            1:['min','max'],
+            2:['rightTwoMin','rightTwoMax']
+        }
+        if(limitMap[item.IsAxis]){
+            minLimit = state.chartLimit[`${limitMap[item.IsAxis][0]}`]||0
+            maxLimit = state.chartLimit[`${limitMap[item.IsAxis][1]}`]||0
+        }
+    }else{
+        minLimit = dataList[sameSideIndex].MinData
+        maxLimit = dataList[sameSideIndex].MaxData
+    }
+    
 
     //y轴
     const textZh = item.ConvertUnit||item.Unit
@@ -173,8 +205,8 @@ const setDefaultLineOptions = () => {
       },
       opposite: [0,2].includes(item.IsAxis),
       reversed: item.IsOrder,
-      min: Number(chartData[sameSideIndex].MinData),
-      max: Number(chartData[sameSideIndex].MaxData),
+      min: Number(minLimit),
+      max: Number(maxLimit),
       tickWidth: 1,
       visible: sameSideIndex === index,
       plotBands: setAxisPlotAreas(item.IsAxis),
@@ -302,6 +334,11 @@ const setSeasonOptions = () => {
   let seasonYdata:any[] = [],
     seasonData:any[] = [];
 
+    //获取对应轴的上下限
+    let minLimit = 0,maxLimit = 0
+    minLimit = state.chartLimit.min||0
+    maxLimit = state.chartLimit.max||0
+
     /* 主题样式*/
   const chartTheme =  state.chartInfo.ChartThemeStyle ? JSON.parse(state.chartInfo.ChartThemeStyle) : null;
 
@@ -354,8 +391,8 @@ const setSeasonOptions = () => {
         ...chartTheme&&chartTheme.yAxisOptions.style
       },
     },
-    max: Number(chartData.MaxData),
-    min: Number(chartData.MinData),
+    max: Number(maxLimit),
+    min: Number(minLimit),
     plotBands: setAxisPlotAreas(1),
     plotLines: setAxisPlotLines(1)
   }];
@@ -447,6 +484,17 @@ const setStackOrCombinChart = () => {
     ? -1
     : dataList.findIndex(item => item.IsAxis===2);
 
+    //获取对应轴的上下限
+    let minLimit = 0,maxLimit = 0
+    const limitMap = {
+        0:['rightMin','rightMax'],
+        1:['min','max'],
+        2:['rightTwoMin','rightTwoMax']
+    }
+    if(limitMap[item.IsAxis]){
+        minLimit = state.chartLimit[`${limitMap[item.IsAxis][0]}`]||0
+        maxLimit = state.chartLimit[`${limitMap[item.IsAxis][1]}`]||0
+    }
     //y轴
     const textZh = item.ConvertUnit||item.Unit
     const textEn = textZh?item.ConvertEnUnit||item.UnitEn||item.ConvertUnit||item.Unit:''
@@ -478,8 +526,8 @@ const setStackOrCombinChart = () => {
       },
       opposite: [0,2].includes(item.IsAxis),
       reversed: item.IsOrder,
-      min: Number(chartData[sameSideIndex].MinData),
-      max: Number(chartData[sameSideIndex].MaxData),
+      min: Number(minLimit),
+      max: Number(maxLimit),
       tickWidth: sameSideIndex !== index ? 0 : 1,
       visible: serie_yIndex === index && sameSideIndex ===index,
       plotBands: setAxisPlotAreas(item.IsAxis),
@@ -616,11 +664,16 @@ const setScatterChartOptions = () => {
     }
   }
 
+
   const { IsOrder,ChartColor } = dataList[0];
   const textYZh = dataList[1].ConvertUnit||dataList[1].Unit
   const textYEn = textYZh?dataList[1].ConvertEnUnit||dataList[1].UnitEn||dataList[1].ConvertUnit||dataList[1].Unit:''
   const textX = dataList[0].ConvertUnit||dataList[0].Unit
   const textXEn = textX?dataList[0].ConvertEnUnit||dataList[0].UnitEn||dataList[0].ConvertUnit||dataList[0].Unit:''
+  //获取对应轴的上下限
+  let minLimit = 0,maxLimit = 0
+  minLimit = state.chartLimit.min||0
+  maxLimit = state.chartLimit.max||0
   //y轴
   let yAxis = {
     title: {
@@ -647,8 +700,8 @@ const setScatterChartOptions = () => {
     },
     opposite: false,
     reversed: IsOrder,
-    min: Number(dataList[1].MinData),
-    max: Number(dataList[1].MaxData),
+    min: Number(minLimit),
+    max: Number(maxLimit),
     tickWidth: 1,
     tickLength: 5,
     lineWidth: 1,
@@ -1937,3 +1990,128 @@ const setAxisPlotAreas = (axis: number, axisType: any = null) => {
 
   return plotBands;
 };
+
+/* ----自定义上下限相关--- */
+const setLimitData = (tableData:any=[])=>{
+    const {
+        //左右轴极值字段 
+        LeftMin=0,LeftMax=0,
+        RightMin=0,RightMax=0,
+        Right2Min=0,Right2Max=0,
+        MinMaxSave
+    } = state.chartInfo
+    if(MinMaxSave){
+        state.chartLimit.min = Number(LeftMin)
+        state.chartLimit.max = Number(LeftMax)
+        state.chartLimit.rightMin = Number(RightMin)
+        state.chartLimit.rightMax = Number(RightMax)
+        state.chartLimit.rightTwoMin = Number(Right2Min)
+        state.chartLimit.rightTwoMax = Number(Right2Max)
+        //若用户修改过，则检测轴的上下限是否为空，若为空，则需要计算对应轴的上下限
+        checkLimit(tableData)
+    }else{
+        calcYAxislimit(tableData)
+    }
+}
+const checkLimit = (tableData:any=[])=>{
+    //散点图单独处理
+    if(state.chartInfo.ChartType===5){
+        if(tableData[1]){
+            if(Number(state.chartLimit.min)===0&&Number(state.chartLimit.max)===0){
+                state.chartLimit.min = tableData[1].MinData
+                state.chartLimit.max = tableData[1].MaxData
+            }
+        }
+        return 
+    }
+    //若轴的上下限均为0,则不管用户有没有修改过,都重新赋值
+    if(Number(state.chartLimit.min)===0&&Number(state.chartLimit.max)===0){
+        const leftData = tableData.filter((i:IDataProps)=>i.IsAxis===1).map((i:IDataProps)=>[Number(i.MinData),Number(i.MaxData)])
+        if(leftData.length){
+            const {Max,Min} = calcLimit(leftData.flat())
+            state.chartLimit.min = Min
+            state.chartLimit.max = Max
+        }else{
+            state.chartLimit.min = 0
+            state.chartLimit.max = 0
+        }
+    }
+    if(Number(state.chartLimit.rightMin)===0&&Number(state.chartLimit.rightMax)===0){
+        const rightData = tableData.filter((i:IDataProps) => !i.IsAxis).map((i:IDataProps)=>[Number(i.MinData),Number(i.MaxData)])
+        if(rightData.length){
+            const {Max,Min} = calcLimit(rightData.flat())
+            state.chartLimit.rightMin = Min
+            state.chartLimit.rightMax = Max
+        }else{
+            state.chartLimit.rightMin = 0
+            state.chartLimit.rightMax = 0
+        }
+    }
+    if(Number(state.chartLimit.rightTwoMin)===0&&Number(state.chartLimit.rightTwoMax)===0){
+        const rightTwoData = tableData.filter((i:IDataProps)=>i.IsAxis===2).map((i:IDataProps)=>[Number(i.MinData),Number(i.MaxData)])
+        if(rightTwoData.length){
+            const {Max,Min} = calcLimit(rightTwoData.flat())
+            state.chartLimit.rightTwoMin = Min
+            state.chartLimit.rightTwoMax = Max
+        }else{
+            state.chartLimit.rightTwoMin = 0
+            state.chartLimit.rightTwoMax = 0
+        }
+    }
+}
+/* 计算y轴上下限 */
+const calcYAxislimit = (tableData:any=[])=>{
+    //散点图单独处理
+    if(state.chartInfo.ChartType===5){
+        if(tableData[1]){
+            state.chartLimit.min = tableData[1].MinData
+            state.chartLimit.max = tableData[1].MaxData
+        }
+        return 
+    }
+    //分组
+    const leftData = tableData.filter((i:IDataProps) => i.IsAxis === 1).map((i:IDataProps) => [Number(i.MinData), Number(i.MaxData)])
+    const rightData = tableData.filter((i:IDataProps) => !i.IsAxis).map((i:IDataProps) => [Number(i.MinData), Number(i.MaxData)])
+    const rightTwoData = tableData.filter((i:IDataProps) => i.IsAxis === 2).map((i:IDataProps) => [Number(i.MinData), Number(i.MaxData)])
+    //计算最大最小值
+    if (leftData.length) {
+        const {
+            Max,
+            Min
+        } = calcLimit(leftData.flat())
+        state.chartLimit.min = Min
+        state.chartLimit.max = Max
+    } else {
+        state.chartLimit.min = 0
+        state.chartLimit.max = 0
+    }
+    if (rightData.length) {
+        const {
+            Max,
+            Min
+        } = calcLimit(rightData.flat())
+        state.chartLimit.rightMin = Min
+        state.chartLimit.rightMax = Max
+    } else {
+        state.chartLimit.rightMin = 0
+        state.chartLimit.rightMax = 0
+    }
+    if (rightTwoData.length) {
+        const {
+            Max,
+            Min
+        } = calcLimit(rightTwoData.flat())
+        state.chartLimit.rightTwoMin = Min
+        state.chartLimit.rightTwoMax = Max
+    } else {
+        state.chartLimit.rightTwoMin = 0
+        state.chartLimit.rightTwoMax = 0
+    }
+}
+const calcLimit = (arr:any)=>{
+    return {
+        Max: Math.max(...arr),
+        Min: Math.min(...arr)
+    }
+}
+/*-------------------- */