同步eta1.9.4 季节性图改动

src/hooks/chart/useChartRender.ts

@@ -11,6 +11,11 @@ import { defaultOpts, seasonOptions } from "@/utils/chartOptions";
 import moment from "moment";
 import router from '@/router'
 
+//获取RGBA的透明度
+const parseRgbaColor = (color='rgba(51, 51, 51, 1)') => {
+    const arr = color.match(/(\d(\.\d+)?)+/g) || ['','','',1];
+    return parseFloat(arr[3]+''||'1')
+}
 // 散点x
 const scatterXAxis = {
   tickPosition: "inside",
@@ -97,7 +102,7 @@ export const useChartRender = (Data,lang='zh',) => {
 
   //eta图
   if ([1,11].includes(Data.ChartInfo.Source)) {
-    setLimitData(state.dataList)
+    setLimitData(state.dataList,Data)
     const typeMap = {
       1: setDefaultLineOptions,
       2: setSeasonOptions,
@@ -327,8 +332,8 @@ const setDefaultLineOptions = () => {
 
 /* 季节图 */
 const screen = ref(document.body.clientWidth < 1200 ? 'phone' : 'pc');
-const setSeasonOptions = () => {
-  
+const setSeasonOptions = (data:any) => {
+  const {RightAxis:SeasonRightConfig={}} = data.DataResp||{}
   const chartData = state.dataList[0];
   // 农历数据需要去除第一项 在ETA1.0.5之后，除了这里 农历和公历处理逻辑一样
   if(!chartData.DataList){
@@ -342,16 +347,20 @@ const setSeasonOptions = () => {
     seasonData:any[] = [];
 
     //获取对应轴的上下限
-    let minLimit = 0,maxLimit = 0
+    let minLimit = 0,maxLimit = 0,rightMin = 0,rightMax = 0
     minLimit = state.chartLimit.min||0
     maxLimit = state.chartLimit.max||0
+    if(SeasonRightConfig.IsShow){
+        rightMin = state.chartLimit.rightMin||0
+        rightMax = state.chartLimit.rightMax||0
+    }
 
     /* 主题样式*/
   const chartTheme =  state.chartInfo.ChartThemeStyle ? JSON.parse(state.chartInfo.ChartThemeStyle) : null;
   // 跟颜色对应
   chartTheme && (chartTheme.lineOptionList=chartTheme.lineOptionList.reverse().slice(-chartDataHandle.length))
 
-  /*处理数据列*/
+  /*处理数据列 常规左轴*/
   for (let index in chartDataHandle) {
     console.log(index,'index');
     
@@ -382,7 +391,80 @@ const setSeasonOptions = () => {
       });
     seasonData.push(serie_item);
   }
-
+  //同期上下限/均线/标准差
+  const {MaxMinLimits={},SamePeriodAverage={},SamePeriodStandardDeviation={}} = data.DataResp||{}
+  if(MaxMinLimits.IsShow&&MaxMinLimits.List&&MaxMinLimits.List.length){
+    let serieItem = {
+        type:'arearange',//上下限是一个范围
+        data:[] as any[],
+        name:MaxMinLimits.Legend||'同期上下限',
+        color:MaxMinLimits.Color||'#075EEE',
+        fillOpacity:parseRgbaColor(MaxMinLimits.Color||'')>0.75?0.75:parseRgbaColor(MaxMinLimits.Color||'') //透明度最高0.75 
+    }
+    MaxMinLimits.List.forEach((item:any)=>{
+        serieItem.data.push([item.DataTimestamp,item.MinValue,item.MaxValue])
+    })
+    seasonData.push(serieItem)
+  }
+  if(SamePeriodAverage.IsShow&&SamePeriodAverage.List){
+    let serieItem = {
+        type:'line',
+        data:[] as any [],
+        lineWidth:SamePeriodAverage.LineWidth,
+        dashStyle:SamePeriodAverage.LineType,
+        name:SamePeriodAverage.Legend||'同期均值',
+        color:SamePeriodAverage.Color||'#075EEE'
+    }
+    SamePeriodAverage.List.forEach((item:any)=>{
+        serieItem.data.push([item.DataTimestamp,item.Value])
+    })
+    seasonData.push(serieItem)
+  }
+  if(SamePeriodStandardDeviation.IsShow&&SamePeriodStandardDeviation.List){
+    let serieItem = {
+        type:'arearange',//标准差也是一个范围
+        data:[] as any [],
+        name:SamePeriodStandardDeviation.Legend||'同期标准差',
+        color:SamePeriodStandardDeviation.Color||'#075EEE',
+        fillOpacity:parseRgbaColor(SamePeriodStandardDeviation.Color||'')>0.75?0.75:parseRgbaColor(SamePeriodStandardDeviation.Color||'')
+    }
+    SamePeriodStandardDeviation.List.forEach((item:any)=>{
+        serieItem.data.push([item.DataTimestamp,item.MinValue,item.MaxValue])
+    })
+    seasonData.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:[] as any[],
+        yAxis:1,
+    }
+    const DataList = (SeasonRightConfig.IndicatorType===1?SeasonRightConfig.EdbInfoList[0].DataList:state.dataList[1].DataList)||[]
+    DataList.forEach((item:any)=>{
+        serieItem.data.push([item.DataTimestamp,item.Value])
+    })
+    seasonData.push(serieItem)
+  }
   //y轴
   const textZh = chartData.ConvertUnit||chartData.Unit
   const textEn = textZh?chartData.ConvertEnUnit||chartData.UnitEn||chartData.ConvertUnit||chartData.Unit:''
@@ -415,6 +497,44 @@ const setSeasonOptions = () => {
     plotBands: setAxisPlotAreas(1),
     plotLines: setAxisPlotLines(1)
   }];
+  //如果有右轴,seasonYdata加上右轴
+  if(SeasonRightConfig.IsShow){
+    const rightEdb = (SeasonRightConfig.IndicatorType===1?SeasonRightConfig.EdbInfoList[0]:state.dataList[1])||{unit:''}
+    //左轴同比：text为空或% 右轴指标：取指标单位
+    if(SeasonRightConfig.IndicatorType===1){
+        rightEdb.Unit = SeasonRightConfig.NumFormat===1?'%':''
+    }else{
+        rightEdb.Unit = state.dataList[1]&&(state.dataList[1].ConvertUnit||state.dataList[1].Unit)||''
+    }
+    seasonYdata.push({
+        ...defaultOpts.yAxis,
+        opposite: true,//右轴
+        labels: {
+            formatter: function (ctx: any) {
+                let val = ctx.value;
+                return val;
+            },
+            align: 'center',
+            style: {
+              ...chartTheme&&chartTheme.yAxisOptions.style
+            }
+          },
+          title: {
+            text: rightEdb.Unit||'',
+            style:{
+              ...chartTheme&&chartTheme.yAxisOptions.style
+            },
+            align: 'high',
+            rotation: 0,
+            y: -12,
+            x: 0 ,
+            textAlign: 'right',
+            reserveSpace: false,
+          },
+          max: Number(rightMax),
+          min: Number(rightMin),
+    })
+  }
 
   // 季节图x轴显示月/日
   const xAxis = {
@@ -2020,7 +2140,7 @@ const setAxisPlotAreas = (axis: number, axisType: any = null) => {
 };
 
 /* ----自定义上下限相关--- */
-const setLimitData = (tableData:any=[])=>{
+const setLimitData = (tableData:any=[],data:{DataResp:any})=>{
     const {
         //左右轴极值字段 
         LeftMin=0,LeftMax=0,
@@ -2038,7 +2158,7 @@ const setLimitData = (tableData:any=[])=>{
         //若用户修改过，则检测轴的上下限是否为空，若为空，则需要计算对应轴的上下限
         checkLimit(tableData)
     }else{
-        calcYAxislimit(tableData)
+        calcYAxislimit(tableData,data.DataResp?data.DataResp:{})
     }
 }
 const checkLimit = (tableData:any=[])=>{
@@ -2088,7 +2208,7 @@ const checkLimit = (tableData:any=[])=>{
     }
 }
 /* 计算y轴上下限 */
-const calcYAxislimit = (tableData:any=[])=>{
+const calcYAxislimit = (tableData:any=[],DataResp:any={})=>{
     //散点图单独处理
     if(state.chartInfo.ChartType===5){
         if(tableData[1]){
@@ -2135,6 +2255,19 @@ const calcYAxislimit = (tableData:any=[])=>{
         state.chartLimit.rightTwoMin = 0
         state.chartLimit.rightTwoMax = 0
     }
+    //季节性图-右轴单独处理
+    if(state.chartInfo.ChartType===2){
+        if(DataResp.RightAxis&&DataResp.RightAxis.IsAdd&&DataResp.RightAxis.IsShow){
+            if(DataResp.RightAxis.IndicatorType===1){
+                state.chartLimit.rightMin = DataResp.RightAxis.EdbInfoList[0].MinData||0
+                state.chartLimit.rightMax = DataResp.RightAxis.EdbInfoList[0].MaxData||0
+            }else{
+                state.chartLimit.rightMin = tableData[1].MinData||0
+                state.chartLimit.rightMax = tableData[1].MaxData||0
+            }
+            
+        }
+    }
 }
 const calcLimit = (arr:any)=>{
     return {