商品价格曲线逻辑更改

src/views/chartShow/index.vue

@@ -172,39 +172,6 @@ export default defineComponent({
 
     };
 
-    /* 获取图表详情后赋值柱状图数据 */
-    const initBarData = (data: { XEdbIdValue: number[]; YDataList: any; EdbInfoList: any; ChartInfo: any; }) => {
-      const { XEdbIdValue,YDataList,EdbInfoList,ChartInfo } = data;
-
-      let xData = XEdbIdValue.map((_:number) => EdbInfoList.find((edb: { EdbInfoId: number; }) => edb.EdbInfoId===_).EdbAliasName)
-      console.log(xData)
-
-      state.barDateList = YDataList;
-      state.barXData = xData;
-      state.barEdbData = EdbInfoList;
-      state.barLimit = {
-        min: Number(ChartInfo.LeftMin),
-        max: Number(ChartInfo.LeftMax)
-      }
-
-      setBarChart();
-    }
-
-     /* 商品价格曲线获取详情赋值 */
-    const initCommodityData = (data: { XEdbIdValue: number[]; YDataList: any; EdbInfoList: any; ChartInfo: any; }) => {
-      const { XEdbIdValue,YDataList,EdbInfoList,ChartInfo } = data;
-
-      let xData = EdbInfoList.map(_ => _.EdbAliasName);
-      state.commodityEdbList = EdbInfoList;
-      state.commodityChartData = YDataList;
-      state.commodityXData = xData;
-      state.barLimit = {
-        min: Number(ChartInfo.LeftMin),
-        max: Number(ChartInfo.LeftMax)
-      }
-      setCommodityChart();
-    }
-
     //处理英文研报的图表英文设置不全的情况
     const setLangFromEnReport = () => {
       //来源于英文研报
@@ -861,6 +828,23 @@ export default defineComponent({
       console.log(state.options)
     }
 
+    /* 获取图表详情后赋值柱状图数据 */
+    const initBarData = (data: { XEdbIdValue: number[]; YDataList: any; EdbInfoList: any; ChartInfo: any; }) => {
+      const { XEdbIdValue,YDataList,EdbInfoList,ChartInfo } = data;
+
+      let xData = XEdbIdValue.map((_:number) => EdbInfoList.find((edb: { EdbInfoId: number; }) => edb.EdbInfoId===_).EdbAliasName)
+      console.log(xData)
+
+      state.barDateList = YDataList;
+      state.barXData = xData;
+      state.barEdbData = EdbInfoList;
+      state.barLimit = {
+        min: Number(ChartInfo.LeftMin),
+        max: Number(ChartInfo.LeftMax)
+      }
+
+      setBarChart();
+    }
     /* 奇怪柱状图 和以上逻辑无公用点 依赖数据为单独的数据
       x轴为指标名称的柱形图 以日期作为series
     */
@@ -936,16 +920,28 @@ export default defineComponent({
       }
     }
 
+     /* 商品价格曲线获取详情赋值 */
+    const initCommodityData = (data: { XDataList: any[]; YDataList: any; EdbInfoList: any; ChartInfo: any; }) => {
+      const { XDataList,YDataList,EdbInfoList,ChartInfo } = data;
+
+      state.commodityEdbList = EdbInfoList;
+      state.commodityChartData = YDataList;
+      state.commodityXData = XDataList;
+      state.barLimit = {
+        min: Number(ChartInfo.LeftMin),
+        max: Number(ChartInfo.LeftMax)
+      }
+      setCommodityChart();
+    }
     /* 商品价格曲线设置 绘图逻辑同奇怪柱形图*/
     const setCommodityChart = () => {
       const {barLimit,commodityChartData,commodityXData,commodityEdbList} = state;
       let seriesData:any[] = [];
       const data = _.cloneDeep(commodityChartData);
-
       //x轴
       let xAxis = {
         ...scatterXAxis,
-        categories: commodityEdbList.map(_ => language.value === 'ch' ? _.EdbAliasName:_.EdbAliasNameEn),
+        categories: commodityXData.map(_ => language.value === 'ch' ? _.Name:_.NameEn),
         tickWidth: 1,
         title: {
           text:  ``,
@@ -981,7 +977,7 @@ export default defineComponent({
       }
 
       //数据列
-      data.forEach((item: { Value: number; Name: string; Date: string; Color: string;NameEn: string }) => {
+      data.forEach((item: { Value: number[]; Name: string; Date: string; Color: string;NameEn: string,XEdbInfoIdList: number[],NoDataEdbList: number[] }) => {
         //处理首或/尾全是无效数据的以null填充
         let filterData = filterInvalidData(item)
 
@@ -1004,26 +1000,52 @@ export default defineComponent({
       let tooltip = {
         formatter: function() {
           const ctx: any = this;
-          let str: string;
+          let str: string = '';
 
           if(language.value === 'ch') {
-            str = `<strong>${ commodityEdbList.find(_ => _.EdbAliasName === ctx.x).EdbName }</strong>`;
-            ctx.points.forEach((item:{ series:{name: string},y: number }) => {
+            // str = `<strong>${ commodityEdbList.find(_ => _.EdbAliasName === ctx.x).EdbName }</strong>`;
+            // ctx.points.forEach((item:{ series:{name: string},y: number }) => {
+            //   let obj_item = data.find((_:any) => _.Name === item.series.name);
+            //   if(!obj_item.NoDataEdbList.includes(commodityEdbList.find(_ => _.EdbAliasName === ctx.x).EdbInfoId)) {
+            //     str += `<br>${obj_item.Date}: ${item.y}`
+            //   }else {
+            //     str += `<br>${obj_item.Date}: 无`
+            //   }
+            // })
+            
+            ctx.points.forEach((item: { series:{name: string},y: number,color: string }) => {
               let obj_item = data.find((_:any) => _.Name === item.series.name);
-              if(!obj_item.NoDataEdbList.includes(commodityEdbList.find(_ => _.EdbAliasName === ctx.x).EdbInfoId)) {
-                str += `<br>${obj_item.Date}: ${item.y}`
+              let index = commodityXData.findIndex(_ => _.Name === ctx.x);
+
+              str+=`<b>${ commodityEdbList.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbName }</b>`
+
+              if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
+                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: ${item.y}<br>`
               }else {
-                str += `<br>${obj_item.Date}: 无`
+                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: 无<br>`
               }
             })
           }else {
-            str = `<strong>${ commodityEdbList.find(_ => _.EdbAliasNameEn === ctx.x).EdbNameEn }</strong>`
-            ctx.points.forEach((item:{ series:{name: string},y: number }) => {
-              let obj_item = data.find((_:any) => _.NameEn === item.series.name);
-              if(!obj_item.NoDataEdbList.includes(commodityEdbList.find(_ => _.EdbAliasNameEn === ctx.x).EdbInfoId)) {
-                str += `<br>${obj_item.Date}: ${item.y}`
+            // str = `<strong>${ commodityEdbList.find(_ => _.EdbAliasNameEn === ctx.x).EdbNameEn }</strong>`
+            // ctx.points.forEach((item:{ series:{name: string},y: number }) => {
+            //   let obj_item = data.find((_:any) => _.NameEn === item.series.name);
+            //   if(!obj_item.NoDataEdbList.includes(commodityEdbList.find(_ => _.EdbAliasNameEn === ctx.x).EdbInfoId)) {
+            //     str += `<br>${obj_item.Date}: ${item.y}`
+            //   }else {
+            //     str += `<br>${obj_item.Date}: 无`
+            //   }
+            // })
+
+            ctx.points.forEach((item: { series:{name: string},y: number,color: string }) => {
+              let obj_item = data.find((_: any) => _.NameEn === item.series.name);
+              let index = commodityXData.findIndex(_ => _.NameEn === ctx.x);
+
+              str+=`<b>${ commodityEdbList.find(_ => _.EdbInfoId === obj_item.XEdbInfoIdList[index]).EdbNameEn }</b>`
+
+              if(!obj_item.NoDataEdbList.includes(obj_item.XEdbInfoIdList[index])) {
+                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: ${item.y}<br>`
               }else {
-                str += `<br>${obj_item.Date}: 无`
+                str += `<br><span style="color:${item.color}">\u25CF</span>${obj_item.Date}: 无<br>`
               }
             })
           }
@@ -1043,18 +1065,16 @@ export default defineComponent({
         tooltip
       }
     };
-
     /* 处理无效数据为null */
-    const filterInvalidData = (item:any)=> {
-      const { commodityEdbList } = state;
-      let validateArr = commodityEdbList.filter(_ =>!item.NoDataEdbList.includes(_.EdbInfoId));
+    const filterInvalidData = (item:{ Value: number[]; Name: string; Date: string; Color: string;NameEn: string,XEdbInfoIdList: number[],NoDataEdbList: number[] })=> {
+      let validateArr = item.XEdbInfoIdList.filter(_ =>!item.NoDataEdbList.includes(_));
 
-      let first_index = commodityEdbList.findIndex(_ => _.EdbInfoId === validateArr[0].EdbInfoId);
-      let last_index = commodityEdbList.findIndex(_ => _.EdbInfoId === validateArr[validateArr.length-1].EdbInfoId);
+      let first_index = item.XEdbInfoIdList.findIndex(_ => _ === validateArr[0]);
+      let last_index = item.XEdbInfoIdList.findIndex(_ => _ === validateArr[validateArr.length-1]);
       console.log('first_index',first_index)
       console.log('last_index',last_index)
 
-      let arr = item.Value.map((item:any,index:number) => {
+      let arr = item.Value.map((item,index:number) => {
         if(index < first_index || index > last_index) {
           return null
         }else {

src/views/chartShow/typing.ts

@@ -15,6 +15,6 @@ export interface IState {
 	barEdbData: any[];
 	barLimit: BarLimitProps;
 	commodityChartData: any[];
-	commodityXData: string[];
+	commodityXData: any[];
 	commodityEdbList: any[];
 }