合一下master

src/views/chartShow/index.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="chart-show">
     <header class="chart-header" @click="openNew">
-      <span class="chart-title" @click.stop @dblclick="copyText">{{ chartInfo.ChartType === 7 ? chartInfo.ChartName : language == 'ch'?chartInfo.ChartName: chartInfo.ChartNameEn}}</span>
+      <span class="chart-title" @click.stop @dblclick="copyText">{{ language === 'ch'?chartInfo.ChartName: chartInfo.ChartNameEn}}</span>
     </header>
     <template v-if="haveData">
       <div
@@ -95,7 +95,7 @@ export default defineComponent({
 
       /* 奇怪柱形图 */
       barDateList: [],//柱形图的绘图数据
-      barXData: [],//柱形图的x轴
+      barXIdData: [],//柱形图的x轴id
       barEdbData: [],//柱形图的表格数据 只用于取值
       barLimit: {},
       
@@ -152,9 +152,7 @@ export default defineComponent({
 
         //处理英文研报英文设置不全就展示中文
         setLangFromEnReport();
-        document.title = state.chartInfo.ChartType === 7 
-          ? Data.ChartInfo.ChartName 
-          : language.value==='ch'?Data.ChartInfo.ChartName:Data.ChartInfo.ChartNameEn;
+        document.title = language.value==='ch'?Data.ChartInfo.ChartName:Data.ChartInfo.ChartNameEn;
 
         if(Data.ChartInfo.Source === 1) {
           state.chartInfo.ChartType === 7 ? initBarData(Data) : setOptions();
@@ -280,39 +278,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 = () => {
       //来源于英文研报
@@ -662,8 +627,8 @@ export default defineComponent({
     /* 季节图 */
     const setSeasonOptions = () => {
       const chartData = state.dataList[0];
-      let seasonYdata = [],
-        seasonData = [],
+      let seasonYdata:any[] = [],
+        seasonData:any[] = [],
         chart = {
           spacing: [5, 8, 2, 8],
         };
@@ -969,18 +934,36 @@ export default defineComponent({
       console.log(state.options)
     }
 
+    /* 获取图表详情后赋值柱状图数据 */
+    const initBarData = (data: { XEdbIdValue: number[]; YDataList: any; EdbInfoList: any; ChartInfo: any; }) => {
+      const { XEdbIdValue,YDataList,EdbInfoList,ChartInfo } = data;
+
+      state.barDateList = YDataList;
+      state.barXIdData = XEdbIdValue;
+      state.barEdbData = EdbInfoList;
+      state.barLimit = {
+        min: Number(ChartInfo.LeftMin),
+        max: Number(ChartInfo.LeftMax)
+      }
+
+      setBarChart();
+    }
     /* 奇怪柱状图 和以上逻辑无公用点 依赖数据为单独的数据
       x轴为指标名称的柱形图 以日期作为series
     */
     const setBarChart = () => {
-      const {barDateList,barXData,barLimit} = state;
+      const {barDateList,barXIdData,barLimit,barEdbData} = state;
       let seriesData: { data: any; type: string; yAxis: number; name: any; color: any; chartType: string; }[] = [];
       const data = _.cloneDeep(barDateList);
 
+      let categories = language.value==='ch' 
+        ? barXIdData.map((_:number) => barEdbData.find((edb: { EdbInfoId: number; }) => edb.EdbInfoId===_).EdbAliasName)
+        : barXIdData.map((_:number) => barEdbData.find((edb: { EdbInfoId: number; }) => edb.EdbInfoId===_).EdbNameEn)
+
       //x轴
       let xAxis = {
         ...scatterXAxis,
-        categories: barXData,
+        categories,
         tickWidth: 1,
         title: {
           text:  ``,
@@ -1022,7 +1005,7 @@ export default defineComponent({
           data: item.Value,
           type: 'column',
           yAxis: 0,
-          name: item.Name || item.Date,
+          name: language.value==='ch' ? (item.Name || item.Date) : item.Date,
           color: item.Color,
           chartType: 'linear'
         };
@@ -1044,16 +1027,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:  ``,
@@ -1089,7 +1084,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)
 
@@ -1112,26 +1107,34 @@ 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 }) => {
+            
+            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}`
+
+            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>`
               }
             })
           }
@@ -1151,18 +1154,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

@@ -11,10 +11,10 @@ export interface IState {
 	dataList: any[];
 	sourceName: string;
 	barDateList: any[];
-	barXData: string[];
+	barXIdData: number[];
 	barEdbData: any[];
 	barLimit: BarLimitProps;
 	commodityChartData: any[];
-	commodityXData: string[];
+	commodityXData: any[];
 	commodityEdbList: any[];
 }