Ver Fonte

新增AI预测模型图表来源

chenlei há 5 dias atrás
pai
commit
06640876d8
1 ficheiros alterados com 206 adições e 2 exclusões
  1. 206 2
      src/hooks/chart/useChartRender.ts

+ 206 - 2
src/hooks/chart/useChartRender.ts

@@ -104,7 +104,7 @@ export const useChartRender = (Data,lang='zh',) => {
   let chartOptions:any;
 
   //eta图
-  if ([1,11,14,15].includes(Data.ChartInfo.Source)) {
+  if ([1,11].includes(Data.ChartInfo.Source)) {
     setLimitData(state.dataList,Data)
     const typeMap = {
       1: setDefaultLineOptions,
@@ -132,7 +132,9 @@ export const useChartRender = (Data,lang='zh',) => {
       8: initStatisticChartData,
       9: initStatisticChartData,
       10: initCrossVarietyChartData,
-      12:initIntervalAnalysisChartData
+      12:initIntervalAnalysisChartData,
+      14: initAIPredictChartDailyData,
+      15: initAIPredictChartData
     };
   
     chartOptions = sourceTypeMap[Data.ChartInfo.Source] &&
@@ -2144,6 +2146,208 @@ const initIntervalAnalysisChartData=(data)=>{
     return setDefaultLineOptions()
 }
 
+// AI预测模型日度预测图表
+const initAIPredictChartDailyData = (data)=>{
+    const chart={
+      ...defaultOpts.chart,
+      plotBorderColor: '#000',
+      plotBorderWidth: 1
+    }
+    const plotLines=[{
+      color: '#000',
+      width: 1,
+      dashStyle:'Dash',
+      label: {
+        text: 'Future Split',
+        verticalAlign: 'middle',
+        textAlign: 'center',
+      },
+      value: data.DataResp.ActualLatestTimestamp||0
+    }]
+    let xAxis = {
+      ...defaultOpts.xAxis,
+      labels: {
+        formatter: function (ctx) {
+          return Highcharts.dateFormat('%Y-%m', ctx.value)
+        },
+        style: {
+          // ...chartTheme&&chartTheme.xAxisOptions.style
+        }
+      },
+      lineColor:'#000',
+      tickWidth: 0,
+      tickColor:'#ccc',
+      gridLineColor: '#ccc',
+      gridLineWidth: 1,
+      plotLines:plotLines,
+    }
+    let yAxis={
+      ...basicYAxis,
+      title: {
+        enabled:false,
+        text: data.Unit,
+        textCh:data.Unit, // 中文
+        // 中文不存在,无论英文有无都显示空
+        textEn:data.UnitEn, // 英文
+        style:{
+          // ...chartTheme&&chartTheme.yAxisOptions.style
+        },
+        align: 'high',
+        rotation: 0,
+        y: 12,
+        x: -20,
+        textAlign: 'left',
+        reserveSpace: false
+      },
+      labels: {
+        formatter: function (ctx) {
+          return ctx.value;
+        },
+        align: 'center',
+        x: -5,
+        y:8,
+        style: {
+          // ...chartTheme&&chartTheme.yAxisOptions.style,
+        }
+      },
+      opposite: false,
+      // reversed: item.IsOrder,
+      min: Number(data.ChartInfo.LeftMin),
+      max: Number(data.ChartInfo.LeftMax),
+      tickWidth: 0,
+      tickColor:'#ccc',
+      lineColor:'#000',
+      gridLineColor: '#ccc',
+      gridLineWidth: 1,
+    }
+    let dataArr = [];
+    const chartData=_.cloneDeep(data.EdbInfoList)||[]
+    chartData.forEach((item,index)=>{
+      //数据列
+      let obj = {
+        data: [],
+        type: 'line',
+        dashStyle: index==1?'Dash':'Solid',
+        yAxis: 0,
+        name:item.EdbName,
+        nameCh:item.EdbName,
+        nameEn:item.EdbName,
+        color: item.ChartColor,//控制线条颜色
+        lineWidth:Number(item.ChartWidth)||1,
+      };
+      item.DataList = item.DataList || [];
+      for (let i of item.DataList) {
+        obj.data.push([i.DataTimestamp, i.Value]);
+      }
+      dataArr.push(obj);
+    })
+    const legend= {
+      enabled:true,
+      align: 'left',           // 图例水平对齐到左侧
+      verticalAlign: 'top',    // 图例垂直对齐到顶部
+      layout: 'vertical',    // 图例水平布局
+      x: 45,                   // 距离图表左侧的偏移量
+      y: 5,                   // 距离图表顶部的偏移量
+      floating: true,          // 使图例悬浮在图表之上
+      backgroundColor: 'rgba(255, 255, 255, 0.8)', // 图例背景(可选)
+      borderWidth: 1,          // 图例边框宽度(可选)
+      itemStyle: {
+        color: '#000',         // 图例文本颜色
+        fontSize: '10px',      // 图例字体大小
+      },
+    }      
+    let options = {
+      chart:chart,
+      series: dataArr,
+      yAxis: [yAxis],
+      xAxis,
+      legend,
+    };
+    return options
+}
+
+// AI预测模型
+const initAIPredictChartData = (data)=>{
+  let isLessThanOneYear:boolean = xTimeDiffer();
+  let xAxis = {
+    ...defaultOpts.xAxis,
+    labels: {
+      formatter: function (ctx) {
+        return isLessThanOneYear
+          ? Highcharts.dateFormat('%m/%d', ctx.value)
+          : Highcharts.dateFormat('%y/%m', ctx.value);
+      },
+      style: {
+        // ...chartTheme&&chartTheme.xAxisOptions.style
+      }
+    }
+  }
+  let yAxis={
+    ...basicYAxis,
+    title: {
+      text: data.Unit,
+      textCh:data.Unit, // 中文
+      // 中文不存在,无论英文有无都显示空
+      textEn:data.UnitEn, // 英文
+      style:{
+        // ...chartTheme&&chartTheme.yAxisOptions.style
+      },
+      align: 'high',
+      rotation: 0,
+      y: -12,
+      x: 0,
+      textAlign: 'left',
+      reserveSpace: false
+    },
+    labels: {
+      formatter: function (ctx) {
+        return ctx.value;
+      },
+      align: 'center',
+      x: -5,
+      style: {
+        // ...chartTheme&&chartTheme.yAxisOptions.style,
+      }
+    },
+    opposite: false,
+    // reversed: item.IsOrder,
+    min: Number(data.ChartInfo.LeftMin),
+    max: Number(data.ChartInfo.LeftMax),
+    tickWidth: 1,
+  }
+  let dataArr = [];
+  const chartData=_.cloneDeep(data.EdbInfoList)||[]
+  chartData.forEach((item,index)=>{
+    //数据列
+    let obj = {
+      data: [],
+      type: 'line',
+      dashStyle: index==1?'Dash':'Solid',
+      yAxis: 0,
+      name:item.EdbName,
+      nameCh:item.EdbName,
+      nameEn:item.EdbName,
+      color: item.ChartColor,//控制线条颜色
+      lineWidth:Number(item.ChartWidth)||1,
+      marker:index>0?{
+        enabled:true,
+        symbol:  'circle',
+        fillColor:"#f00",
+        radius: 3
+      }:{}
+    };
+    item.DataList = item.DataList || [];
+    for (let i of item.DataList) {
+      obj.data.push([i.DataTimestamp, i.Value]);
+    }
+    dataArr.push(obj);
+  })
+  return {
+    series: dataArr,
+    yAxis: [yAxis],
+    xAxis,
+  };
+}
 
 
 // 曲线图x轴显示计算年限差 >1年 显示年/月 <=1 显示月/日