|
@@ -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 显示月/日
|