兼容相关性图表

src/api/hzyb/chart.js

@@ -114,7 +114,7 @@ export const apiMyChartClassifyAdd=params=>{
 }
 
 /**
- * 获取商品价格曲线数据
+ * 获取商品价格曲线数据/相关性图表数据
  * @param {*} ChartInfoId 
  * @returns 
  */

src/views/hzyb/chart/Detail.vue

@@ -4,7 +4,7 @@ import noAuth from './component/noAuth.vue'
 import sharePoster from '../components/SharePoster.vue'
 import collectBox from './component/collectBox.vue'
 import { Popup, Toast,Picker } from 'vant';
-import {ref,onMounted, reactive, watch,computed} from 'vue'
+import {ref,onMounted, reactive, watch,computed,nextTick} from 'vue'
 import {useRoute, useRouter,onBeforeRouteUpdate} from 'vue-router'
 import moment from 'moment'
 import _ from 'lodash';
@@ -192,7 +192,7 @@ const calendarTypeChange=(val)=>{
 
 // 获取详情
 let ChartInfoId=route.query.ChartInfoId
-let chartSource = Number(route.query.chartSource); //图表来源 1 eta图 2商品价格图
+let chartSource = Number(route.query.chartSource); //图表来源 1 eta图 2商品价格图 3相关性图表
 let chartData=ref({
     series:[],
     xAxis:[],
@@ -217,6 +217,8 @@ const getChartInfo=async (type)=>{
     // resData.value=null
     loading.value=true
 
+    //相关性图表
+    if(chartSource===3) return getRelevanceDetail();
     //商品价格曲线调另外的接口
     if(chartSource===2) return getCommordityDetail();
 
@@ -303,7 +305,8 @@ const getCommordityDetail = async() => {
     loading.value=false
     if(res.code===200){
         resData.value=res.data
-
+        
+        relevanceChartData.value=res.data
         initCommodityData(res.data);
 
         // 向小程序发送分享数据
@@ -326,9 +329,138 @@ const getCommordityDetail = async() => {
     }
 
 }
+//获取相关性图表
+const getRelevanceDetail=async ()=>{
+    const res = await apiCommonChartDetail({ChartInfoId})
+    loading.value=false
+    if(res.code===200){
+        resData.value=res.data
+        relevanceChartData.value=res.data
+        initRelevanceChart(res.data);
+
+        // 向小程序发送分享数据
+        let postData = {
+            params:{
+                chartInfoId:ChartInfoId,
+                searchVal:decodeURIComponent(route.query.searchVal)||'',
+                chartSource,
+                MyChartId:route.query.MyChartId||'',
+                MyChartClassifyId:route.query.MyChartClassifyId||'',
+            },
+            title: res.data.ChartInfo.ChartName,
+            shareImg:res.data.ChartInfo.ChartImage
+        };
+        wx.miniProgram.postMessage({ data: postData });
+
+    }else if(res.code==403){
+        noauth.value=true
+        noAuthData.value=res.data
+    }
+}
 getChartInfo('init')
 
 
+//相关性图表设置
+const relevanceChartData=ref(null)
+const initRelevanceChart=(data)=>{
+    // 处理X轴
+    let xAxis={
+        categories: data.XEdbIdValue,
+        tickWidth: 1,
+        title: {
+          text:  `期数（${data.CorrelationChartInfo.LeadUnit}）`,
+          align: 'high',
+          rotation: 0,
+          x: 0,
+          y:10,
+          offset: 20,
+        },
+        tickInterval: 1,
+        offset:0,
+        tickmarkPlacement:'on'
+    }
+
+    // 处理Y轴
+    let yAxis={
+        ...basicYAxis,
+        title: {
+          text: '相关性系数',
+          textCh: '相关性系数',
+          textEn: 'Correlation coefficient',
+          align: 'high',
+          rotation: 0,
+          y: -15,
+          offset: 0,
+        },
+        labels: {
+          formatter: function (ctx) {
+            let val = ctx.value;
+            return val;
+          },
+          align: 'center',
+        },
+        min: -1,
+        max: 1,
+        opposite: false,
+        tickWidth: 1,
+        tickInterval:0.2,
+    }
+
+    //处理series
+    let seriesData=[]
+    data.YDataList.forEach(item=>{
+        let serie_item = {
+          data: item.Value,
+          type: 'spline',
+          yAxis: 0,
+          name: data.ChartInfo.ChartName,
+          nameCh: data.ChartInfo.ChartName,
+          nameEn: data.ChartInfo.ChartName,
+          color: '#00f',
+          chartType: 'linear',
+          lineWidth: 3,
+          visible:true,
+          marker: {
+            enabled: false
+          }
+        };
+        seriesData.push(serie_item)
+    })
+
+    let tooltip = {
+        formatter: function() {
+          let str = `<p>相关性系数：${this.y}</p>`
+          return str
+        },
+        formatterCh: function() {
+          let str = `<p>相关性系数：${this.y}</p>`
+          return str
+        },
+        formatterEn: function() {
+          let str = `<p>Correlation coefficient：${this.y}</p>`
+          return str
+        }
+    }
+    
+    nextTick(()=>{
+        const hEl=document.getElementById('chart-box')
+        console.log(hEl.offsetHeight);
+        xAxis.offset=-(hEl.offsetHeight-74)/2
+        chartData.value = {
+            isRelevanceChart:true,
+            title: {
+                text:''
+            },
+            series: seriesData,
+            yAxis: [yAxis] ,
+            xAxis:xAxis,
+            tooltip
+        }
+    })
+    
+}
+
+
 /* 奇怪柱形图 */
 const barDateList = ref([]);//柱形图的绘图数据
 const barXData = ref([]);//柱形图的x轴
@@ -1725,7 +1857,7 @@ const posterParams=computed(()=>{
             >
                 <img class="icon" src="@/assets/hzyb/share-poster-chart-icon.png" alt="">
             </share-poster>
-            <img class="icon" src="../../../assets/hzyb/chart/save.png" alt="" @click="handleSaveChart" v-if="canSave">
+            <img class="icon" src="../../../assets/hzyb/chart/save.png" alt="" @click="handleSaveChart" v-if="canSave&&$route.query.chartSource!=3">
             <img class="icon" src="../../../assets/hzyb/chart/refresh.png" alt="" @click="handleRefreshChart">
         </div>
         
@@ -1746,7 +1878,7 @@ const posterParams=computed(()=>{
                 <span :class="calendarType==='农历'&&'active'" @click="calendarTypeChange('农历')">农历</span>
                 <span :class="calendarType==='公历'&&'active'" @click="calendarTypeChange('公历')">公历</span>
             </div>
-            <span style="color:#E3B377;flex:1;text-align:right" @click="showLimit=true">上下限设置</span>
+            <span style="color:#E3B377;flex:1;text-align:right" @click="showLimit=true" v-if="resData.ChartInfo.Source!=3">上下限设置</span>
         </div>
         <div class="source-box" style="margin-top:5px" v-if="resData&&resData.ChartInfo.ChartType===2">来源：{{resData&&resData.ChartInfo.ChartSource}}</div>