兼容商品价格曲线

src/request/api.ts

@@ -15,8 +15,9 @@ export const ChartApi = {
 	 * @returns 
 	 */
 	getChart: (params:IChartParams) => {
-		return get('/chart/detail',params);
+		return get('/chart/common/detail',params);
 	},
+	
 	/**
 	 * 图表刷新
 	 * @param params UniqueCode
@@ -24,6 +25,15 @@ export const ChartApi = {
 	 */
 	refreshChart: (params:IRefreshParams) => {
 		return get('/chart/refresh',params)
+	},
+
+	/**
+	 * 商品价格图表刷新
+	 * @param params UniqueCode
+	 * @returns 
+	 */
+	refreshCommordityChart: (params:IRefreshParams) => {
+		return get('/chart/future_good/refresh',params)
 	}
 }
 

src/views/chartShow/index.vue

@@ -97,7 +97,12 @@ export default defineComponent({
       barDateList: [],//柱形图的绘图数据
       barXData: [],//柱形图的x轴
       barEdbData: [],//柱形图的表格数据 只用于取值
-      barLimit: {}
+      barLimit: {},
+      
+      /* 商品价格曲线 */
+      commodityChartData: [],
+      commodityXData: [],
+      commodityEdbList: [],
     });
 
     onMounted((): void => {
@@ -143,16 +148,21 @@ export default defineComponent({
         });
         loading.value = false;
         state.chartInfo = Data.ChartInfo;
-        state.dataList = Data.EdbInfoList;
+        if(Data.ChartInfo.Source === 1) {
+          state.dataList = Data.EdbInfoList;
+          state.chartInfo.ChartType === 7 ? initBarData(Data) : setOptions();
+        }else {
+          state.dataList = [Data.EdbInfoList[0]];
+          initCommodityData(Data)
+        }
+
         document.title = state.chartInfo.ChartType === 7 
           ? Data.ChartInfo.ChartName 
           : language.value==='ch'?Data.ChartInfo.ChartName:Data.ChartInfo.ChartNameEn;
         haveData.value = true;
         //处理英文研报英文设置不全就展示中文
         setLangFromEnReport();
-
         dealSourceHandle();
-        state.chartInfo.ChartType === 7 ? initBarData(Data) : setOptions();
         type === 'refresh' && ElMessage.success('刷新成功');
       }catch (e) {
         loading.value = false;
@@ -179,6 +189,21 @@ export default defineComponent({
       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 = () => {
       //来源于英文研报
@@ -188,8 +213,6 @@ export default defineComponent({
         console.log(is_name_en,is_target_en)
         language.value = (is_name_en && is_target_en) ? 'en' : 'ch';
       }
-
-    
     }
 
     // 曲线图x轴显示计算年限差 >1年 显示年/月 <=1 显示月/日
@@ -912,6 +935,101 @@ export default defineComponent({
       }
     }
 
+    /* 商品价格曲线设置 绘图逻辑同奇怪柱形图*/
+    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),
+        tickWidth: 1,
+        title: {
+          text:  ``,
+          align: 'high',
+          rotation: 0,
+          x: 0,
+          offset: 20,
+        },
+      }
+
+      const { max,min } = barLimit;
+      //y轴
+      let yAxis = {
+        ...basicYAxis,
+        title: {
+          text: language.value === 'ch' ? commodityEdbList[0].Unit : commodityEdbList[0].UnitEn,
+          align: 'high',
+          rotation: 0,
+          y: -15,
+          offset: 0,
+        },
+        labels: {
+          formatter: function (ctx:any) {
+            let val = ctx.value;
+            return val;
+          },
+          align: 'center',
+        },
+        min: Number(min),
+        max: Number(max),
+        opposite: false,
+        tickWidth: 1,
+      }
+
+      //数据列
+      data.forEach((item: { Value: number; Name: string; Date: string; Color: string;NameEn: string }) => {
+        let serie_item = {
+          data: item.Value,
+          type: 'spline',
+          yAxis: 0,
+          name: language.value === 'ch' ? item.Name : item.NameEn,
+          color: item.Color,
+          chartType: 'linear',
+          lineWidth: 3,
+          marker: {
+            enabled: false
+          }
+        };
+        seriesData.push(serie_item)
+      })
+
+      //tooltip
+      let tooltip = {
+        formatter: function() {
+          const ctx: any = this;
+          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 += `<br>${data.find((_:any) => _.Name === item.series.name).Date}: ${item.y}`
+            })
+          }else {
+            str = `<strong>${ commodityEdbList.find(_ => _.EdbAliasNameEn === ctx.x).EdbNameEn }</strong>`
+            ctx.points.forEach((item:{ series:{name: string},y: number }) => {
+              str += `<br>${data.find((_:any) => _.NameEn === item.series.name).Date}: ${item.y}`
+            })
+          }
+
+          return str
+        },
+        shared: true
+      }
+      
+      state.options = {
+        title: {
+          text:''
+        },
+        series: seriesData,
+        yAxis: [ yAxis ],
+        xAxis,
+        tooltip
+      }
+    };
+
     /* 设置options */
     const setOptions = () => {
       // ChartType: 1曲线图 2季节图 3面积图 4柱状图 5散点图 6组合图  季节图中公历和农历数据结构不同
@@ -1022,7 +1140,10 @@ export default defineComponent({
 
     const refreshChart = _.debounce(async () => {
       loading.value = true;
-      let { Ret } = await ChartApi.refreshChart({ UniqueCode: state.chartInfo.UniqueCode });
+      let { Ret } = state.chartInfo.Source === 1 
+        ? await ChartApi.refreshChart({UniqueCode: state.chartInfo.UniqueCode})
+        : await ChartApi.refreshCommordityChart({UniqueCode: state.chartInfo.UniqueCode});
+        
       Ret === 200 && getChartInfo('refresh');
     },400)
 

src/views/chartShow/typing.ts

@@ -13,5 +13,8 @@ export interface IState {
 	barDateList: any[];
 	barXData: string[];
 	barEdbData: any[];
-	barLimit: BarLimitProps
+	barLimit: BarLimitProps;
+	commodityChartData: any[];
+	commodityXData: string[];
+	commodityEdbList: any[];
 }