自定义上下限设置

src/hooks/chart/render.js

@@ -16,7 +16,6 @@ HighchartsMore(Highcharts)
 Boost(Highcharts)
 
 
-
 /**
  * 渲染图方法
  * @param data 图详情数据
@@ -48,12 +47,19 @@ const axisLimitState = reactive({//极值数据
     xMin:0,
     xMax:0,
 })
+let leftLimitData = ref([0,0]) //左轴上下限
+let rightLimitData = ref([0,0]) //右轴上下限
+let rightTwoLimitData = ref([0,0]) //右二轴上下限
 
 export function useChartRender(){
     return {
         options,
         axisLimitState,
         chartRender,
+        leftLimitData,
+        rightLimitData,
+        rightTwoLimitData,
+        setLimitData
     }
 }
 
@@ -960,6 +966,8 @@ function setStackOrCombinChart(e){
     //有右二轴时排个序 按照左 右 右2的顺序
     let newData = data.some(_ =>_.IsAxis===2) ? changeEdbOrder(data) : data;
 
+
+    const useSalfLimit = ['/myETA/chartdetail','/chartThemeSet'].includes(window.location.pathname)
     newData.forEach((item,index)=>{
 
         //轴位置值相同的下标
@@ -1027,6 +1035,20 @@ function setStackOrCombinChart(e){
         }
         series.push(seriesItemObj)
         
+        let minLimit = 0,maxLimit = 0
+        if(!useSalfLimit){
+            minLimit = chartData[sameSideIndex].MinData
+            maxLimit = chartData[sameSideIndex].MaxData
+        }else{
+            const limitMap = {
+                0:rightLimitData.value||[],
+                1:leftLimitData.value||[],
+                2:rightTwoLimitData.value||[]
+            }
+            minLimit = limitMap[item.IsAxis][1]||0
+            maxLimit = limitMap[item.IsAxis][0]||0
+            console.log('?min,max',minLimit,maxLimit)
+        }
 
         // 设置y轴
         if(item.IsAxis){
@@ -1068,8 +1090,8 @@ function setStackOrCombinChart(e){
             },
             opposite: [0,2].includes(item.IsAxis),
             reversed: item.IsOrder,
-            min: item.MinData,
-            max: item.MaxData,
+            min: Number(minLimit),
+            max: Number(maxLimit),
             tickWidth: sameSideIndex !== index ? 0 : 1,
             visible: serie_yIndex === index && sameSideIndex ===index,
             plotBands: setAxisPlotAreas(item.IsAxis),
@@ -1109,31 +1131,40 @@ function setStackOrCombinChart(e){
         plotLines: setAxisPlotLines(3,'datetime')
     }
     
-
     yAxis.forEach(item=>{
         if(item.IsAxis === 1){//左轴
             axisLimitState.hasLeftAxis=true
-            axisLimitState.leftMin=data[temYLeftIndex].MinData
-            axisLimitState.leftMax=data[temYLeftIndex].MaxData
+            if(!useSalfLimit){
+                axisLimitState.leftMin=data[temYLeftIndex].MinData
+                axisLimitState.leftMax=data[temYLeftIndex].MaxData
 
-            item.min=data[temYLeftIndex].MinData
-            item.max=data[temYLeftIndex].MaxData
+                item.min=data[temYLeftIndex].MinData
+                item.max=data[temYLeftIndex].MaxData
+            }
         }else if (item.IsAxis===2){ // 右2轴
             axisLimitState.hasRightTwoAxis=true
-            axisLimitState.rightTwoMin=data[temYRightTwoIndex].MinData
-            axisLimitState.rightTwoMax=data[temYRightTwoIndex].MaxData
+            if(!useSalfLimit){
+                axisLimitState.rightTwoMin=data[temYRightTwoIndex].MinData
+                axisLimitState.rightTwoMax=data[temYRightTwoIndex].MaxData
 
-            item.min=data[temYRightTwoIndex].MinData
-            item.max=data[temYRightTwoIndex].MaxData
+                item.min=data[temYRightTwoIndex].MinData
+                item.max=data[temYRightTwoIndex].MaxData
+            }
+            
         }else{
             axisLimitState.hasRightAxis=true
-            axisLimitState.rightMin=data[temYRightIndex].MinData
-            axisLimitState.rightMax=data[temYRightIndex].MaxData
+            if(!useSalfLimit){
+                axisLimitState.rightMin=data[temYRightIndex].MinData
+                axisLimitState.rightMax=data[temYRightIndex].MaxData
 
-            item.min=data[temYRightIndex].MinData
-            item.max=data[temYRightIndex].MaxData
+                item.min=data[temYRightIndex].MinData
+                item.max=data[temYRightIndex].MaxData
+            }
+            
         }
     })
+    
+   
 
     return {
         series,
@@ -2197,4 +2228,107 @@ function setRadarChart({DataResp,EdbInfoList,ChartInfo}) {
       yAxis,
       xAxis
     }
-}
+}
+
+/* ----自定义上下限相关--- */
+/* 计算y轴上下限 */
+function calcYAxislimit(tableData=[],ChartInfo){
+    //散点图单独处理
+    if(ChartInfo.ChartType===5){
+        if(tableData[1]){
+            leftLimitData.value = [tableData[1].MaxData,tableData[1].MinData]
+        }
+        return 
+    }
+    //分组
+    const leftData = tableData.filter(i => i.IsAxis === 1).map(i => [Number(i.MinData), Number(i.MaxData)])
+    const rightData = tableData.filter(i => !i.IsAxis).map(i => [Number(i.MinData), Number(i.MaxData)])
+    const rightTwoData = tableData.filter(i => i.IsAxis === 2).map(i => [Number(i.MinData), Number(i.MaxData)])
+    //计算最大最小值
+    if (leftData.length) {
+        const {
+            Max,
+            Min
+        } = calcLimit(leftData.flat())
+        leftLimitData.value = [Max, Min]
+    } 
+    if (rightData.length) {
+        const {
+            Max,
+            Min
+        } = this.calcLimit(rightData.flat())
+        rightLimitData.value = [Max, Min]
+    }
+    if (rightTwoData.length) {
+        const {
+            Max,
+            Min
+        } = this.calcLimit(rightTwoData.flat())
+        rightTwoLimitData.value = [Max, Min]
+    }
+}
+function calcLimit(arr) {
+    return {
+        Max: Math.max(...arr),
+        Min: Math.min(...arr)
+    }
+}
+//图表详情-设置图表上下限
+function setLimitData({EdbInfoList,ChartInfo}){
+    const {
+        //左右轴极值字段 
+        LeftMin=0,LeftMax=0,
+        RightMin=0,RightMax=0,
+        Right2Min=0,Right2Max=0,
+        MinMaxSave
+    } = ChartInfo
+    if(MinMaxSave){
+        leftLimitData.value = [Number(LeftMax),Number(LeftMin)]
+        rightLimitData.value = [Number(RightMax),Number(RightMin)]
+        rightTwoLimitData.value = [Number(Right2Max),Number(Right2Min)]
+        //若用户修改过，则检测轴的上下限是否为空，若为空，则需要计算对应轴的上下限
+        checkLimit(EdbInfoList,ChartInfo)
+    }else{
+        calcYAxislimit(EdbInfoList,ChartInfo)
+    }
+}
+function checkLimit(tableData=[],ChartInfo){
+    //散点图单独处理
+    if(ChartInfo.ChartType===5){
+        if(tableData[1]){
+            if(Number(leftLimitData.value[0])===0&&Number(leftLimitData.value[1])===0){
+                leftLimitData.value = [tableData[1].MaxData,tableData[1].MinData]
+            }
+        }
+        return 
+    }
+    //若轴的上下限均为0,则不管用户有没有修改过,都重新赋值
+    if(Number(leftLimitData.value[0])===0&&Number(leftLimitData.value[1])===0){
+        const leftData = tableData.filter(i=>i.IsAxis===1).map(i=>[Number(i.MinData),Number(i.MaxData)])
+        if(leftData.length){
+            const {Max,Min} = this.calcLimit(leftData.flat())
+            leftLimitData.value = [Max,Min]
+        }else{
+            leftLimitData.value = [0,0]
+        }
+    }
+    if(Number(rightLimitData.value[0])===0&&Number(rightLimitData.value[1])===0){
+        const rightData = tableData.filter(i => !i.IsAxis).map(i=>[Number(i.MinData),Number(i.MaxData)])
+        if(rightData.length){
+            const {Max,Min} = this.calcLimit(rightData.flat())
+            rightLimitData.value = [Max,Min]
+        }else{
+            rightLimitData.value = [0,0]
+        }
+    }
+    if(Number(rightTwoLimitData.value[0])===0&&Number(rightTwoLimitData.value[1])===0){
+        const rightTwoData = tableData.filter(i=>i.IsAxis===2).map(i=>[Number(i.MinData),Number(i.MaxData)])
+        if(rightTwoData.length){
+            const {Max,Min} = this.calcLimit(rightTwoData.flat())
+            rightTwoLimitData.value = [Max,Min]
+        }else{
+            rightTwoLimitData.value = [0,0]
+        }
+    }
+}
+/*-------------------- */

src/views/myETA/ChartDetail.vue

@@ -41,7 +41,7 @@ const isMoreActionShow = computed(()=>{
 }) 
 const { width, height } = useWindowSize()
 const cachedViewsStore=useCachedViewsStore()
-const {options,axisLimitState,chartRender}=useChartRender()
+const {options,axisLimitState,chartRender,leftLimitData,rightLimitData,rightTwoLimitData,setLimitData}=useChartRender()
 
 
 const route=useRoute()
@@ -135,7 +135,7 @@ async function getChartInfo(){
         temStartTime.value=chartState.startTime.split('-')
         temEndTime.value=chartState.endTime.split('-')
     }
-
+    setLimitData(res.Data)
     nextTick(()=>{
         CHARTINS=chartRender({
             data:res.Data,
@@ -273,6 +273,21 @@ let axisLimitDataTem=reactive({//左右轴极值
     xMax:0,
 })
 function handleShowAxisLimitOpt(){
+    //ETA图库的图表使用自定义上下限
+    if(chartInfo.value.Source===1&&![7,10,11].includes(chartInfo.value.ChartType)){
+        console.log('触发')
+        axisLimitDataTem.leftMin=leftLimitData.value[1]
+        axisLimitDataTem.leftMax=leftLimitData.value[0]
+
+        axisLimitDataTem.rightMin=rightLimitData.value[1]
+        axisLimitDataTem.rightMax=rightLimitData.value[0]
+
+        axisLimitDataTem.rightTwoMin=rightTwoLimitData[1]
+        axisLimitDataTem.rightTwoMax=rightTwoLimitData[0]
+
+        showLimitPop.value=true
+        return 
+    }
     axisLimitDataTem.leftMin=axisLimitState.leftMin
     axisLimitDataTem.leftMax=axisLimitState.leftMax
 
@@ -290,6 +305,29 @@ function handleShowAxisLimitOpt(){
 // 极限修改确定
 function handleConfirmLimitChange(){
     const data=_.cloneDeep(chartInfoData)
+    //ETA图库的图表使用自定义上下限
+    if(chartInfo.value.Source===1&&![7,10,11].includes(chartInfo.value.ChartType)){
+        console.log("触发2")
+        if(axisLimitState.hasLeftAxis){
+            leftLimitData.value = [Number(axisLimitDataTem.leftMax),Number(axisLimitDataTem.leftMin)]
+        }
+        if(axisLimitState.hasRightAxis){
+            rightLimitData.value = [Number(axisLimitDataTem.rightMax),Number(axisLimitDataTem.rightMin)]
+        }
+        if(axisLimitState.hasRightTwoAxis){
+            rightTwoLimitData.value = [Number(axisLimitDataTem.rightMax),Number(axisLimitDataTem.rightMin)]
+        }
+        CHARTINS=chartRender({
+            data:data,
+            renderId:'chart-box',
+            lang:'zh',
+            changeLangIsCheck:false,
+            showChartTitle:false
+        })
+
+        showLimitPop.value=false
+        return 
+    }
 
     // 修改左轴极限
     if(axisLimitState.hasLeftAxis){