Merge branch 'chart13.2'

src/views/hzyb/chart/Detail.vue

@@ -247,7 +247,7 @@ const getChartInfo=async (type)=>{
         // document.title=res.data.ChartInfo.ChartName
         
         // 设置highchart配置 ChartType: 1曲线图 2季节图:季节图中公历和农历数据结构不同
-        if(![2,7].includes(res.data.ChartInfo.ChartType)){
+        if(![2,7,10].includes(res.data.ChartInfo.ChartType)){
             if(type=='init'){
                 dateType.value=res.data.ChartInfo.DateType
                 startDate.value=res.data.ChartInfo.StartDate||''
@@ -277,6 +277,11 @@ const getChartInfo=async (type)=>{
         //奇怪柱形图依赖数据
         res.data.ChartInfo.ChartType === 7 && initBarData(res.data);
 
+        //截面散点图
+        res.data.ChartInfo.ChartType === 10 && initSectionScatterData(res.data);
+
+        
+
         // 向小程序发送分享数据
         let postData = {
             params:{
@@ -694,6 +699,156 @@ const filterInvalidData = (item)=> {
 }
 
 
+/* 散点截面图 */
+const sectionScatterData = ref({});
+/* 截面散点图获取详情赋值 */
+const initSectionScatterData = ({ DataResp }) => {
+    sectionScatterData.value = DataResp;
+
+    hasLeftAxis.value=true;
+    axisLimitData.leftMin=Number(DataResp.YMinValue)
+    axisLimitData.leftMax=Number(DataResp.YMaxValue)
+    axisLimitData.xMin=Number(DataResp.XMinValue)
+    axisLimitData.xMax=Number(DataResp.XMaxValue)
+    setSectionScatterChart()
+}
+/* 截面散点图设置 sectionScatterData */
+const setSectionScatterChart = () => {
+    const { DataList,XName,XNameEn,XUnitName,XUnitNameEn,YName,YNameEn,YUnitName,YUnitNameEn } = sectionScatterData.value;
+    const { leftMin,leftMax,xMin,xMax }  = axisLimitData;
+
+    //y轴
+    let yAxis = {
+        ...basicYAxis,
+        title: {
+            text: YName,
+            align: 'middle',
+        },
+        opposite: false,
+        reversed: false,
+        min: Number(leftMin),
+        max: Number(leftMax),
+        tickWidth: 1,
+    }
+
+    //x轴
+    let xAxis = {
+        ...scatterXAxis,
+        title: {
+            text: XName,
+            align: 'middle',
+        },
+        min: Number(xMin),
+        max: Number(xMax),
+    }
+
+    //数据列
+    let series = [];
+    DataList.forEach(item => {
+        //数据列
+        let series_item = {
+            data: [],
+            type: 'scatter',
+            name: item.Name,
+            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: _.Name,
+                formatCh: _.Name,
+                formatEn: _.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() {
+            let series_obj = DataList.find(_ => _.Name === this.series.name);
+            let ponit_obj = series_obj.EdbInfoList.find(_ => _.XValue ===this.x && _.YValue===this.y);
+
+            let str=`<b>${ ponit_obj.Name }</b>`;
+            str += `<br><span style="color:${this.color}">\u25CF</span>${ponit_obj.XName}: ${this.x} ${ponit_obj.XDate}<br>`;
+            str += `<span style="color:${this.color}">\u25CF</span>${ponit_obj.YName}: ${this.y} (${ponit_obj.YDate})`;
+
+            return str
+        }
+    }
+    
+    chartData.value = {
+        title: {
+            text:''
+        },
+        series,
+        yAxis: [yAxis],
+        xAxis,
+        tooltip
+    }
+}
+
+
 
 // 路由改变 解决从搜索页返回数据不刷新问题
 onBeforeRouteUpdate((nval)=>{
@@ -720,6 +875,8 @@ let axisLimitData=reactive({//左右轴极值
     rightMax:0,
     rightTwoMin:0,
     rightTwoMax:0,
+    xMin:0,
+    xMax:0,
 })
 const handleConfirmSetLimit=()=>{//确定修改极值（研究员会调用一次保存）
     if(canSave.value){
@@ -1540,9 +1697,14 @@ watch(
         console.log('极值改变');
 
         //奇怪柱状图 商品价格图
-        if(resData.value.ChartInfo.ChartType === 7 || resData.value.ChartInfo.Source === 2) {
+        if([7,10].includes(resData.value.ChartInfo.ChartType) || resData.value.ChartInfo.Source === 2) {
             chartData.value.yAxis[0].max = nval.leftMax;
             chartData.value.yAxis[0].min = nval.leftMin;
+            
+            if(resData.value.ChartInfo.ChartType === 10) {
+                chartData.value.xAxis.max = nval.xMax;
+                chartData.value.xAxis.min = nval.xMin;
+            }
         }else {
             chartData.value.yAxis.forEach(item=>{
                 if(item.IsAxis===1){//左轴
@@ -1737,38 +1899,57 @@ const setChartParams = () => {
             StartDate:startDate.value,
             EndDate: endDate.value,
         }
-    }else if(resData.value.ChartInfo.ChartType===2){//季节图
-        let arr=resData.value.EdbInfoList.map(item=>{
-            return {
-                ChartColor: item.ChartColor,
-                ChartStyle: item.ChartStyle,
-                ChartWidth: Number(item.ChartWidth),
-                EdbInfoId: item.EdbInfoId,
-                EdbInfoType: item.EdbInfoType,
-                IsAxis: item.IsAxis,
-                IsOrder: item.IsOrder,
-                LeadUnit: item.EdbInfoType ? '' : item.LeadUnit,
-                LeadValue: item.EdbInfoType ? 0 : Number(item.LeadValue),
-                MaxData: Number(chartData.value.yAxis[0].max),
-                MinData: Number(chartData.value.yAxis[0].min),
+    }
+    switch(resData.value.ChartInfo.ChartType) {
+        case 2: 
+            let arr=resData.value.EdbInfoList.map(item=>{
+                return {
+                    ChartColor: item.ChartColor,
+                    ChartStyle: item.ChartStyle,
+                    ChartWidth: Number(item.ChartWidth),
+                    EdbInfoId: item.EdbInfoId,
+                    EdbInfoType: item.EdbInfoType,
+                    IsAxis: item.IsAxis,
+                    IsOrder: item.IsOrder,
+                    LeadUnit: item.EdbInfoType ? '' : item.LeadUnit,
+                    LeadValue: item.EdbInfoType ? 0 : Number(item.LeadValue),
+                    MaxData: Number(chartData.value.yAxis[0].max),
+                    MinData: Number(chartData.value.yAxis[0].min),
+                }
+            })
+            params={
+                ChartInfoId: resData.value.ChartInfo.ChartInfoId || 0,
+                ChartEdbInfoList: arr,
+                Calendar: calendarType.value,
+                SeasonStartDate:startDate.value,
+                SeasonEndDate: endDate.value,
             }
-        })
-        params={
-            ChartInfoId: resData.value.ChartInfo.ChartInfoId || 0,
-            ChartEdbInfoList: arr,
-            Calendar: calendarType.value,
-            SeasonStartDate:startDate.value,
-            SeasonEndDate: endDate.value,
-        }
-    }else if(resData.value.ChartInfo.ChartType===7) {
-        params={
-            ChartInfoId: resData.value.ChartInfo.ChartInfoId || 0,
-            ChartEdbInfoList: barEdbData.value.map(_ =>({ EdbInfoId: _.EdbInfoId })),
-            DateType: 6,
-            LeftMin: String(axisLimitData.leftMin),
-            LeftMax: String(axisLimitData.leftMax),
-        }
+            break;
+        case 7: 
+            params={
+                ChartInfoId: resData.value.ChartInfo.ChartInfoId || 0,
+                ChartEdbInfoList: barEdbData.value.map(_ =>({ EdbInfoId: _.EdbInfoId })),
+                DateType: 6,
+                LeftMin: String(axisLimitData.leftMin),
+                LeftMax: String(axisLimitData.leftMax),
+            }
+            break;
+        case 10: 
+            params = {
+                ChartInfoId: resData.value.ChartInfo.ChartInfoId || 0,
+                DateType: 6,
+                Calendar: "公历",
+                ExtraConfig: JSON.stringify({
+                    ...JSON.parse(resData.value.ChartInfo.ExtraConfig),
+                    XMinValue: String(axisLimitData.xMin),
+                    XMaxValue: String(axisLimitData.xMax),
+                    YMinValue: String(axisLimitData.leftMin),
+                    YMaxValue: String(axisLimitData.leftMax),
+                })
+            } 
+            break;
     }
+    
     return params
 }
 
@@ -1847,7 +2028,7 @@ const posterParams=computed(()=>{
     <div class="chart-detail" v-if="!loading&&!noauth&&!nodata">
         <div class="chart-title">{{resData.ChartInfo.ChartName}}</div>
         <div class="top-box" v-if="$route.query.source!=='ybxcx_my_chart'">
-            <div class="flex calendar-box" style="float:left" @click="handleShowDate" v-if="resData.ChartInfo.ChartType !== 7 &&resData.ChartInfo.Source===1">
+            <div class="flex calendar-box" style="float:left" @click="handleShowDate" v-if="![7,10].includes(resData.ChartInfo.ChartType) &&resData.ChartInfo.Source===1">
                 <img src="../../../assets/hzyb/chart/calendar.png" alt="">
                 <span class="date">{{startDate||'开始日期'}}</span>
                 <span style="margin:0 5px">至</span>
@@ -1974,7 +2155,7 @@ const posterParams=computed(()=>{
                         <span>下限</span>
                     </p>
                     <p style="margin-bottom:25px" v-if="hasLeftAxis">
-                        <span style="margin-right:35px">左轴</span>
+                        <span style="margin-right:35px">{{resData.ChartInfo.ChartType===10 ? 'Y轴' :'左轴'}}</span>
                         <input type="number" v-model="axisLimitData.leftMax">
                         <span style="margin:0 10px">至</span>
                         <input type="number" v-model="axisLimitData.leftMin">
@@ -1992,6 +2173,13 @@ const posterParams=computed(()=>{
                         <span style="margin:0 10px">至</span>
                         <input type="number" v-model="axisLimitData.rightTwoMin">
                     </p>
+                    <!-- x轴上下限 -->
+                    <p v-if="axisLimitData.xMin" style="margin-bottom:25px">
+                        <span style="margin-right:35px">X轴</span>
+                        <input type="number" v-model="axisLimitData.xMin">
+                        <span style="margin:0 10px">至</span>
+                        <input type="number" v-model="axisLimitData.xMax">
+                    </p>
                 </div>
             </div>
         </Popup>

src/views/hzyb/chart/component/chartBox.vue

@@ -165,8 +165,11 @@ watch(
                 :key="item.name"
                 @click="clickChartTopLabel(index)"
             >
+
+							<template v-if="!item.linkedTo">
                 <span class="color" :style="{background:item.visible?item.color:'#ccc'}"></span>
                 <span :style="{color:item.visible?'':'#ccc'}">{{item.name.length>20?item.name.replace(/<br>/g,''):item.name}}</span>
+							</template>	
             </div>
         </div>
 		<div class="chart-content">