Răsfoiți Sursa

截面组合图ppt模块兼容

jwyu 11 luni în urmă
părinte
comite
2ade9e2be4

+ 4 - 2
src/views/dataEntry_manage/mixins/chartPublic.js

@@ -2216,6 +2216,8 @@ export const chartSetMixin = {
             dataArr[index]=null
           }
         })
+        //图表可配置的线条数就10条,第11条用第1条的配置,索引取下模
+				const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
         let obj={
           data:dataArr,
           type: item.ChartStyle||'',
@@ -2225,12 +2227,12 @@ export const chartSetMixin = {
           nameCh:item.SeriesName,
           nameEn:item.SeriesNameEn,
           color: item.ChartColor,
-          lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptionList[index].lineWidth),
+          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[index].radius)||5,
+            radius: (chartTheme&&chartTheme.lineOptionList[lineIndex].radius)||5,
           },
           dataLabels: {//展示数值
             enabled: item.IsNumber?true:false,

+ 169 - 3
src/views/ppt_manage/mixins/mixins.js

@@ -85,7 +85,9 @@ export default {
       crossVarietyChartData: {},
 
       /* 雷达图 */
-      radarChartData: {}
+      radarChartData: {},
+
+      IsHeap:false,//是否堆积
     }
   },
   methods: {
@@ -99,12 +101,175 @@ export default {
         3: this.setStackOrCombinChart,
         4: this.setStackOrCombinChart,
         5: this.setScatterChart,
-        6: this.setStackOrCombinChart
+        6: this.setStackOrCombinChart,
+        14: this.setSectionalCombinationChart
       };
 
       chartSetMap[this.chartInfo.ChartType]&&chartSetMap[this.chartInfo.ChartType]()
     },
 
+    // 截面组合图渲染配置
+    setSectionalCombinationChart(){
+      const {XDataList,UnitList,SeriesList,IsHeap}=this.sectionalCombinationData
+      /* 主题样式*/
+      const chartTheme =  this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
+      
+      this.leftIndex = SeriesList.findIndex((item) => item.IsAxis===1);
+      this.rightIndex = SeriesList.findIndex((item) => !item.IsAxis);
+      this.rightTwoIndex = SeriesList.findIndex((item) => item.IsAxis ===2);
+
+      //x轴
+      const xAxis={
+        categories:XDataList.map(_=>this.currentLang=='en'?_.NameEn:_.Name),
+        tickWidth: 1,
+        labels: {
+          style:{
+            ...chartTheme&&chartTheme.xAxisOptions.style
+          },
+        },
+        plotBands: this.setAxisPlotAreas(3),
+        plotLines: this.setAxisPlotLines(3)
+      }
+
+      let yAxis=[]
+      let seriesData=[]
+
+      //有右二轴时排个序 按照左 右 右2的顺序
+      const chartData = SeriesList.some(_ =>_.IsAxis===2) ? this.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 = this.chartLimit[`${limitMap[item.IsAxis][0]}`]||0
+            maxLimit = this.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: this.setAxisPlotAreas(item.IsAxis),
+          plotLines: this.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||'',
+          chartType:'linear',
+          yAxis: serie_yIndex,
+          name:item.SeriesName,
+          nameCh:item.SeriesName,
+          nameEn:item.SeriesNameEn,
+          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)
+      })
+
+      this.options = {
+        title: {
+          text:''
+        },
+        series: seriesData,
+        yAxis: yAxis,
+        xAxis,
+      };
+
+    },
+    // 截面组合图初始化
+    initSectionalCombinationChart(data){
+      const { EdbInfoList,DataResp,ChartInfo } = data;
+      this.sectionalCombinationData = DataResp;
+      this.chartLimit = {
+        min:DataResp.LeftMin, //左轴上下限
+        max:DataResp.LeftMax,
+        rightMin:DataResp.RightMin,//右轴上下限
+        rightMax:DataResp.RightMax,
+        rightTwoMin:DataResp.Right2Min,//右二轴上下限
+        rightTwoMax:DataResp.Right2Max,
+      }
+      this.IsHeap=DataResp.IsHeap?true:false
+
+      this.setSectionalCombinationChart()
+    },
+
     /* 曲线 */
     setDefaultChart() {
 
@@ -402,7 +567,8 @@ export default {
           borderWidth: 1,
           borderColor: item.ChartColor,
           zIndex: (this.chartInfo.ChartType === 6 && ['line','spline'].includes(item.ChartStyle)) ? 1 : 0, //防止组合图曲线被遮住
-          ...predict_params
+          ...predict_params,
+          stacking:this.chartInfo.ChartType==6&&!this.IsHeap?undefined:'normal',
         };
         item.DataList = item.DataList || [];
         for (let i of item.DataList) {

+ 10 - 1
src/views/ppt_manage/mixins/pptMixins.js

@@ -292,7 +292,16 @@ export default {
         //雷达图
         this.chartInfo.ChartType === 11 && this.initRadarData(res.Data);
 
-        Data.Status && ![7,10].includes(this.chartInfo.ChartType) && this.setOptions();
+        //截面组合图
+        this.chartInfo.ChartType===14 && this.initSectionalCombinationChart(res.Data)
+
+        // 时序组合图控制是否堆叠
+        if(this.chartInfo.ChartType===6){
+          this.IsHeap=res.Data.DataResp.IsHeap===1?true:false
+        }
+        
+
+        Data.Status && ![7,10,14].includes(this.chartInfo.ChartType) && this.setOptions();
         Data.Status&&this.setOptionsLang(currentLang)
       }else if([2,5].includes(this.chartInfo.Source)) { //商品价格图
         this.chartInfo = Data.ChartInfo.Source===5 ? {