Browse Source

滚动相关性画图逻辑更改

Karsa 1 year ago
parent
commit
5b18bb502e

+ 10 - 3
src/views/chartRelevance_manage/components/chartCard.vue

@@ -127,8 +127,7 @@ export default {
           this.chartInfo = data.ChartInfo;
           this.setDefaultChart(data.EdbInfoList);
           break
-        case 3: //3相关性 4滚动相关性
-        case 4:
+        case 3: //3相关性 
           this.chartInfo = data.ChartInfo;
           this.relevanceChartData={
             ChartInfo:data.ChartInfo,
@@ -147,6 +146,14 @@ export default {
           this.tableData=data.EdbInfoList||[]
           this.initRelevanceChartData()
           break
+        case 4: //4滚动相关性
+          this.relevanceChartData = {
+            ChartInfo:data.ChartInfo,
+            CorrelationChartInfo: data.CorrelationChartInfo
+          }
+          this.chartInfo = data.ChartInfo;
+          this.setDefaultChart([data.DataResp]);
+          break
         case 6: //弹性系数
           this.initFittingEquation(data);
           break
@@ -155,7 +162,7 @@ export default {
           this.chartInfo = data.ChartInfo;
           this.setDefaultChart([data.DataResp]);
           break
-        case 9: 
+        case 9: //频率分布
           this.chartInfo = data.ChartInfo;
           this.tableData=data.EdbInfoList||[]
           this.statisticFrequencyData = data.DataResp;

+ 23 - 27
src/views/chartRelevance_manage/list.vue

@@ -602,27 +602,29 @@ export default {
 
           this.chartInfo = res.Data.ChartInfo;
           this.tableData = res.Data.EdbInfoList;
-          this.relevanceChartData = {
-            ChartInfo: res.Data.ChartInfo,
-            EdbInfoList: res.Data.EdbInfoList,
-            XEdbIdValue:
-              this.chartInfo.Source === 3
-                ? res.Data.XEdbIdValue
-                : res.Data.DataResp.XDateTimeValue,
-            CorrelationChartInfo: res.Data.CorrelationChartInfo,
-            YDataList: [
-              {
-                Value:
-                  this.chartInfo.Source === 3
-                    ? res.Data.YDataList[0].Value
-                    : res.Data.DataResp.YDataList[0].Value,
-                Color: "#00f",
-                Name: res.Data.ChartInfo.ChartName,
-                NameEn: res.Data.ChartInfo.ChartNameEn,
-              },
-            ],
-          };
-          this.initRelevanceChartData();
+          if(this.chartInfo.Source === 3) {
+            this.relevanceChartData = {
+              ChartInfo: res.Data.ChartInfo,
+              EdbInfoList: res.Data.EdbInfoList,
+              XEdbIdValue:res.Data.XEdbIdValue,
+              CorrelationChartInfo: res.Data.CorrelationChartInfo,
+              YDataList: [
+                {
+                  Value: res.Data.YDataList[0].Value,
+                  Color: "#00f",
+                  Name: res.Data.ChartInfo.ChartName,
+                  NameEn: res.Data.ChartInfo.ChartNameEn
+                },
+              ],
+            };
+            this.initRelevanceChartData() 
+          }else if(this.chartInfo.Source === 4) { //滚动相关性逻辑又换成曲线了
+            this.relevanceChartData = {
+              CorrelationChartInfo: res.Data.CorrelationChartInfo
+            }
+            this.setDefaultChart([res.Data.DataResp]);
+          }
+          
         });
     },
 
@@ -708,12 +710,6 @@ export default {
               fontSize: "18px",
             },
           },
-          xAxis: [
-            {
-              ...this.options.xAxis,
-              offset: -(heightNum - 136) / 2,
-            },
-          ],
           legend: {
             ...copyOtherOptions[chartType],
             ...dynamic_copyOptions[chartType],

+ 29 - 29
src/views/dataEntry_manage/components/chart.vue

@@ -54,21 +54,21 @@ export default {
 	methods: {
 
 		init() {
-			if(this.options.isRelevanceChart){//相关性图表设置x轴在y轴0刻度
-				this.$nextTick(()=>{
-					// let h = $('.highcharts-yaxis .highcharts-axis-line')[0].getBoundingClientRect().height;
-					// console.log(h)
-					// this.options.xAxis.offset=-h/2;
-					const h=$(`#container${this.index}`)[0].style.height
-					if(h=='500px'){
-						this.options.xAxis.offset=-200.5
-					}else if(h=='440px'){
-						this.options.xAxis.offset=-170.5
-					}else if(h=='350px'){
-						this.options.xAxis.offset=-125.5
-					}
-				})
-			}
+			// if(this.options.isRelevanceChart){//相关性图表设置x轴在y轴0刻度
+			// 	this.$nextTick(()=>{
+			// 		// let h = $('.highcharts-yaxis .highcharts-axis-line')[0].getBoundingClientRect().height;
+			// 		// console.log(h)
+			// 		// this.options.xAxis.offset=-h/2;
+			// 		const h=$(`#container${this.index}`)[0].style.height
+			// 		if(h=='500px'){
+			// 			this.options.xAxis.offset=-200.5
+			// 		}else if(h=='440px'){
+			// 			this.options.xAxis.offset=-170.5
+			// 		}else if(h=='350px'){
+			// 			this.options.xAxis.offset=-125.5
+			// 		}
+			// 	})
+			// }
 
 			const options = {...defaultOpts,...this.options}
 			let thatThis = this
@@ -127,20 +127,20 @@ export default {
 			}else {
 				$(`#container${this.index}`)[0].style.height = this.height || '440px';
 			}
-			if(this.options.isRelevanceChart){//相关性图表设置x轴在y轴0刻度
-				this.$nextTick(()=>{
-					const h=$(`#container${this.index}`)[0].style.height
-					if(h=='500px'){
-						this.options.xAxis.offset=-200.5
-					}else if(h=='440px'){
-						this.options.xAxis.offset=-170.5
-					}else if(h=='350px'){
-						this.options.xAxis.offset=-125.5
-					}
-					// let h = $('.highcharts-yaxis .highcharts-axis-line')[0].getBoundingClientRect().height;
-					// this.options.xAxis.offset=-h/2;
-				})
-			}
+			// if(this.options.isRelevanceChart){//相关性图表设置x轴在y轴0刻度
+			// 	this.$nextTick(()=>{
+			// 		const h=$(`#container${this.index}`)[0].style.height
+			// 		if(h=='500px'){
+			// 			this.options.xAxis.offset=-200.5
+			// 		}else if(h=='440px'){
+			// 			this.options.xAxis.offset=-170.5
+			// 		}else if(h=='350px'){
+			// 			this.options.xAxis.offset=-125.5
+			// 		}
+			// 		// let h = $('.highcharts-yaxis .highcharts-axis-line')[0].getBoundingClientRect().height;
+			// 		// this.options.xAxis.offset=-h/2;
+			// 	})
+			// }
 
 		}
 	},

+ 27 - 4
src/views/dataEntry_manage/mixins/chartPublic.js

@@ -468,7 +468,7 @@ export const chartSetMixin = {
     /* 曲线图设置 */
     setDefaultChart(newval) {
       /* 上下限显示和值的设置 */
-      if([6,7,8].includes(this.chartInfo.Source)) {
+      if([4,6,7,8].includes(this.chartInfo.Source)) {
         this.leftIndex = -1;
         this.rightIndex = -1;
         this.rightTwoIndex = -1;
@@ -566,10 +566,33 @@ export const chartSetMixin = {
       });
 
       this.xLabelDealHandle();
+
       this.options = {
         series: data,
         yAxis: ydata,
       };
+
+      //滚动相关性独立tooltip
+      if(this.chartInfo.Source === 4) {
+        const { LeadValue,LeadUnit } = this.relevanceChartData.CorrelationChartInfo;
+        let relevanceUnitEnMap = this.relevanceUnitEnMap;
+        this.options.tooltip = {
+          formatter: function() {
+            let str = `${Highcharts.dateFormat('%Y/%m/%d',this.x)}<br><p>相关性系数:${this.y.toFixed(4)}</p><br><p>领先${LeadValue+LeadUnit}</p>`
+            return str
+          },
+          formatterCh: function() {
+            let str = `${Highcharts.dateFormat('%Y/%m/%d',this.x)}<br><p>相关性系数:${this.y.toFixed(4)}</p><br><p>领先${LeadValue+LeadUnit}</p>`
+            return str
+          },
+          formatterEn: function() {
+            let str = `${Highcharts.dateFormat('%Y/%m/%d',this.x)}<br><p>Correlation coefficient:${this.y.toFixed(4)}</p><br><p>lead${LeadValue+relevanceUnitEnMap[LeadUnit]}</p>`
+            return str
+          }
+        }
+      }
+
+
       if(this.currentLang=='en') this.changeOptions()
     },
 
@@ -1382,11 +1405,11 @@ export const chartSetMixin = {
           },
           align: 'center',
         },
-        min: -1,
-        max: 1,
+        // min: -1,
+        // max: 1,
         opposite: false,
         tickWidth: 1,
-        tickInterval:0.2,
+        // tickInterval:0.2,
       }
 
       //处理series

+ 11 - 13
src/views/mychart_manage/components/chartDetailDia.vue

@@ -113,7 +113,7 @@
               class="span-item"
               style="margin-left: 7px"
               @click="saveChartMapHandle"
-              v-if="![3,6,7,8,9].includes(chartInfo.Source)"
+              v-if="![3,4,6,7,8,9].includes(chartInfo.Source)"
             >
               <span> <i class="el-icon-collection" />&nbsp;保存 </span>
             </span>
@@ -678,16 +678,16 @@ export default {
             } : res.Data.ChartInfo;
             //商品价格图
             this.initCommodityData(res.Data);
-          }else if([3,4].includes(this.chartInfo.Source)){//相关性 滚动相关性
+          }else if([3].includes(this.chartInfo.Source)){//相关性 滚动相关性
 
             this.relevanceChartData={
                 ChartInfo:res.Data.ChartInfo,
                 EdbInfoList:res.Data.EdbInfoList,
-                XEdbIdValue:this.chartInfo.Source === 3 ? res.Data.XEdbIdValue : res.Data.DataResp.XDateTimeValue,
+                XEdbIdValue:res.Data.XEdbIdValue,
                 CorrelationChartInfo:res.Data.CorrelationChartInfo,
                 YDataList:[
                   {
-                    Value: this.chartInfo.Source === 3 ? res.Data.YDataList[0].Value : res.Data.DataResp.YDataList[0].Value,
+                    Value: res.Data.YDataList[0].Value,
                     Color:'#00f',
                     Name:res.Data.ChartInfo.ChartName,
                     NameEn:res.Data.ChartInfo.ChartNameEn
@@ -697,6 +697,13 @@ export default {
             
             this.initRelevanceChartData()
             this.tableData = res.Data.EdbInfoList
+          }else if(this.chartInfo.Source===4) {//滚动相关性换成曲线图绘图
+            this.tableData = res.Data.EdbInfoList
+            this.relevanceChartData = {
+              CorrelationChartInfo: res.Data.CorrelationChartInfo
+            }
+            this.setDefaultChart([res.Data.DataResp]);
+
           }else if([6,7,8].includes(this.chartInfo.Source)){//拟合方程 标准差 百分比
             this.tableData = res.Data.EdbInfoList;
             
@@ -1021,15 +1028,6 @@ export default {
           ...dynamic_copyOptions[chartType]
         },
       }
-      if(this.options.isRelevanceChart){
-        svgObj={
-          ...svgObj,
-          xAxis:[{
-            ...this.options.xAxis,
-            offset:-(heightNum-136)/2
-          }],
-        }
-      }
       let svg = this.$refs.chartRef.chart.getSVG(svgObj);
       this.copyBlobItem(widthNum,heightNum,svg,type);
     },500),

+ 23 - 3
src/views/ppt_manage/mixins/mixins.js

@@ -185,6 +185,26 @@ export default {
         series: data,
         yAxis: ydata
       };
+
+       //滚动相关性独立tooltip
+      if(this.chartInfo.Source === 4) {
+        const { LeadValue,LeadUnit } = this.relevanceChartData.CorrelationChartInfo;
+        let relevanceUnitEnMap = this.relevanceUnitEnMap;
+        this.options.tooltip = {
+          formatter: function() {
+            let str = `${Highcharts.dateFormat('%Y/%m/%d',this.x)}<br><p>相关性系数:${this.y.toFixed(4)}</p><br><p>领先${LeadValue+LeadUnit}</p>`
+            return str
+          },
+          formatterCh: function() {
+            let str = `${Highcharts.dateFormat('%Y/%m/%d',this.x)}<br><p>相关性系数:${this.y.toFixed(4)}</p><br><p>领先${LeadValue+LeadUnit}</p>`
+            return str
+          },
+          formatterEn: function() {
+            let str = `${Highcharts.dateFormat('%Y/%m/%d',this.x)}<br><p>Correlation coefficient:${this.y.toFixed(4)}</p><br><p>lead${LeadValue+relevanceUnitEnMap[LeadUnit]}</p>`
+            return str
+          }
+        }
+      }
     },
 
     /* 堆叠柱 堆叠面积 组合图 */
@@ -970,11 +990,11 @@ export default {
           },
           align: 'center',
         },
-        min: -1,
-        max: 1,
+        // min: -1,
+        // max: 1,
         opposite: false,
         tickWidth: 1,
-        tickInterval:0.2,
+        // tickInterval:0.2,
       }
 
       //处理series

+ 9 - 7
src/views/ppt_manage/mixins/pptMixins.js

@@ -123,7 +123,7 @@ export default {
         this.dataList = [Data.EdbInfoList[0]];
         this.initCommodityData(res.Data)
         this.setCommodityLang(currentLang)
-      }else if([3,4].includes(this.chartInfo.Source)){
+      }else if([3].includes(this.chartInfo.Source)){//相关性
         this.relevanceChartData={
             ChartInfo:res.Data.ChartInfo,
 						EdbInfoList:res.Data.EdbInfoList,
@@ -140,6 +140,14 @@ export default {
         }
         this.initRelevanceChartData()
         this.changeRelevanceOptions(currentLang)
+      }else if(this.chartInfo.Source===4) {//滚动相关性换成曲线图绘图
+        this.dataList = [res.Data.DataResp];
+        this.relevanceChartData = {
+          CorrelationChartInfo: res.Data.CorrelationChartInfo
+        }
+        this.setDefaultChart([res.Data.DataResp]);
+        this.changeRelevanceOptions(currentLang)
+
       }else if([6,7,8].includes(this.chartInfo.Source)) {
         //拟合方程 标准差 百分比
         this.dataList = [res.Data.DataResp];
@@ -430,12 +438,6 @@ export default {
 
         if(!$(`#${refName}`)[0]) return
 
-        // 相关性图表判断当前图区域大小 动态设置x轴offset
-        if(options.isRelevanceChart){
-          const h=($(`#${refName}`)[0].offsetHeight-100)/2
-          options.xAxis.offset=-h
-        }
-
         if(is_linear)
           Highcharts.chart({
             // Highcharts 配置