完成上下限调整

src/hooks/chart/render.js

@@ -1,6 +1,6 @@
 // 图渲染逻辑模块
 
-import {onMounted,ref,nextTick} from 'vue'
+import {onMounted,ref,nextTick,reactive} from 'vue'
 import {chartDefaultOpts,scatterXAxis,basicYAxis,basicXAxis,leadUnitEnMap,relevanceUnitEnMap} from './config'
 import Highcharts from 'highcharts/highstock';
 import Boost from 'highcharts/modules/boost'
@@ -25,7 +25,54 @@ let chartData=ref(null)//图的所有数据
 let LangType=ref('zh')//当前图表显示的语言版本
 let RenderDomId=ref('')//图表渲染的domid
 let options=ref(null)//渲染图的数据
+const axisLimitState = reactive({//极值数据
+    leftIndex:-1,//左侧上下限对应下标
+    rightIndex: -1, //右侧上下限对应下标
+    rightTwoIndex: -1,//右2上下限对应下标
+
+    hasLeftAxis:false,
+    hasRightAxis:false,
+    hasRightTwoAxis:false,
+    hasXAxis:false,
+    leftMin:0,
+    leftMax:0,
+    rightMin:0,
+    rightMax:0,
+    rightTwoMin:0,
+    rightTwoMax:0,
+    xMin:0,
+    xMax:0,
+})
+
+export function useChartRender(){
+    return {
+        options,
+        axisLimitState,
+        chartRender,
+    }
+}
+
 export function chartRender({data,renderId,lang='zh',changeLangIsCheck,showChartTitle=true}){
+    // 初始化掉极值数据
+    axisLimitState.leftIndex=-1
+    axisLimitState.rightIndex=-1
+    axisLimitState.rightTwoIndex=-1
+
+    axisLimitState.hasLeftAxis=false
+    axisLimitState.hasRightAxis=false
+    axisLimitState.hasRightTwoAxis=false
+    axisLimitState.hasXAxis=false
+
+    axisLimitState.leftMin=0
+    axisLimitState.leftMax=0
+    axisLimitState.rightMin=0
+    axisLimitState.rightMax=0
+    axisLimitState.rightTwoMin=0
+    axisLimitState.rightTwoMax=0
+    axisLimitState.xMin=0
+    axisLimitState.xMax=0
+
+
     let chartOpt={}
     LangType.value=lang
     RenderDomId.value=renderId
@@ -62,6 +109,8 @@ export function chartRender({data,renderId,lang='zh',changeLangIsCheck,showChart
     ? chartOpt.series.every(_ => _.type === 'scatter') || chartOpt.series.some(_ => _.chartType === 'linear')
     : false ;
     is_linear ?ChartIns=Highcharts.chart(RenderDomId.value,options.value) : ChartIns=Highcharts.stockChart(RenderDomId.value,options.value);
+
+    return ChartIns
 }
 
 
@@ -300,6 +349,10 @@ function setSplineOpt(e){
     let temYLeftIndex=data.findIndex((item) => item.IsAxis===1)
     let temYRightIndex=data.findIndex((item) => !item.IsAxis)
     let temYRightTwoIndex = data.findIndex((item) => item.IsAxis===2)
+    axisLimitState.leftIndex=temYLeftIndex
+    axisLimitState.rightIndex=temYRightIndex
+    axisLimitState.rightTwoIndex=temYRightTwoIndex
+
 
     let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间
 
@@ -421,15 +474,25 @@ function setSplineOpt(e){
 
     yAxis.forEach(item=>{
         if(item.IsAxis===1){//左轴
+            axisLimitState.hasLeftAxis=true
+            axisLimitState.leftMin=data[temYLeftIndex].MinData
+            axisLimitState.leftMax=data[temYLeftIndex].MaxData
 
             // item.min=getAxisMaxOrMin(temYLeftArr,'min')
             // item.max=getAxisMaxOrMin(temYLeftArr,'max')
             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
+
             item.min=data[temYRightTwoIndex].MinData
             item.max=data[temYRightTwoIndex].MaxData
         }else{
+            axisLimitState.hasRightAxis=true
+            axisLimitState.rightMin=data[temYRightIndex].MinData
+            axisLimitState.rightMax=data[temYRightIndex].MaxData
 
             // item.min=getAxisMaxOrMin(temYRightArr,'min')
             // item.max=getAxisMaxOrMin(temYRightArr,'max')
@@ -449,6 +512,10 @@ function setSplineOpt(e){
 
 //季节图
 function setSeasonOpt(e){
+    axisLimitState.leftIndex=0
+    axisLimitState.rightIndex=-1
+    axisLimitState.rightTwoIndex=-1
+
     let chartData={}
     const data=e.EdbInfoList[0]
     const calendarType=e.ChartInfo.Calendar||'公历'
@@ -633,6 +700,10 @@ function setSeasonOpt(e){
     chartData.series=series
     chartData.yAxis=yAxis
     chartData.rangeSelector=rangeSelector
+    // 设置坐标轴极值
+    axisLimitState.hasLeftAxis=true
+    axisLimitState.leftMin=Number(data.MinData)
+    axisLimitState.leftMax=Number(data.MaxData)
 
     // 季节图x轴显示月/日
     let xAxis={
@@ -740,6 +811,10 @@ function setStackOrCombinChart(e){
         temYRightTwoIndex = [3,4].includes(e.ChartInfo.ChartType) 
             ? -1
             : data.findIndex((item) => item.IsAxis===2);
+        
+        axisLimitState.leftIndex=temYLeftIndex
+        axisLimitState.rightIndex=temYRightIndex
+        axisLimitState.rightTwoIndex=temYRightTwoIndex
 
         let dynamic_title = item.EdbName;
         let dynamic_arr = newData.filter(
@@ -854,12 +929,24 @@ function setStackOrCombinChart(e){
 
     yAxis.forEach(item=>{
         if(item.IsAxis === 1){//左轴
+            axisLimitState.hasLeftAxis=true
+            axisLimitState.leftMin=data[temYLeftIndex].MinData
+            axisLimitState.leftMax=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
+
             item.min=data[temYRightTwoIndex].MinData
             item.max=data[temYRightTwoIndex].MaxData
         }else{
+            axisLimitState.hasRightAxis=true
+            axisLimitState.rightMin=data[temYRightIndex].MinData
+            axisLimitState.rightMax=data[temYRightIndex].MaxData
+
             item.min=data[temYRightIndex].MinData
             item.max=data[temYRightIndex].MaxData
         }
@@ -876,6 +963,10 @@ function setStackOrCombinChart(e){
 
 /* 散点图 第一个指标值为x轴 第二个指标为y轴*/
 function setScatterOptions(data){
+    axisLimitState.leftIndex=0
+    axisLimitState.rightIndex=-1
+    axisLimitState.rightTwoIndex=-1
+
     const dataList=data.EdbInfoList
     const { ChartInfo } = data;
 
@@ -1095,11 +1186,18 @@ function initBarData(data){
 
     let xData = XEdbIdValue.map(_ => EdbInfoList.find(edb => edb.EdbInfoId===_).EdbAliasName)
     // console.log(xData)
+    axisLimitState.leftIndex=-1
+    axisLimitState.rightIndex=-1
+    axisLimitState.rightTwoIndex=-1
 
     barDateList.value = YDataList;
     barXData.value = xData;
     barEdbData.value = EdbInfoList;
 
+    axisLimitState.hasLeftAxis=true
+    axisLimitState.leftMin=Number(ChartInfo.LeftMin)
+    axisLimitState.leftMax=Number(ChartInfo.LeftMax)
+
     axisLimitData.leftMin=Number(ChartInfo.LeftMin)
     axisLimitData.leftMax=Number(ChartInfo.LeftMax)
 
@@ -1113,9 +1211,13 @@ const commodityXData = ref([]);//商品价格图的x轴
 const commodityEdbList = ref([]);//商品价格图的表格数据 只用于取值
 /* 商品价格曲线设置 绘图逻辑同奇怪柱形图*/
 const setCommodityChart = (leftMin,leftMax) => {
-    
+    axisLimitState.leftIndex=-1
+    axisLimitState.rightIndex=-1
+    axisLimitState.rightTwoIndex=-1
+
     let seriesData = [];
     const data = _.cloneDeep(commodityChartData.value);
+    console.log(data);
 
     //x轴
     let xAxis = {
@@ -1263,11 +1365,15 @@ function filterInvalidData(item){
     return arr;
 }
 function initCommodityData(data){
-    const { XDataList,YDataList,EdbInfoList,ChartInfo } = data;
+    const { XDataList,YDataList,EdbInfoList,ChartInfo,DataResp } = data;
 
     commodityEdbList.value = EdbInfoList;
-    commodityChartData.value = YDataList;
-    commodityXData.value = XDataList;
+    commodityChartData.value = ChartInfo.Source===5?DataResp.YDataList:YDataList
+    commodityXData.value = ChartInfo.Source===5?DataResp.XDataList:XDataList
+
+    axisLimitState.hasLeftAxis=true
+    axisLimitState.leftMin=Number(ChartInfo.LeftMin)
+    axisLimitState.leftMax=Number(ChartInfo.LeftMax)
 
     return setCommodityChart(ChartInfo.LeftMin,ChartInfo.LeftMax);
 }
@@ -1275,6 +1381,9 @@ function initCommodityData(data){
 
 //相关性图表
 function initRelevanceChart(data){
+    axisLimitState.leftIndex=-1
+    axisLimitState.rightIndex=-1
+    axisLimitState.rightTwoIndex=-1
     // 处理X轴
     let xAxis={
         categories: data.XEdbIdValue,
@@ -1390,12 +1499,23 @@ function initRelevanceChart(data){
 
 /* 截面散点图设置 sectionScatterData */
 function setSectionScatterChart({DataResp}) {
+    axisLimitState.leftIndex=-1
+    axisLimitState.rightIndex=-1
+    axisLimitState.rightTwoIndex=-1
+
     const { DataList,XName,XNameEn,XUnitName,XUnitNameEn,YName,YNameEn,YUnitName,YUnitNameEn } = DataResp;
     const leftMin=Number(DataResp.YMinValue)
     const leftMax=Number(DataResp.YMaxValue)
     const xMin=Number(DataResp.XMinValue)
     const xMax=Number(DataResp.XMaxValue)
 
+    axisLimitState.hasLeftAxis=true
+    axisLimitState.hasXAxis=true
+    axisLimitState.leftMin=leftMin
+    axisLimitState.leftMax=leftMax
+    axisLimitState.xMin=xMin
+    axisLimitState.xMax=xMax
+
     //y轴
     let yAxis = {
         ...basicYAxis,

src/views/myETA/ChartDetail.vue

@@ -10,12 +10,15 @@ import {
     apiChartDel
 } from '@/api/myETA'
 import { useRoute, useRouter } from 'vue-router'
-import {chartRender} from '@/hooks/chart/render'
+import {useChartRender} from '@/hooks/chart/render'
 import {yearSelectOpt,sameOptionType} from '@/hooks/chart/config'
 import EDBInfo from './components/EDBInfo.vue'
 import moment from 'moment'
 import { showToast,showDialog} from 'vant'
 import ChartSaveOther from './components/ChartSaveOther.vue'
+import _ from 'lodash';
+
+const {options,axisLimitState,chartRender}=useChartRender()
 
 
 const route=useRoute()
@@ -50,11 +53,14 @@ function handleSwitchChart(type){
 }
 
 // 获取图详情
+let chartInfoData=null
 let chartInfo=ref(null)
 let edbList=ref([])//指标数据
 async function getChartInfo(){
     const res=await apiChartInfoByCode({UniqueCode:chartCode})
     if(res.Ret!==200) return
+    chartInfoData=res.Data
+
     chartInfo.value=res.Data.ChartInfo
     if(res.Data.ChartInfo.Source===2){
         edbList.value=[res.Data.EdbInfoList[0]]
@@ -164,7 +170,7 @@ function handleSeasonTypeChange(type){
 
 // 上下限调整
 let showLimitPop=ref(false)
-let axisLimitData=reactive({//左右轴极值
+let axisLimitDataTem=reactive({//左右轴极值
     min:'-99999999999999999',
     leftMin:0,
     leftMax:0,
@@ -175,7 +181,86 @@ let axisLimitData=reactive({//左右轴极值
     xMin:0,
     xMax:0,
 })
+function handleShowAxisLimitOpt(){
+    axisLimitDataTem.leftMin=axisLimitState.leftMin
+    axisLimitDataTem.leftMax=axisLimitState.leftMax
+
+    axisLimitDataTem.rightMin=axisLimitState.rightMin
+    axisLimitDataTem.rightMax=axisLimitState.rightMax
+
+    axisLimitDataTem.rightTwoMin=axisLimitState.rightTwoMin
+    axisLimitDataTem.rightTwoMax=axisLimitState.rightTwoMax
+
+    axisLimitDataTem.xMin=axisLimitState.xMin
+    axisLimitDataTem.xMax=axisLimitState.xMax
+
+    showLimitPop.value=true
+}
+// 极限修改确定
+function handleConfirmLimitChange(){
+    const data=_.cloneDeep(chartInfoData)
+
+    // 修改左轴极限
+    if(axisLimitState.hasLeftAxis){
+        if(axisLimitState.leftIndex!==-1){
+            data.EdbInfoList[axisLimitState.leftIndex].MinData=axisLimitDataTem.leftMin
+            data.EdbInfoList[axisLimitState.leftIndex].MaxData=axisLimitDataTem.leftMax
+        }else{
+            // 柱形图 取的ChartInfo中的极值
+            if(data.ChartInfo.ChartType ===7){
+                data.ChartInfo.LeftMin=axisLimitDataTem.leftMin
+                data.ChartInfo.LeftMax=axisLimitDataTem.leftMax
+            }
+            // 商品价格曲线
+            if(data.ChartInfo.ChartType ===8){
+                data.ChartInfo.LeftMin=axisLimitDataTem.leftMin
+                data.ChartInfo.LeftMax=axisLimitDataTem.leftMax
+            }
+
+
+            // 截面散点 取的DataResp
+            if(data.ChartInfo.ChartType ===10){
+                data.DataResp.YMinValue=axisLimitDataTem.leftMin
+                data.DataResp.YMaxValue=axisLimitDataTem.leftMax
+            }
+        }
+    }
 
+    // 修改右轴极限
+    if(axisLimitState.hasRightAxis){
+        if(axisLimitState.rightIndex!==-1){
+            data.EdbInfoList[axisLimitState.rightIndex].MinData=axisLimitDataTem.rightMin
+            data.EdbInfoList[axisLimitState.rightIndex].MaxData=axisLimitDataTem.rightMax
+        }
+    }
+
+    //修改右2轴极限
+    if(axisLimitState.hasRightTwoAxis){
+        if(axisLimitState.rightTwoIndex!==-1){
+            data.EdbInfoList[axisLimitState.rightTwoIndex].MinData=axisLimitDataTem.rightTwoMin
+            data.EdbInfoList[axisLimitState.rightTwoIndex].MaxData=axisLimitDataTem.rightTwoMax
+        }
+    }
+
+    // 修改X轴极限
+    if(axisLimitState.hasXAxis){
+        // 截面散点 取的DataResp
+        if(data.ChartInfo.ChartType ===10){
+            data.DataResp.XMinValue=axisLimitDataTem.xMin
+            data.DataResp.XMaxValue=axisLimitDataTem.xMax
+        }
+    }
+
+    chartRender({
+        data:data,
+        renderId:'chart-box',
+        lang:'zh',
+        changeLangIsCheck:false,
+        showChartTitle:false
+    })
+
+    showLimitPop.value=false
+}
 
 // 显示指标详情
 let showEDB=ref(false)
@@ -336,7 +421,7 @@ let showSaveChartOther=ref(false)
                 <img class="icon" style="transform: rotate(180deg);" src="@/assets/imgs/icon_arrow.png" alt="">
                 <div>下一张</div>
             </div>
-            <div class="item" @click="showLimitPop=true">
+            <div class="item" @click="handleShowAxisLimitOpt" v-if="chartInfo.Source!=3&&chartInfo.ChartType!=8">
                 <img class="icon" src="@/assets/imgs/myETA/icon_limit.png" alt="">
                 <div>上下限</div>
             </div>
@@ -400,79 +485,79 @@ let showSaveChartOther=ref(false)
             </div>
             <div class="content">
                 <!-- 左轴 -->
-                <div class="item-box">
+                <div class="item-box" v-if="axisLimitState.hasLeftAxis">
                     <span class="lable-text">左轴</span>
                     <div class="input-box">
                         <div class="item">
                             <div class="type-text">上限</div>
                             <div class="step-box">
-                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.leftMax" />
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.leftMax" />
                             </div>
                         </div>
                         <div class="item">
                             <div class="type-text">下限</div>
                             <div class="step-box">
-                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.leftMin" />
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.leftMin" />
                             </div>
                         </div>
                     </div>
                 </div>
                 <!-- 右轴 -->
-                <div class="item-box">
+                <div class="item-box" v-if="axisLimitState.hasRightAxis">
                     <span class="lable-text">右轴</span>
                     <div class="input-box">
                         <div class="item">
                             <div class="type-text">上限</div>
                             <div class="step-box">
-                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.rightMax" />
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.rightMax" />
                             </div>
                         </div>
                         <div class="item">
                             <div class="type-text">下限</div>
                             <div class="step-box">
-                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.rightMin" />
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.rightMin" />
                             </div>
                         </div>
                     </div>
                 </div>
                 <!-- 右二轴 -->
-                <div class="item-box">
+                <div class="item-box" v-if="axisLimitState.hasRightTwoAxis">
                     <span class="lable-text">右2轴</span>
                     <div class="input-box">
                         <div class="item">
                             <div class="type-text">上限</div>
                             <div class="step-box">
-                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.rightTwoMax" />
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.rightTwoMax" />
                             </div>
                         </div>
                         <div class="item">
                             <div class="type-text">下限</div>
                             <div class="step-box">
-                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.rightTwoMin" />
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.rightTwoMin" />
                             </div>
                         </div>
                     </div>
                 </div>
                 <!-- x轴 -->
-                <div class="item-box">
+                <div class="item-box" v-if="axisLimitState.hasXAxis">
                     <span class="lable-text">X轴</span>
                     <div class="input-box">
                         <div class="item">
                             <div class="type-text">上限</div>
                             <div class="step-box">
-                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.xMax" />
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.xMax" />
                             </div>
                         </div>
                         <div class="item">
                             <div class="type-text">下限</div>
                             <div class="step-box">
-                                <van-stepper :min="axisLimitData.min" v-model.number="axisLimitData.xMin" />
+                                <van-stepper input-width="60px" :min="axisLimitDataTem.min" v-model.number="axisLimitDataTem.xMin" />
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="bot-btn-box">确定</div>
+            <div class="bot-btn-box" @click="handleConfirmLimitChange">确定</div>
         </div>
     </van-popup>