兼容商品价格曲线功能

src/views/hzyb/chart/Detail.vue

@@ -192,6 +192,7 @@ const calendarTypeChange=(val)=>{
 
 // 获取详情
 let ChartInfoId=route.query.ChartInfoId
+let chartSource = Number(route.query.charSource); //图表来源 1 eta图 2商品价格图
 let chartData=ref({
     series:[],
     xAxis:[],
@@ -214,6 +215,10 @@ let noAuthData=ref(null)
 const getChartInfo=async (type)=>{
     // resData.value=null
     loading.value=true
+
+    //商品价格曲线调另外的接口
+    if(chartSource===2) return getCommordityDetail();
+
     let res=null
     // 如果是从我的图库中来的
     if(route.query.source=='ybxcx_my_chart'){
@@ -274,6 +279,7 @@ const getChartInfo=async (type)=>{
             params:{
                 chartInfoId:ChartInfoId,
                 searchVal:decodeURIComponent(route.query.searchVal)||'',
+                chartSource,
                 MyChartId:route.query.MyChartId||'',
                 MyChartClassifyId:route.query.MyChartClassifyId||'',
             },
@@ -288,6 +294,35 @@ const getChartInfo=async (type)=>{
         noAuthData.value=res.data
     }
 }
+//获取商品价格曲线数据
+const getCommordityDetail = async() => {
+    const res = await apiCommonChartDetail({ChartInfoId})
+    loading.value=false
+    if(res.code===200){
+        resData.value=res.data
+
+        initCommodityData(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')
 
 
@@ -312,6 +347,188 @@ const initBarData = (data) => {
 
     setBarChart();
 }
+/* 奇怪柱状图 和其他逻辑无公用点 依赖数据为单独的数据
+    x轴为指标名称的柱形图 以日期作为series
+*/
+const setBarChart = () => {
+    let seriesData = [];
+    const data = _.cloneDeep(barDateList.value);
+
+    //x轴
+    let xAxis = {
+        ...scatterXAxis,
+        categories: barXData.value,
+        tickWidth: 1,
+        title: {
+            text:  ``,
+            align: 'high',
+            rotation: 0,
+            x: 0,
+            offset: 20,
+        },
+    }
+
+    const { leftMin,leftMax } = axisLimitData;
+    console.log(leftMin,leftMax)
+    //y轴
+    let yAxis = {
+        ...basicYAxis,
+        title: {
+            text:  ``,
+            align: 'high',
+            rotation: 0,
+            y: -15,
+            offset: 0,
+        },
+        labels: {
+            formatter: function (ctx) {
+            let val = ctx.value;
+            return val;
+            },
+            align: 'center',
+        },
+        min: Number(leftMin),
+        max: Number(leftMax),
+        opposite: false,
+        tickWidth: 1,
+    }
+
+    //数据列
+    data.forEach(item => {
+        let serie_item = {
+            data: item.Value,
+            type: 'column',
+            yAxis: 0,
+            name: item.Name || item.Date,
+            color: item.Color,
+            chartType: 'linear',              
+            visible:true,
+        };
+        seriesData.push(serie_item)
+    })
+    
+    chartData.value = {
+        title: {
+            text:''
+        },
+        plotOptions: {
+            column:{
+            stacking: null,
+            },
+        },
+        series: seriesData,
+        yAxis: [ yAxis ],
+        xAxis
+    }
+}
+
+
+/* 商品价格图 */
+const commodityChartData = ref([]);//商品价格图的绘图数据
+const commodityXData = ref([]);//商品价格图的x轴
+const commodityEdbList = ref([]);//商品价格图的表格数据 只用于取值
+ /* 商品价格曲线获取详情赋值 */
+const initCommodityData = (data) => {
+    const { XEdbIdValue,YDataList,EdbInfoList,ChartInfo } = data;
+
+    let xData = EdbInfoList.map(_ => _.EdbAliasName);
+    commodityEdbList.value = EdbInfoList;
+    commodityChartData.value = YDataList;
+    commodityXData.value = xData;
+
+    hasLeftAxis.value=true;
+    axisLimitData.leftMin=Number(ChartInfo.LeftMin)
+    axisLimitData.leftMax=Number(ChartInfo.LeftMax)
+
+    setCommodityChart();
+}
+/* 商品价格曲线设置 绘图逻辑同奇怪柱形图*/
+const setCommodityChart = () => {
+    // const {barLimit,commodityChartData,commodityXData,commodityEdbList} = state;
+    
+    let seriesData = [];
+    const data = _.cloneDeep(commodityChartData.value);
+
+    //x轴
+    let xAxis = {
+        ...scatterXAxis,
+        categories: commodityXData.value,
+        tickWidth: 1,
+        title: {
+            text:  ``,
+            align: 'high',
+            rotation: 0,
+            x: 0,
+            offset: 20,
+        },
+    }
+
+    const { leftMin,leftMax } = axisLimitData;
+    //y轴
+    let yAxis = {
+        ...basicYAxis,
+        title: {
+            text: commodityEdbList.value[0].Unit,
+            align: 'high',
+            rotation: 0,
+            y: -15,
+            offset: 0,
+        },
+        labels: {
+            formatter: function (ctx) {
+            let val = ctx.value;
+            return val;
+            },
+            align: 'center',
+        },
+        min: Number(leftMin),
+        max: Number(leftMax),
+        opposite: false,
+        tickWidth: 1,
+    }
+
+    //数据列
+    data.forEach(item => {
+        let serie_item = {
+            data: item.Value,
+            type: 'spline',
+            yAxis: 0,
+            name: item.Name,
+            color: item.Color,
+            chartType: 'linear',
+            lineWidth: 3,
+            marker: {
+            enabled: false
+            }
+        };
+        seriesData.push(serie_item)
+    })
+
+    //tooltip
+    let tooltip = {
+        formatter: function() {
+            const ctx = this;
+            let str = `<strong>${ commodityEdbList.value.find(_ => _.EdbAliasName === ctx.x).EdbName }</strong>`;
+            ctx.points.forEach(item => {
+                str += `<br>${data.find(_ => _.Name === item.series.name).Date}: ${item.y}`
+            })
+            return str
+        },
+        shared: true
+    }
+    
+    chartData.value = {
+        title: {
+            text:''
+        },
+        series: seriesData,
+        yAxis: [ yAxis ],
+        xAxis,
+        tooltip
+    }
+};
+
+
 
 // 路由改变 解决从搜索页返回数据不刷新问题
 onBeforeRouteUpdate((nval)=>{
@@ -1115,81 +1332,6 @@ const setScatterOptions = (dataList) => {
     }
 }
 
-/* 奇怪柱状图 和以上逻辑无公用点 依赖数据为单独的数据
-    x轴为指标名称的柱形图 以日期作为series
-*/
-const setBarChart = () => {
-    let seriesData = [];
-    const data = _.cloneDeep(barDateList.value);
-
-    //x轴
-    let xAxis = {
-        ...scatterXAxis,
-        categories: barXData.value,
-        tickWidth: 1,
-        title: {
-            text:  ``,
-            align: 'high',
-            rotation: 0,
-            x: 0,
-            offset: 20,
-        },
-    }
-
-    const { leftMin,leftMax } = axisLimitData;
-    console.log(leftMin,leftMax)
-    //y轴
-    let yAxis = {
-        ...basicYAxis,
-        title: {
-            text:  ``,
-            align: 'high',
-            rotation: 0,
-            y: -15,
-            offset: 0,
-        },
-        labels: {
-            formatter: function (ctx) {
-            let val = ctx.value;
-            return val;
-            },
-            align: 'center',
-        },
-        min: Number(leftMin),
-        max: Number(leftMax),
-        opposite: false,
-        tickWidth: 1,
-    }
-
-    //数据列
-    data.forEach(item => {
-        let serie_item = {
-            data: item.Value,
-            type: 'column',
-            yAxis: 0,
-            name: item.Name || item.Date,
-            color: item.Color,
-            chartType: 'linear',              
-            visible:true,
-        };
-        seriesData.push(serie_item)
-    })
-    
-    chartData.value = {
-        title: {
-            text:''
-        },
-        plotOptions: {
-            column:{
-            stacking: null,
-            },
-        },
-        series: seriesData,
-        yAxis: [ yAxis ],
-        xAxis
-    }
-}
-
 // 查询范围为1年内 x轴显示为月/日 否则默认年/月
 const xTimeDiffer=(minTime,maxTime)=>{
     //年限差
@@ -1230,8 +1372,8 @@ watch(
         if(!showLimit.value) return
         console.log('极值改变');
 
-        //奇怪柱状图
-        if(resData.value.ChartInfo.ChartType === 7) {
+        //奇怪柱状图 商品价格图
+        if(resData.value.ChartInfo.ChartType === 7 || resData.value.ChartInfo.Source === 2) {
             chartData.value.yAxis[0].max = nval.leftMax;
             chartData.value.yAxis[0].min = nval.leftMin;
         }else {
@@ -1491,6 +1633,7 @@ const code_scene=computed(()=>{
     let obj= {
         chartInfoId:ChartInfoId,
         searchVal:decodeURIComponent(route.query.searchVal)||'',
+        chartSource,
         MyChartId:route.query.MyChartId||'',
         MyChartClassifyId:route.query.MyChartClassifyId||'',
         from:'share'