同步1.9.4季节性图升级

src/views/hzyb/chart/Detail.vue

@@ -71,6 +71,28 @@ const basicXAxis={
     },
     xDateFormat:'%Y-%m-%d'
 }
+//季节性图设置
+const seasonOptions = {
+    //默认颜色配置
+    colors:['#4B0082','#7FFFAA','#FF4500','#808000','#EEE8AA','#849EC1','#8A4294','#578B5A','#FDA8C7','#53B3FF','#999999','#000000','#FFDF0C','#FF0000','#0033FF'],
+    yAxis: {
+        lineWidth: 1,
+        lineColor: '#bfbfbf',
+        tickColor: '#bfbfbf',
+        offset: 0,
+        opposite: false,
+        reversed: false,
+        visible: true,
+        gridLineWidth: 0,
+        tickWidth: 1,
+        tickLength:5,
+        tickPosition: 'inside',
+        endOnTick: false,
+        startOnTick: false,
+        showLastLabel: true, //显示最后刻度值
+        tickPixelInterval: 50
+    }
+}
 
 
 // 获取用户信息
@@ -1833,6 +1855,11 @@ const changeEdbOrder = (data) => {
     return [left_edbs,right_edbs,right_two_edbs].flat(Infinity);
 }
 
+//获取RGBA的透明度
+function parseRgbaColor(color='rgba(51, 51, 51, 1)'){
+    const arr = color.match(/(\d(\.\d+)?)+/g) || ['','','',1];
+    return parseFloat(arr[3]||1)
+}
 //设置季节图配置
 const setSeasonOpt=(data)=>{
     hasLeftAxis.value=true
@@ -1855,6 +1882,7 @@ const setSeasonOpt=(data)=>{
 
     // 跟颜色对应
     chartTheme && (chartTheme.lineOptionList=chartTheme.lineOptionList.reverse().slice(-chartDataHandle.length))
+    //常规左轴
     chartDataHandle.forEach((item,index)=>{
             //预测指标配置
         let predict_params =  data.EdbInfoCategoryType === 1 ? getSeasonPredictParams(item.CuttingDataTimestamp) : {};
@@ -1887,6 +1915,86 @@ const setSeasonOpt=(data)=>{
         series.push(seriesItem)
 
     })
+    //同期上下限/均线/标准差
+    const {MaxMinLimits={},SamePeriodAverage={},SamePeriodStandardDeviation={}} = resData.value.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 
+            visible:true,
+        }
+        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',
+            visible:true,
+        }
+        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||''),
+            visible:true,
+        }
+        SamePeriodStandardDeviation.List.forEach(item=>{
+            serieItem.data.push([item.DataTimestamp,item.MinValue,item.MaxValue])
+        })
+        series.push(serieItem)
+    }
+    //右轴
+    const {RightAxis:SeasonRightConfig={}} = resData.value.DataResp||{}
+    if(SeasonRightConfig.IsShow){
+        //右轴的设置
+        let serieConfig = SeasonRightConfig.Style==='column'?{
+            //柱形
+            type:'column',
+            color:SeasonRightConfig.ChartColor,
+            visible:true,
+        }:{
+            //标记点
+            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
+            },
+            visible:true,
+        }
+        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)
+    }
 
     yAxis=[{
         IsAxis:data.IsAxis,
@@ -1934,6 +2042,42 @@ const setSeasonOpt=(data)=>{
         // 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(rightEdb.MaxData||''),
+              min: Number(rightEdb.MinData||''),
+        })
+    }
+
     chartData.value.series=series
     chartData.value.yAxis=yAxis
     // chartData.value.rangeSelector=rangeSelector