Merge pull request #7125 from dataease/pr@dev-v2@feat_canvas-scale

feat: 画布放大缩小其视图支持并同比放大缩小

core/core-frontend/src/custom-component/user-view/Component.vue

@@ -77,6 +77,7 @@ const autoStyle = computed(() => {
 <template>
   <div class="bash-shape" :style="autoStyle">
     <chart
+      :scale="scale"
       :active="active"
       :view="view"
       :element="element"

core/core-frontend/src/utils/sizeAdaptor.ts

@@ -0,0 +1,125 @@
+import { getScaleValue, mobileSpecialProps } from '@/utils/canvasStyle'
+
+export const customAttrTrans = {
+  size: [
+    'barWidth',
+    'lineWidth',
+    'lineSymbolSize',
+    'funnelWidth', // 漏斗图 最大宽度
+    'tableTitleFontSize',
+    'tableItemFontSize',
+    'tableTitleHeight',
+    'tableItemHeight',
+    'dimensionFontSize',
+    'quotaFontSize',
+    'spaceSplit', // 间隔
+    'scatterSymbolSize', // 气泡大小，散点图
+    'radarSize', // 雷达占比
+    'quotaSuffixFontSize'
+  ],
+  label: ['fontSize'],
+  tooltip: {
+    textStyle: ['fontSize']
+  },
+  slider: ['fontSize'],
+  graphic: ['fontSize']
+}
+export const customStyleTrans = {
+  text: ['fontSize'],
+  legend: {
+    textStyle: ['fontSize']
+  },
+  xAxis: {
+    nameTextStyle: ['fontSize'],
+    axisLabel: ['fontSize'],
+    splitLine: {
+      lineStyle: ['width']
+    }
+  },
+  yAxis: {
+    nameTextStyle: ['fontSize'],
+    axisLabel: ['fontSize'],
+    splitLine: {
+      lineStyle: ['width']
+    }
+  },
+  yAxisExt: {
+    nameTextStyle: ['fontSize'],
+    axisLabel: ['fontSize'],
+    splitLine: {
+      lineStyle: ['width']
+    }
+  },
+  split: {
+    name: ['fontSize'],
+    axisLine: {
+      lineStyle: ['width']
+    },
+    axisTick: {
+      lineStyle: ['width']
+    },
+    axisLabel: ['margin', 'fontSize'],
+    splitLine: {
+      lineStyle: ['width']
+    }
+  }
+}
+
+export function recursionTransObj(template, infoObj, scale, terminal) {
+  for (const templateKey in template) {
+    // 如果是数组 进行赋值计算
+    if (template[templateKey] instanceof Array) {
+      template[templateKey].forEach(templateProp => {
+        if (infoObj[templateKey] && infoObj[templateKey][templateProp]) {
+          // 移动端特殊属性值设置
+          if (terminal === 'mobile' && mobileSpecialProps[templateProp] !== undefined) {
+            infoObj[templateKey][templateProp] = mobileSpecialProps[templateProp]
+          } else {
+            infoObj[templateKey][templateProp] = getScaleValue(
+              infoObj[templateKey][templateProp],
+              scale
+            )
+          }
+        }
+      })
+    } else if (typeof template[templateKey] === 'string') {
+      // 一级字段为字符串直接赋值
+      infoObj[templateKey] = getScaleValue(infoObj[templateKey], scale)
+    } else {
+      // 如果是对象 继续进行递归
+      if (infoObj[templateKey]) {
+        recursionTransObj(template[templateKey], infoObj[templateKey], scale, terminal)
+      }
+    }
+  }
+}
+
+export function recursionThemTransObj(template, infoObj, color) {
+  for (const templateKey in template) {
+    // 如果是数组 进行赋值计算
+    if (template[templateKey] instanceof Array) {
+      template[templateKey].forEach(templateProp => {
+        if (infoObj[templateKey]) {
+          infoObj[templateKey][templateProp] = color
+        }
+      })
+    } else if (typeof template[templateKey] === 'string') {
+      // 一级字段为字符串直接赋值
+      infoObj[templateKey] = color
+    } else {
+      // 如果是对象 继续进行递归
+      if (infoObj[templateKey]) {
+        recursionThemTransObj(template[templateKey], infoObj[templateKey], color)
+      }
+    }
+  }
+}
+
+export function componentScalePublic(chartInfo, heightScale, widthScale) {
+  const scale = Math.min(heightScale, widthScale)
+  // attr 缩放转换
+  recursionTransObj(this.customAttrTrans, chartInfo.customAttr, scale, null)
+  // style 缩放转换
+  recursionTransObj(this.customStyleTrans, chartInfo.customStyle, scale, null)
+  return chartInfo
+}

core/core-frontend/src/views/chart/components/views/components/ChartComponentG2Plot.vue

@@ -12,6 +12,7 @@ import { parseJson } from '@/views/chart/components/js/util'
 import { defaultsDeep, cloneDeep } from 'lodash-es'
 import ChartError from '@/views/chart/components/views/components/ChartError.vue'
 import { BASE_VIEW_CONFIG } from '../../editor/util/chart'
+import { customAttrTrans, customStyleTrans, recursionTransObj } from '@/utils/canvasStyle'
 
 const dvMainStore = dvMainStoreWithOut()
 const { nowPanelTrackInfo, nowPanelJumpInfo } = storeToRefs(dvMainStore)
@@ -29,12 +30,21 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'canvas'
+  },
+  scale: {
+    type: Number,
+    required: false,
+    default: 100
+  },
+  terminal: {
+    type: String,
+    default: 'pc'
   }
 })
 
 const emit = defineEmits(['onChartClick', 'onDrillFilters', 'onJumpClick'])
 
-const { view, showPosition } = toRefs(props)
+const { view, showPosition, scale, terminal } = toRefs(props)
 
 const isError = ref(false)
 const errMsg = ref('')
@@ -105,6 +115,9 @@ const renderChart = async view => {
   // 与默认视图对象合并，方便增加配置项
   const chart = { ...defaultsDeep(view, cloneDeep(BASE_VIEW_CONFIG)), data: chartData.value }
   const chartView = chartViewManager.getChartView(view.render, view.type)
+  console.log('scale=' + scale.value)
+  recursionTransObj(customAttrTrans, chart.customAttr, scale.value / 100, terminal.value)
+  recursionTransObj(customStyleTrans, chart.customStyle, scale.value / 100, terminal.value)
   switch (chartView.library) {
     case ChartLibraryType.L7_PLOT:
       renderL7Plot(chart, chartView as L7PlotChartView<any, any>)

core/core-frontend/src/views/chart/components/views/index.vue

@@ -89,6 +89,11 @@ const props = defineProps({
     type: Boolean,
     required: false,
     default: false
+  },
+  scale: {
+    type: Number,
+    required: false,
+    default: 100
   }
 })
 const dynamicAreaId = ref('')
@@ -617,6 +622,7 @@ const toolTip = computed(() => {
         :show-position="showPosition"
       />
       <chart-component-g2-plot
+        :scale="scale"
         :dynamic-area-id="dynamicAreaId"
         :view="view"
         :show-position="showPosition"