소스 검색

生成的dataSVG更小,转换速度更快

cxmo 7 달 전
부모
커밋
7907b024be
2개의 변경된 파일38개의 추가작업 그리고 3개의 파일을 삭제
  1. 37 2
      src/views/ppt_manage/mixins/pptMixins.js
  2. 1 1
      src/views/ppt_manage/newVersion/pptPublish.vue

+ 37 - 2
src/views/ppt_manage/mixins/pptMixins.js

@@ -71,6 +71,9 @@ export default {
       //截面散点设置英文props
 			enChartInfo: {},
 			enEdblist:[],
+
+
+        chartSVGDataMap:{}
     }
   },
   methods: {
@@ -592,7 +595,8 @@ export default {
           this.initChart(
 				    `chart_${index}_${item.position}`,
 				    this.optionMap[item.chartId],
-				    page
+				    page,
+                    item.chartId
 			    )
         }else{
           //显示图表已被删除
@@ -604,7 +608,7 @@ export default {
 			
       });
     },
-    initChart(refName, options, page) {
+    initChart(refName, options, page,chartId="") {
       console.log("refName", refName);
       const index = this.pageList.findIndex((i) => i.id === page.id)
       if(index===-1) return
@@ -743,6 +747,37 @@ export default {
           ...secialBarOpt
         });
         
+        
+        if(isPublish&&chartId){
+            const {clientWidth,clientHeight} = $(`#${refName}`)[0]
+            const {plotBackgroundColor} = chartTheme&&chartTheme.drawOption||{}
+            const svgData = chart.getSVG({
+                    chart:{
+                        width:clientWidth,
+                        height:clientHeight,
+                        backgroundColor:null,
+                        plotBorderColor:null,
+                        plotBackgroundColor:null,
+                        plotBackgroundImage:null,
+                        plotBorderWidth:null,
+                        plotShadow:false,
+                        animation: false,
+                    }
+                })
+            let  parser = new DOMParser();
+            let svgDoc = parser.parseFromString(svgData, 'image/svg+xml');
+
+            // 查找class为'background'的rect元素并修改fill属性
+            var rectElement = svgDoc.querySelector('rect.highcharts-plot-background');
+            if (rectElement) {
+                rectElement.setAttribute('fill', plotBackgroundColor);
+            }
+
+            // 将修改后的SVG文档转换回字符串
+            var serializer = new XMLSerializer();
+            var updatedSvgCode = serializer.serializeToString(svgDoc);
+            this.chartSVGDataMap[chartId] = updatedSvgCode
+        }
       });
     },
     initImages(elements,page){

+ 1 - 1
src/views/ppt_manage/newVersion/pptPublish.vue

@@ -330,7 +330,7 @@ export default {
                 //将svgDom转为base64 png,返回一个base64字符串
                 //imgData = await this.changeUrl(`chart_${i}_${elements[j].position}`)
                 //imgData = svg2Base64($(`#chart_${i}_${elements[j].position} svg`)[0])//生成的svg背景色是黑色不是透明
-                imgData = this.setCompression2?svgData2Base64($(`#chart_${i}_${elements[j].position} svg`)[0].outerHTML):await this.changeUrl(`chart_${i}_${elements[j].position}`)
+                imgData = this.setCompression2?svgData2Base64(this.chartSVGDataMap[elements[j].chartId]):await this.changeUrl(`chart_${i}_${elements[j].position}`)
               }
             }
           } else if (elements[j].type === 'text'){