Merge branch 'ETA1.9.6'

src/hooks/chart/useChartRender.ts

@@ -54,6 +54,7 @@ interface StateProps {
   }
   dataList: any[];
   chartInfo: any;
+  DataResp:any
 }
 
 /**
@@ -86,6 +87,7 @@ const state = reactive<StateProps>({
     rightTwoMin:0,//右二轴上下限
     rightTwoMax:0,
   },
+  DataResp:null,
 })
 const language = ref('')
 const routeQuery = ref<any>({});//路由参
@@ -97,6 +99,7 @@ export const useChartRender = (Data,lang='zh',) => {
   state.chartInfo = Data.ChartInfo
   state.dataList = [1,11].includes(Data.ChartInfo.Source) ? Data.EdbInfoList : [Data.EdbInfoList[0]];
   language.value = lang
+  state.DataResp=Data.DataResp
 
   let chartOptions:any;
 
@@ -112,7 +115,8 @@ export const useChartRender = (Data,lang='zh',) => {
       6: setStackOrCombinChart,
       7: initBarData,
       10: initSectionScatterData,
-      11: initRadarData
+      11: initRadarData,
+      14: setSectionalCombinationChart,
     };
 
     chartOptions = typeMap[state.chartInfo.ChartType] && typeMap[state.chartInfo.ChartType](Data);
@@ -138,6 +142,182 @@ export const useChartRender = (Data,lang='zh',) => {
   return chartOptions
 };
 
+// 截面组合图
+function setSectionalCombinationChart(e){
+  /* 主题样式*/
+  const chartTheme =  e.ChartInfo.ChartThemeStyle ? JSON.parse(e.ChartInfo.ChartThemeStyle) : null;
+  const {XDataList,UnitList,SeriesList,IsHeap}=e.DataResp;
+  
+  
+  //x轴
+  const xAxis={
+      categories:XDataList.map(_=>language.value=='zh'?_.Name:_.NameEn),
+      tickWidth: 1,
+      labels: {
+        style:{
+          ...chartTheme&&chartTheme.xAxisOptions.style
+        },
+      },
+      plotBands: setAxisPlotAreas(3),
+      plotLines: setAxisPlotLines(3)
+  }
+
+  let yAxis=[]
+  let seriesData=[]
+
+  //有右二轴时排个序 按照左 右 右2的顺序
+  const chartData = SeriesList.some(_ =>_.IsAxis===2) ? changeEdbOrder(SeriesList) : _.cloneDeep(SeriesList);
+  chartData.forEach((item,index)=>{
+      //轴位置值相同的下标
+      const sameSideIndex = chartData.findIndex(
+        (i) => i.IsAxis === item.IsAxis
+      );
+
+      const yTitleMap={
+        1:['LeftName','LeftNameEn'],
+        0:['RightName','RightNameEn'],
+        2:['RightTwoName','RightTwoNameEn'],
+      }
+
+      let minLimit = 0,maxLimit = 0
+      const limitMap = {
+        0:['rightMin','rightMax'],
+        1:['min','max'],
+        2:['rightTwoMin','rightTwoMax']
+    }
+      if(limitMap[item.IsAxis]){
+          minLimit = state.chartLimit[`${limitMap[item.IsAxis][0]}`]||0
+          maxLimit = state.chartLimit[`${limitMap[item.IsAxis][1]}`]||0
+      }
+
+      let yItem = {
+        ...basicYAxis,
+        title: {
+          text: UnitList[yTitleMap[item.IsAxis][0]],
+          textCh:UnitList[yTitleMap[item.IsAxis][0]], // 中文
+          // 中文不存在，无论英文有无都显示空
+          textEn:UnitList[yTitleMap[item.IsAxis][0]]?UnitList[yTitleMap[item.IsAxis][1]]:'', // 英文
+          style:{
+            ...chartTheme&&chartTheme.yAxisOptions.style
+          },
+          align: 'high',
+          rotation: 0,
+          y: -12,
+          // x: (item.IsAxis===0 && this.rightTwoIndex>-1) ? -chartData[this.rightTwoIndex].Unit.length*12 : 0,
+          textAlign: item.IsAxis===1 ? 'left' : 'right',
+          reserveSpace: false
+        },
+        labels: {
+          formatter: function (ctx) {
+            return ctx.value;
+          },
+          align: 'center',
+          x: [0,2].includes(item.IsAxis) ? 5 : -5,
+          style: {
+            ...chartTheme&&chartTheme.yAxisOptions.style,
+          }
+        },
+        opposite: [0,2].includes(item.IsAxis),
+        min: Number(minLimit),
+        max: Number(maxLimit),
+        tickWidth: 1,
+        visible: sameSideIndex === index,
+        plotBands: setAxisPlotAreas(item.IsAxis),
+        plotLines: setAxisPlotLines(item.IsAxis)
+      };
+
+      //堆叠图的yAxis必须一致 数据列所对应的y轴
+      let serie_yIndex = index;
+      if(IsHeap==1) {
+        // 类型为堆叠图时公用第一个指标y轴 
+        serie_yIndex =  0;
+      }
+
+      //数据列
+      let dataArr=item.DataList||[]
+      // 根据NoDataEdbIndex 将对应位置的值置为null
+      dataArr.forEach((i,index)=>{
+        if(item.NoDataEdbIndex.includes(index)){
+          dataArr[index]=null
+        }
+      })
+      //图表可配置的线条数就10条,第11条用第1条的配置，索引取下模
+      const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
+      let obj={
+        data:dataArr,
+        type: item.ChartStyle||'',
+        dashStyle: (chartTheme&&chartTheme.lineOptionList[lineIndex].dashStyle)||'Solid',
+        chartType:'linear',
+        yAxis: serie_yIndex,
+        name:item.SeriesName,
+        nameZh:item.SeriesName,
+        nameEn:item.SeriesNameEn,
+        unitName:UnitList[yTitleMap[item.IsAxis][0]],
+        unitNameCh:UnitList[yTitleMap[item.IsAxis][0]],
+        unitNameEn:UnitList[yTitleMap[item.IsAxis][0]]?UnitList[yTitleMap[item.IsAxis][1]]:'',
+        color: item.ChartColor,
+        lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth),
+        borderWidth: 1,
+        borderColor: item.ChartColor,
+        marker: {//展示数据点
+          enabled:item.ChartStyle!='column'&&item.IsPoint?true:false,
+          radius: (chartTheme&&chartTheme.lineOptionList[lineIndex].radius)||5,
+        },
+        dataLabels: {//展示数值
+          enabled: item.IsNumber?true:false,
+          align:item.ChartStyle=='column'?'center':undefined,
+          y:item.ChartStyle=='column'?-20:0,
+          inside: item.ChartStyle=='column'?false:undefined,
+          crop: item.ChartStyle=='column'?false:true,
+        },
+        stacking:IsHeap==1?'normal':undefined,
+        zIndex: ['line','spline'].includes(item.ChartStyle) ? 1 : 0, //防止组合图曲线被遮住
+      }
+
+      yAxis.push(yItem)
+      seriesData.push(obj)
+  })
+
+  const tooltip={
+    formatter:function () { 
+      let str=`<b>${this.points[0].x}</b>`
+      this.points.forEach(item=>{
+        const sObj=seriesData.find(_=>_.name===item.series.name)
+        str=str+`<br><span style="color:${item.color}">\u25CF</span>${sObj.name}:${item.y} ${sObj.unitNameCh}`
+      })
+      return str
+    },
+    formatterCh:function () { 
+      let str=`<b>${this.points[0].x}</b>`
+      this.points.forEach(item=>{
+        const sObj=seriesData.find(_=>_.name===item.series.name)
+        str=str+`<br><span style="color:${item.color}">\u25CF</span>${sObj.nameCh}:${item.y} ${sObj.unitNameCh}`
+      })
+      return str
+    },
+    formatterEn:function () { 
+      let str=`<b>${this.points[0].x}</b>`
+      this.points.forEach(item=>{
+        const sObj=seriesData.find(_=>_.name===item.series.name)
+        str=str+`<br><span style="color:${item.color}">\u25CF</span>${sObj.nameEn}:${item.y} ${sObj.unitNameEn}`
+      })
+      return str
+    },
+    shared:true
+  }
+
+  return {
+      title: {
+          text:''
+      },
+      tooltip,
+      series: seriesData,
+      yAxis: yAxis,
+      xAxis,
+  }
+
+}
+
 
 /* 曲线图 */
 const setDefaultLineOptions = () => {
@@ -580,7 +760,7 @@ const setSeasonOptions = (data:any) => {
 本来和曲线图逻辑基本一致兼容下即可 为了以后便于维护和阅读还是拆开写吧
  */
 const setStackOrCombinChart = () => {
-  const { dataList,chartInfo } = state;
+  const { dataList,chartInfo,DataResp } = state;
 
    /* 主题样式*/
   const chartTheme =  state.chartInfo.ChartThemeStyle ? JSON.parse(state.chartInfo.ChartThemeStyle) : null;
@@ -706,8 +886,10 @@ const setStackOrCombinChart = () => {
       zIndex: (chartInfo.ChartType === 6 && ['line','spline'].includes(item.ChartStyle)) ? 1 : 0, //防止组合图曲线被遮住
       borderWidth: 1,
       borderColor: item.ChartColor,
-      ...predict_params
+      ...predict_params,
+      stacking:chartInfo.ChartType==6&&DataResp.IsHeap!==1?undefined:'normal',
     };
+    
     item.DataList = item.DataList || []
     for (let i of item.DataList) {
       obj.data.push([i.DataTimestamp, i.Value]);