兼容截面散点图

src/views/chartShow/index.vue

@@ -9,7 +9,6 @@
         class="chart-wrapper"
         id="chart-wrapper"
         v-loading="loading"
-        element-loading-spinner="el-icon-loading"
         element-loading-text="加载中..."
       >
         <chart :options="options" :chartId="chartInfo.ChartInfoId || 0" />
@@ -154,13 +153,20 @@ export default defineComponent({
         setLangFromEnReport();
         document.title = language.value==='ch'?Data.ChartInfo.ChartName:Data.ChartInfo.ChartNameEn;
 
+        //eta图
         if(Data.ChartInfo.Source === 1) {
-          state.chartInfo.ChartType === 7 ? initBarData(Data) : setOptions();
-        }else if(Data.ChartInfo.Source === 2) {
-          initCommodityData(Data)
-        }else if(Data.ChartInfo.Source === 3){
-          initRelevanceChartData(Data)
+          const typeMap = {
+            7: initBarData,
+            10: initSectionScatterData
+          }
+          typeMap[state.chartInfo.ChartType] ? typeMap[state.chartInfo.ChartType](Data) : setOptions();
+        }
+
+        const sourceTypeMap = {
+          2: initCommodityData,
+          3: initRelevanceChartData
         }
+        sourceTypeMap[Data.ChartInfo.Source] && sourceTypeMap[Data.ChartInfo.Source](Data);
         
         dealSourceHandle();
         haveData.value = true;
@@ -278,15 +284,184 @@ export default defineComponent({
       }
     }
 
+
+    /* 散点截面图 */
+    const sectionScatterData = ref<any>({});
+    const initSectionScatterData = (data: { DataResp:any,EdbInfoList:any[] }) => {
+      sectionScatterData.value = data.DataResp;
+
+      state.barLimit.min=Number(data.DataResp.YMinValue)
+      state.barLimit.max=Number(data.DataResp.YMaxValue)
+      state.barLimit.x_min=Number(data.DataResp.XMinValue)
+      state.barLimit.x_max=Number(data.DataResp.XMaxValue)
+
+      //校验英文名称是否完整
+      if(route.query.fromPage === 'en') {
+        const { XNameEn,XUnitNameEn,YNameEn,YUnitNameEn,DataList } = data.DataResp;
+        let isAllEn = true;
+        if(!XNameEn || !XUnitNameEn || !YNameEn || !YUnitNameEn) isAllEn = false;
+        if(DataList.some(_ => !_.NameEn)) isAllEn = false;
+        console.log(isAllEn)
+        language.value = isAllEn ? 'en' : 'ch';
+      }
+
+      setSectionScatterChart()
+    }
+    /* 截面散点图设置 sectionScatterData */
+    const setSectionScatterChart = () => {
+        const { barLimit } = state;
+        const { DataList,XName,XNameEn,XUnitName,XUnitNameEn,YName,YNameEn,YUnitName,YUnitNameEn } = sectionScatterData.value;
+        const { min,max,x_min,x_max }  = barLimit;
+
+        //y轴
+        let yAxis = {
+            ...basicYAxis,
+            title: {
+                text: language.value === 'ch' ? YName : YNameEn,
+                align: 'middle',
+            },
+            opposite: false,
+            reversed: false,
+            min: Number(min),
+            max: Number(max),
+            tickWidth: 1,
+        }
+
+        //x轴
+        let xAxis = {
+            ...scatterXAxis,
+            title: {
+                text: language.value === 'ch' ? XName : XNameEn,
+                align: 'middle',
+            },
+            min: Number(x_min),
+            max: Number(x_max),
+        }
+
+        //数据列
+        let series: any[] = [];
+        DataList.forEach(item => {
+            //数据列
+            let series_item = {
+                data: [] as any[],
+                type: 'scatter',
+                name: language.value === 'ch' ? item.Name : item.NameEn,
+                color: item.Color,
+                lineWidth: 0,
+                chartType: 'linear',
+                zIndex:1,
+                visible: true
+            }
+            item.EdbInfoList.forEach(_ => {
+                series_item.data.push({
+                x: _.XValue,
+                y: _.YValue,
+                dataLabels: {
+                    enabled: _.IsShow,
+                    allowOverlap: true,
+                    align: 'left',
+                    format: language.value === 'ch' ? _.Name : _.NameEn
+                }
+                })
+            })
+            series.push(series_item);
+
+        //趋势线
+        if(item.ShowTrendLine)  {
+            
+            let trend_data = item.TrendLimitData.map((_,_index) => (
+                _index === item.TrendLimitData.length-1 ? {
+                    x: _.X,
+                    y: _.Y,
+                    dataLabels: {
+                      enabled: item.ShowRSquare || item.ShowFitEquation,
+                      align: 'left',
+                      color: '#666',
+                      x: 20,
+                      y: 30,
+                      zIndex: 9,
+                      allowOverlap: true,
+                      formatter: function(){
+                          let tag = '';
+                          item.ShowRSquare && item.ShowFitEquation
+                          ? tag =`<span>${item.TrendLine}</span><br><span>R²=${item.RSquare}</span>`
+                          : item.ShowRSquare && !item.ShowFitEquation
+                          ? tag =`<span>R²=${item.RSquare}</span>`
+                          : item.ShowFitEquation && !item.ShowRSquare
+                          ? tag =`<span>${item.TrendLine}</span>`
+                          : ''
+                          return tag
+                      }
+                    }
+                } : {
+                    x: _.X,
+                    y: _.Y,
+                }
+            ))
+
+            let trend_item = {
+                data: trend_data,
+                type: 'spline',
+                linkedTo: ':previous',
+                color: item.Color,
+                lineWidth: 1,
+                chartType: 'linear',
+                enableMouseTracking: false,
+                dashStyle:'Dash',
+                zIndex: 2,
+                visible: true,
+                marker: {
+                    enabled: false
+                }
+            }
+            series.push(trend_item)
+        }
+        })
+
+        let tooltip = {
+            formatter: function() {
+                const that:any = this;
+                let str = '';
+                if(language.value === 'ch') {
+                  let series_obj = DataList.find(_ => _.Name === that.series.name);
+                  let ponit_obj = series_obj.EdbInfoList.find(_ => _.XValue ===that.x && _.YValue===that.y);
+  
+                  str=`<b>${ ponit_obj.Name }</b>`;
+                  str += `<br><span style="color:${that.color}">\u25CF</span>${ponit_obj.XName}: ${that.x} ${ponit_obj.XDate}<br>`;
+                  str += `<span style="color:${that.color}">\u25CF</span>${ponit_obj.YName}: ${that.y} (${ponit_obj.YDate})`;
+                }else {
+                  let series_obj = DataList.find(_ => _.NameEn === that.series.name);
+                  let ponit_obj = series_obj.EdbInfoList.find(_ => _.XValue ===that.x && _.YValue===that.y);
+
+                  str=`<b>${ ponit_obj.NameEn }</b>`;
+                  str += `<br><span style="color:${that.color}">\u25CF</span>${ponit_obj.XNameEn}: ${that.x} ${ponit_obj.XDate}<br>`;
+                  str += `<span style="color:${that.color}">\u25CF</span>${ponit_obj.YNameEn}: ${that.y} ${ponit_obj.YDate}`;
+
+                }
+                return str
+            }
+        }
+        
+        state.options = {
+            title: {
+                text:''
+            },
+            series,
+            yAxis: [yAxis],
+            xAxis,
+            tooltip
+        }
+    }
+
+
     //处理英文研报的图表英文设置不全的情况
     const setLangFromEnReport = () => {
       //来源于英文研报
-      if(route.query.fromPage === 'en') {
-        let is_name_en = state.chartInfo.ChartNameEn ? true : false;//名称是否有英文
-        let is_target_en = [2,9].includes(state.chartInfo.ChartType) ? true : state.dataList.every(_ => _.EdbNameEn ? true : false);//指标是否有英文
-        console.log(is_name_en,is_target_en)
-        language.value = (is_name_en && is_target_en) ? 'en' : 'ch';
-      }
+      if(route.query.fromPage !== 'en') return
+      let is_name_en = state.chartInfo.ChartNameEn ? true : false;//名称是否有英文
+      let is_target_en = [2,9].includes(state.chartInfo.ChartType) ? true : state.dataList.every(_ => _.EdbNameEn);//指标是否有英文
+      console.log(is_name_en,is_target_en)
+      language.value = (is_name_en && is_target_en) ? 'en' : 'ch';
     }
 
     // 曲线图x轴显示计算年限差 >1年 显示年/月 <=1 显示月/日
@@ -458,13 +633,6 @@ export default defineComponent({
       return [left_edbs,right_edbs,right_two_edbs].flat(Infinity);
     }
 
-    const getLabelMaxLen = (data : any[]) => {
-      let value_arr = data.map(_ => String(Math.abs(_.Value)));
-      let max_len_value = value_arr.reduce((a,b)=> (a.length > b.length ? a : b))
-      let num =  Number(max_len_value) > 1 ?  String(Math.floor(Number(max_len_value))) : max_len_value
-      return num.length
-    }
-
     /* 堆叠图/组合图设置  
     本来和曲线图逻辑基本一致兼容下即可 为了以后便于维护和阅读还是拆开写吧
      */
@@ -1284,7 +1452,7 @@ export default defineComponent({
 
     const refreshChart = _.debounce(async () => {
       loading.value = true;
-      let Ret=null
+      let Ret:any =null;
       if(state.chartInfo.Source === 1){
         Ret=await ChartApi.refreshChart({UniqueCode: state.chartInfo.UniqueCode})
       }else if(state.chartInfo.Source === 2){

src/views/chartShow/typing.ts

@@ -3,6 +3,8 @@ import { IChartinfo, IDataProps } from "@/types";
 export interface BarLimitProps {
 	min?: number;
 	max?: number;
+	x_min?:number;
+	x_max?:number;
 }
 export interface IState {
 	options: any;