Эх сурвалжийг харах

兼容ETA1.5.8,自定义上下限

cxmo 1 жил өмнө
parent
commit
a400cf8d5a

+ 168 - 16
src/hooks/chart/useChartRender.ts

@@ -44,7 +44,10 @@ interface StateProps {
     x_max?:number;
   }
   dataList: any[];
-  chartInfo: any
+  chartInfo: any;
+  leftLimitData:any[];
+  rightLimitData:any[];
+  rightTwoLimitData:any[];
 }
 
 /**
@@ -70,6 +73,9 @@ const state = reactive<StateProps>({
   chartInfo: {},
   dataList: [],
   chartLimit: {},
+  leftLimitData:[0,0],//左轴上下限
+  rightLimitData:[0,0],//右轴上下限
+  rightTwoLimitData:[0,0],//右二轴上下限
 })
 const language = ref('')
 const routeQuery = ref<any>({});//路由参
@@ -86,6 +92,7 @@ export const useChartRender = (Data,lang='ch',) => {
 
   //eta图
   if (Data.ChartInfo.Source === 1) {
+    setLimitData(state.dataList)
     const typeMap = {
       1: setDefaultLineOptions,
       2: setSeasonOptions,
@@ -142,9 +149,19 @@ const setDefaultLineOptions = () => {
     let sameSideIndex = chartData.findIndex(
       (i:IDataProps) => i.IsAxis === item.IsAxis
     );
+    //获取对应轴的上下限
+    let minLimit = 0,maxLimit = 0
+    const limitMap = {
+        0:state.rightLimitData||[],
+        1:state.leftLimitData||[],
+        2:state.rightTwoLimitData||[]
+    }
+    minLimit = limitMap[item.IsAxis][1]||0
+    maxLimit = limitMap[item.IsAxis][0]||0
 
     //y轴
-    let textEn = item.Unit?item.UnitEn:''
+    const textZh = item.ConvertUnit||item.Unit
+    const textEn = textZh?item.ConvertEnUnit||item.UnitEn||item.ConvertUnit||item.Unit:''
     let yItem = {
       ...basicYAxis,
       labels: {
@@ -159,7 +176,7 @@ const setDefaultLineOptions = () => {
         }
       },
       title: {
-        text:language.value=='ch'?sameSideIndex !== index ? '' : `${item.Unit}`:textEn,
+        text:language.value=='ch'?sameSideIndex !== index ? '' : `${textZh}`:textEn,
         style:{
           ...chartTheme&&chartTheme.yAxisOptions.style
         },
@@ -172,8 +189,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),
@@ -301,6 +318,11 @@ const setSeasonOptions = () => {
   let seasonYdata:any[] = [],
     seasonData:any[] = [];
 
+    //获取对应轴的上下限
+    let minLimit = 0,maxLimit = 0
+    minLimit = state.leftLimitData[1]||0
+    maxLimit = state.leftLimitData[0]||0
+
     /* 主题样式*/
   const chartTheme =  state.chartInfo.ChartThemeStyle ? JSON.parse(state.chartInfo.ChartThemeStyle) : null;
 
@@ -327,6 +349,8 @@ const setSeasonOptions = () => {
   }
 
   //y轴
+  const textZh = chartData.ConvertUnit||chartData.Unit
+  const textEn = textZh?chartData.ConvertEnUnit||chartData.UnitEn||chartData.ConvertUnit||chartData.Unit:''
   seasonYdata = [{
     ...defaultOpts.yAxis,
     labels: {
@@ -340,7 +364,7 @@ const setSeasonOptions = () => {
       }
     },
     title: {
-      text:language.value=='ch'?`${chartData.Unit}`:chartData.UnitEn,
+      text:language.value=='ch'?`${textZh}`:textEn,
       align: 'high',
       rotation: 0,
       y: -12,
@@ -351,8 +375,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)
   }];
@@ -444,8 +468,19 @@ const setStackOrCombinChart = () => {
     ? -1
     : dataList.findIndex(item => item.IsAxis===2);
 
+    //获取对应轴的上下限
+    let minLimit = 0,maxLimit = 0
+    const limitMap = {
+        0:state.rightLimitData||[],
+        1:state.leftLimitData||[],
+        2:state.rightTwoLimitData||[]
+    }
+    minLimit = limitMap[item.IsAxis][1]||0
+    maxLimit = limitMap[item.IsAxis][0]||0
+    console.log('min?max',minLimit,maxLimit)
     //y轴
-    let textEn = item.Unit?item.UnitEn:''
+    const textZh = item.ConvertUnit||item.Unit
+    const textEn = textZh?item.ConvertEnUnit||item.UnitEn||item.ConvertUnit||item.Unit:''
     let yItem = {
       ...basicYAxis,
       labels: {
@@ -460,7 +495,7 @@ const setStackOrCombinChart = () => {
         },
       },
       title: {
-        text:language.value=='ch'?sameSideIndex !== index ? '' : `${item.Unit}`:textEn,
+        text:language.value=='ch'?sameSideIndex !== index ? '' : `${textZh}`:textEn,
         // text: null,
         align: 'high',
         rotation: 0,
@@ -474,8 +509,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),
@@ -612,11 +647,20 @@ 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.leftLimitData[1]||0
+  maxLimit = state.leftLimitData[0]||0
   //y轴
   let yAxis = {
     title: {
-      text: language.value=='ch'?`${dataList[1].Unit}`:dataList[1].Unit?dataList[1].UnitEn:'',
+      text: language.value=='ch'?`${textYZh}`:textYEn,
       // text: null,
       align: 'high',
       rotation: 0,
@@ -639,8 +683,8 @@ const setScatterChartOptions = () => {
     },
     opposite: false,
     reversed: IsOrder,
-    min: Number(dataList[0].MinData),
-    max: Number(dataList[0].MaxData),
+    min: Number(minLimit),
+    max: Number(maxLimit),
     tickWidth: 1,
     tickLength: 5,
     lineWidth: 1,
@@ -682,7 +726,7 @@ const setScatterChartOptions = () => {
     xAxis: {
       ...scatterXAxis,
       title: {
-        text: language.value=='ch'?`${dataList[0].Unit}`:dataList[0].Unit?dataList[0].UnitEn:'',
+        text: language.value=='ch'?`${textX}`:textXEn,
         align: 'high',
         rotation: 0,
         x: 0,
@@ -1915,3 +1959,111 @@ 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.leftLimitData = [Number(LeftMax),Number(LeftMin)]
+        state.rightLimitData = [Number(RightMax),Number(RightMin)]
+        state.rightTwoLimitData = [Number(Right2Max),Number(Right2Min)]
+        //若用户修改过,则检测轴的上下限是否为空,若为空,则需要计算对应轴的上下限
+        checkLimit(tableData)
+    }else{
+        calcYAxislimit(tableData)
+    }
+}
+const checkLimit = (tableData:any=[])=>{
+    //散点图单独处理
+    if(state.chartInfo.ChartType===5){
+        if(tableData[1]){
+            if(Number(state.leftLimitData[0])===0&&Number(state.leftLimitData[1])===0){
+                state.leftLimitData = [tableData[1].MaxData,tableData[1].MinData]
+            }
+        }
+        return 
+    }
+    //若轴的上下限均为0,则不管用户有没有修改过,都重新赋值
+    if(Number(state.leftLimitData[0])===0&&Number(state.leftLimitData[1])===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.leftLimitData = [Max,Min]
+        }else{
+            state.leftLimitData = [0,0]
+        }
+    }
+    if(Number(state.rightLimitData[0])===0&&Number(state.rightLimitData[1])===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.rightLimitData = [Max,Min]
+        }else{
+            state.rightLimitData = [0,0]
+        }
+    }
+    if(Number(state.rightTwoLimitData[0])===0&&Number(state.rightTwoLimitData[1])===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.rightTwoLimitData = [Max,Min]
+        }else{
+            state.rightTwoLimitData = [0,0]
+        }
+    }
+}
+/* 计算y轴上下限 */
+const calcYAxislimit = (tableData:any=[])=>{
+    //散点图单独处理
+    if(state.chartInfo.ChartType===5){
+        if(tableData[1]){
+            state.leftLimitData = [tableData[1].MaxData,tableData[1].MinData]
+        }
+        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.leftLimitData = [Max, Min]
+    } else {
+        state.leftLimitData = [0, 0]
+    }
+    if (rightData.length) {
+        const {
+            Max,
+            Min
+        } = calcLimit(rightData.flat())
+        state.rightLimitData = [Max, Min]
+    } else {
+        state.rightLimitData = [0, 0]
+    }
+    if (rightTwoData.length) {
+        const {
+            Max,
+            Min
+        } = calcLimit(rightTwoData.flat())
+        state.rightTwoLimitData = [Max, Min]
+    } else {
+        state.rightTwoLimitData = [0, 0]
+    }
+}
+const calcLimit = (arr:any)=>{
+    return {
+        Max: Math.max(...arr),
+        Min: Math.min(...arr)
+    }
+}
+/*-------------------- */