eta1.9.4 同步mobile的rander.js

src/hooks/chart/render.js

@@ -1,7 +1,7 @@
 // 图渲染逻辑模块
 
 import {onMounted,ref,nextTick,reactive} from 'vue'
-import {chartDefaultOpts,scatterXAxis,basicYAxis,basicXAxis,leadUnitEnMap,relevanceUnitEnMap} from './config'
+import {chartDefaultOpts,scatterXAxis,basicYAxis,basicXAxis,leadUnitEnMap,relevanceUnitEnMap,seasonOptions} from './config'
 import Highcharts from 'highcharts/highstock';
 import HighchartsFormat from 'highcharts';
 import HighchartsMore from 'highcharts/highcharts-more';
@@ -481,11 +481,11 @@ function setChartLang(changeLangIsCheck){
     }
     if([2,3,4].includes(Source)){
         options.value.yAxis.forEach(item => {
-            item.title.text =  LangType.value == 'zh' ? item.title.textZh: item.title.textEn
+            item.title.text =  LangType.value == 'zh' ? item.title.textZh: item.title.textEn||item.title.textZh
         });
         //图例
         options.value.series.forEach(item => {
-            item.name = LangType.value == 'en' ?item.nameEn : item.nameZh 
+            item.name = LangType.value == 'en' ?(item.nameEn||item.nameZh) : item.nameZh 
         });
         //tooltip
         options.value.tooltip.formatter = LangType.value == 'en'?options.value.tooltip.formatterEn:options.value.tooltip.formatterZh
@@ -496,7 +496,7 @@ function setChartLang(changeLangIsCheck){
             });
         }
         if([3].includes(Source)){
-            options.value.xAxis.title.text=LangType.value == 'en'?options.value.xAxis.title.textEn:options.value.xAxis.title.textZh
+            options.value.xAxis.title.text=LangType.value == 'en'?(options.value.xAxis.title.textEn||options.value.xAxis.title.textZh):options.value.xAxis.title.textZh
         }
     }
 }
@@ -823,7 +823,8 @@ function setSplineOpt(e){
 //季节图
 function setSeasonOpt(e){
     axisLimitState.leftIndex=0
-    axisLimitState.rightIndex=-1
+    const {RightAxis:SeasonRightConfig={}} = e.DataResp||{}
+    axisLimitState.rightIndex=SeasonRightConfig.IsShow?1:-1
     axisLimitState.rightTwoIndex=-1
 
      /* 主题样式*/
@@ -843,6 +844,7 @@ function setSeasonOpt(e){
     // 跟颜色对应
     chartTheme && (chartTheme.lineOptionList=chartTheme.lineOptionList.reverse().slice(-chartDataHandle.length))
     // if(calendarType==='公历'){
+        //常规左轴
         chartDataHandle.forEach((item,index)=>{
              //预测指标配置
             let predict_params =  data.EdbInfoCategoryType === 1 ? getSeasonPredictParams(item.CuttingDataTimestamp) : {};
@@ -875,15 +877,96 @@ function setSeasonOpt(e){
             series.push(seriesItem)
         })
     chartData.colors = colorsArr.slice(-chartDataHandle.length)
+
+    //同期上下限/均线/标准差
+    const {MaxMinLimits={},SamePeriodAverage={},SamePeriodStandardDeviation={}} = e.DataResp||{}
+    if(MaxMinLimits.IsShow&&MaxMinLimits.List&&MaxMinLimits.List.length){
+        let serieItem = {
+            type:'arearange',//上下限是一个范围
+            data:[],
+            name:MaxMinLimits.Legend||'同期上下限',
+            color:MaxMinLimits.Color||'#075EEE' ,
+            fillOpacity:parseRgbaColor(MaxMinLimits.Color||'')>0.75?0.75:parseRgbaColor(MaxMinLimits.Color||'') //透明度最高0.75 
+        }
+        MaxMinLimits.List.forEach(item=>{
+            serieItem.data.push([item.DataTimestamp,item.MinValue,item.MaxValue])
+        })
+        series.push(serieItem)
+    }
+    if(SamePeriodAverage.IsShow&&SamePeriodAverage.List){
+        let serieItem = {
+            type:'line',
+            data:[],
+            lineWidth:SamePeriodAverage.LineWidth,
+            dashStyle:SamePeriodAverage.LineType,
+            name:SamePeriodAverage.Legend||'同期均值',
+            color:SamePeriodAverage.Color||'#075EEE'
+        }
+        SamePeriodAverage.List.forEach(item=>{
+            serieItem.data.push([item.DataTimestamp,item.Value])
+        })
+        series.push(serieItem)
+    }
+    if(SamePeriodStandardDeviation.IsShow&&SamePeriodStandardDeviation.List){
+        let serieItem = {
+            type:'arearange',//标准差也是一个范围
+            data:[],
+            name:SamePeriodStandardDeviation.Legend||'同期标准差',
+            color:SamePeriodStandardDeviation.Color||'#075EEE',
+            fillOpacity:parseRgbaColor(SamePeriodStandardDeviation.Color||'')>0.75?0.75:parseRgbaColor(SamePeriodStandardDeviation.Color||'')
+        }
+        SamePeriodStandardDeviation.List.forEach(item=>{
+            serieItem.data.push([item.DataTimestamp,item.MinValue,item.MaxValue])
+        })
+        series.push(serieItem)
+    }
+    //右轴
+    if(SeasonRightConfig.IsShow){
+        //右轴的设置
+        let serieConfig = SeasonRightConfig.Style==='column'?{
+            //柱形
+            type:'column',
+            color:SeasonRightConfig.ChartColor
+        }:{
+            //标记点
+            type:'spline',
+            lineWidth:SeasonRightConfig.LineWidth,
+            dashStyle:SeasonRightConfig.LineStyle,
+            color:SeasonRightConfig.IsConnected?SeasonRightConfig.LineColor:'rgba(255, 255, 255, 0)',//没有连线颜色设置为透明
+            marker:{
+                enabled:true,
+                symbol:SeasonRightConfig.Shape,
+                fillColor:SeasonRightConfig.ChartColor,
+                radius:SeasonRightConfig.Size
+            },
+        }
+        let serieItem = {
+            ...serieConfig,
+            name:SeasonRightConfig.Legend||'',
+            data:[],
+            yAxis:1,
+        }
+        const DataList = (SeasonRightConfig.IndicatorType===1?SeasonRightConfig.EdbInfoList[0].DataList:e.EdbInfoList[1]?.DataList)||[]
+        DataList.forEach(item=>{
+            serieItem.data.push([item.DataTimestamp,item.Value])
+        })
+        series.push(serieItem)
+    }
+
     //获取上下限
-    let minLimit = 0,maxLimit = 0
-    //非ETA图库不使用自定义上下限
+    let minLimit = 0,maxLimit = 0,rightMin = 0,rightMax = 0
+    //非ETA图库不使用自定义上下限 非ETA图库的季节性图也不能设置右轴
     if(!useSelfLimit){
         minLimit = data.MinData
         maxLimit = data.MaxData
     }else{
         minLimit = axisLimitState.leftMin||0
         maxLimit = axisLimitState.leftMax||0
+        //右轴上下限设置
+        if(axisLimitState.rightIndex!==-1){
+            rightMin = axisLimitState.rightMin||0
+            rightMax = axisLimitState.rightMax||0
+        }
     }
     const textZh = data.ConvertUnit||data.Unit
     const textEn = data.ConvertEnUnit||data.UnitEn||data.ConvertUnit||data.Unit
@@ -932,7 +1015,41 @@ function setSeasonOpt(e){
         tickPixelInterval: 50,
         // chartEdbInfo:item//指标数据
     }]
-
+    //如果有右轴,yAxis加上右轴
+    if(SeasonRightConfig.IsShow){
+        const rightEdb = (SeasonRightConfig.IndicatorType===1?SeasonRightConfig.EdbInfoList[0]:e.EdbInfoList[1])||{Unit:''}
+        //左轴同比：text为空或% 右轴指标：取指标单位
+        if(SeasonRightConfig.IndicatorType===1){
+            rightEdb.Unit = SeasonRightConfig.NumFormat===1?'%':''
+        }else{
+            rightEdb.Unit = e.EdbInfoList[1]&&(e.EdbInfoList[1].ConvertUnit||e.EdbInfoList[1].Unit)||''
+        }
+        yAxis.push({
+            ...seasonOptions.yAxis,
+            opposite: true,//右轴
+            labels: {
+                align: 'center',
+                y:5,
+                style: {
+                  ...chartTheme&&chartTheme.yAxisOptions.style
+                }
+              },
+              title: {
+                text: rightEdb.Unit||'',
+                style:{
+                  ...chartTheme&&chartTheme.yAxisOptions.style
+                },
+                align: 'high',
+                rotation: 0,
+                y: -5,
+                x: 0,
+                textAlign: 'right',
+                reserveSpace: false,
+              },
+              max: Number(rightMax),
+              min: Number(rightMin),
+        })
+    }
     chartData.series=series
     chartData.yAxis=yAxis
     // chartData.rangeSelector=rangeSelector
@@ -1815,9 +1932,9 @@ function initRelevanceChart(data){
           type: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineType) || 'spline',
           dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
           yAxis: 0,
-          name: data.ChartInfo.ChartName,
-          nameZh: data.ChartInfo.ChartName,
-          nameEn: data.ChartInfo.ChartNameEn,
+          name: item.Name||data.ChartInfo.ChartName,
+          nameZh: item.Name||data.ChartInfo.ChartName,
+          nameEn: item.NameEn||data.ChartInfo.ChartNameEn,
           color: item.Color,
           chartType: 'linear',
           lineWidth: (chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth) || 3,
@@ -2333,9 +2450,15 @@ function setRadarChart({DataResp,EdbInfoList,ChartInfo}) {
     }
 }
 
+
+//获取RGBA的透明度
+function parseRgbaColor(color='rgba(51, 51, 51, 1)'){
+    const arr = color.match(/(\d(\.\d+)?)+/g) || ['','','',1];
+    return parseFloat(arr[3]||1)
+}
 /* ----自定义上下限相关--- */
 /* 计算y轴上下限 */
-function calcYAxislimit(tableData=[],ChartInfo){
+function calcYAxislimit(tableData=[],ChartInfo,DataResp={}){
     //散点图单独处理
     if(ChartInfo.ChartType===5){
         if(tableData[1]){
@@ -2373,6 +2496,19 @@ function calcYAxislimit(tableData=[],ChartInfo){
         axisLimitState.rightTwoMin = Min
         axisLimitState.rightTwoMax = Max
     }
+    //季节性图-右轴单独处理
+    if(ChartInfo.ChartType===2){
+        if(DataResp.RightAxis&&DataResp.RightAxis.IsAdd&&DataResp.RightAxis.IsShow){
+            if(DataResp.RightAxis.IndicatorType===1){
+                axisLimitState.rightMin = DataResp.RightAxis.EdbInfoList[0].MinData||0
+                axisLimitState.rightMax = DataResp.RightAxis.EdbInfoList[0].MaxData||0
+            }else{
+                axisLimitState.rightMin = tableData[1].MinData||0
+                axisLimitState.rightMax = tableData[1].MaxData||0
+            }
+            
+        }
+    }
 }
 function calcLimit(arr) {
     return {
@@ -2381,7 +2517,7 @@ function calcLimit(arr) {
     }
 }
 //图表详情-设置图表上下限
-function setLimitData({EdbInfoList,ChartInfo}){
+function setLimitData({EdbInfoList,ChartInfo,DataResp}){
     const {
         //左右轴极值字段 
         LeftMin=0,LeftMax=0,
@@ -2400,7 +2536,7 @@ function setLimitData({EdbInfoList,ChartInfo}){
         checkLimit(EdbInfoList,ChartInfo)
         console.log('check',axisLimitState.leftMin,axisLimitState.leftMax)
     }else{
-        calcYAxislimit(EdbInfoList,ChartInfo)
+        calcYAxislimit(EdbInfoList,ChartInfo,DataResp?DataResp:{})
     }
 }
 function checkLimit(tableData=[],ChartInfo){