Merge remote-tracking branch 'origin/master'

DataRoom/dataroom-core/src/main/java/com/gccloud/dataroom/core/module/chart/bean/Chart.java

@@ -109,6 +109,11 @@ public class Chart {
     @ApiModelProperty(notes = "透视")
     private Integer perspective;
 
+    @ApiModelProperty(notes = "倾斜x")
+    private Integer skewX;
+
+    @ApiModelProperty(notes = "倾斜y")
+    private Integer skewY;
 
 
 }

data-room-ui/packages/BasicComponents/Button/settingConfig.js

@@ -45,7 +45,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   // 自定义属性
   customize: {

data-room-ui/packages/BasicComponents/ChartTab/settingConfig.js

@@ -23,7 +23,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     tabList: [],

data-room-ui/packages/BasicComponents/CurrentTime/settingConfig.js

@@ -24,7 +24,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     fontSize: 28,

data-room-ui/packages/BasicComponents/DateTimePicker/settingConfig.js

@@ -26,7 +26,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   // 自定义属性
   customize: {

data-room-ui/packages/BasicComponents/DigitalFlop/settingConfig.js

@@ -39,7 +39,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     color: '#fff',

data-room-ui/packages/BasicComponents/FlyMap/settingConfig.js

@@ -45,7 +45,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     // 地图id

data-room-ui/packages/BasicComponents/HorizontalLine/settingConfig.js

@@ -20,7 +20,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     // 边框线颜色

data-room-ui/packages/BasicComponents/IframeChart/settingConfig.js

@@ -27,7 +27,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     fontSize: 20,

data-room-ui/packages/BasicComponents/IndexCard/settingConfig.js

@@ -44,7 +44,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     src: '',

data-room-ui/packages/BasicComponents/IndexCard2/settingConfig.js

@@ -44,7 +44,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     src: '',

data-room-ui/packages/BasicComponents/IndicatorCard/settingConfig.js

@@ -44,7 +44,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     borderRadius: 0,

data-room-ui/packages/BasicComponents/IndicatorCard2/settingConfig.js

@@ -44,7 +44,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     borderRadius: 0,

data-room-ui/packages/BasicComponents/Input/settingConfig.js

@@ -21,7 +21,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   // 自定义属性
   customize: {

data-room-ui/packages/BasicComponents/LinkChart/settingConfig.js

@@ -38,7 +38,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     title: '超链接占位符',

data-room-ui/packages/BasicComponents/Map/settingConfig.js

@@ -46,7 +46,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     mapId: '',

data-room-ui/packages/BasicComponents/Marquee/settingConfig.js

@@ -38,7 +38,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     title: '跑马灯占位符',

data-room-ui/packages/BasicComponents/Numbers/settingConfig.js

@@ -48,7 +48,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     title: '1234',

data-room-ui/packages/BasicComponents/Picture/settingConfig.js

@@ -25,7 +25,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     url: '',

data-room-ui/packages/BasicComponents/ScreenScrollBoard/setting.vue

@@ -128,13 +128,15 @@ import SettingTitle from 'data-room-ui/SettingTitle/index.vue'
 import ColorPicker from 'data-room-ui/ColorPicker/index.vue'
 import BorderSetting from 'data-room-ui/BigScreenDesign/RightSetting/BorderSetting.vue'
 import PosWhSetting from 'data-room-ui/BigScreenDesign/RightSetting/PosWhSetting.vue'
+import RotateSetting from 'data-room-ui/BigScreenDesign/RightSetting/RotateSetting.vue'
 export default {
   name: 'BarSetting',
   components: {
     ColorPicker,
     PosWhSetting,
     SettingTitle,
-    BorderSetting
+    BorderSetting,
+    RotateSetting
   },
   data () {
     return {

data-room-ui/packages/BasicComponents/ScreenScrollBoard/settingConfig.js

@@ -41,7 +41,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     rowNum: 5,

data-room-ui/packages/BasicComponents/ScreenScrollRanking/settingConfig.js

@@ -34,7 +34,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     rowNum: 5,

data-room-ui/packages/BasicComponents/Select/settingConfig.js

@@ -33,7 +33,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   // 自定义属性
   customize: {

data-room-ui/packages/BasicComponents/Tables/settingConfig.js

@@ -43,7 +43,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 500
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
 
   customize: {

data-room-ui/packages/BasicComponents/Texts/settingConfig.js

@@ -48,7 +48,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     title: '文本标签占位符',

data-room-ui/packages/BasicComponents/ThemeSelect/settingConfig.js

@@ -26,7 +26,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     title: '文本标签占位符',

data-room-ui/packages/BasicComponents/ThemeSwitcher/settingConfig.js

@@ -26,7 +26,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     activeColor: '#007aff', // 单选框字体激活状态

data-room-ui/packages/BasicComponents/TimeCountDown/settingConfig.js

@@ -23,7 +23,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     fontSize: 28,

data-room-ui/packages/BasicComponents/TimePicker/settingConfig.js

@@ -26,7 +26,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   // 自定义属性
   customize: {

data-room-ui/packages/BasicComponents/VerticalLine/settingConfig.js

@@ -20,7 +20,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     // 边框线颜色

data-room-ui/packages/BasicComponents/Video/settingConfig.js

@@ -20,7 +20,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     videoType: 'application/x-mpegURL',

data-room-ui/packages/BigScreenDesign/RightSetting/RotateSetting.vue

@@ -51,6 +51,30 @@
         :step="1"
       />
     </el-form-item>
+    <el-form-item
+      :label-width="labelWidth"
+      label="沿x轴扭曲角度"
+    >
+      <el-input-number
+        v-model="config.skewX"
+        class="bs-el-input-number"
+        :min="-180"
+        :max="180"
+        :step="1"
+      />
+    </el-form-item>
+    <el-form-item
+      :label-width="labelWidth"
+      label="绕y轴扭曲角度"
+    >
+      <el-input-number
+        v-model="config.skewY"
+        class="bs-el-input-number"
+        :min="-180"
+        :max="180"
+        :step="1"
+      />
+    </el-form-item>
   </div>
 </template>
 <script>
@@ -63,7 +87,9 @@ export default {
         rotateX: 0,
         rotateY: 0,
         rotateZ: 0,
-        perspective: 0
+        perspective: 0,
+        skewX: 0,
+        skewY: 0
       })
     },
     labelWidth: {

data-room-ui/packages/BigScreenDesign/RightSetting/index.vue

@@ -119,6 +119,8 @@ export default {
         rotateY: this.config?.rotateY,
         rotateZ: this.config?.rotateZ,
         perspective: this.config?.perspective,
+        skewX: this.config?.skewX,
+        skewY: this.config?.skewY,
         setting: cloneDeep(this.config?.setting),
         customize: cloneDeep(this.config?.customize),
         url: this.config?.url,

data-room-ui/packages/Borders/Border1/settingConfig.js

@@ -29,7 +29,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     borderMainColor: '#83bff6',

data-room-ui/packages/Borders/Border10/settingConfig.js

@@ -29,7 +29,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     // 边框主要颜色

data-room-ui/packages/Borders/Border11/settingConfig.js

@@ -29,7 +29,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     // 边框主要颜色

data-room-ui/packages/Borders/Border12/settingConfig.js

@@ -29,7 +29,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     // 边框主要颜色

data-room-ui/packages/Borders/Border13/settingConfig.js

@@ -29,7 +29,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     // 边框主要颜色

data-room-ui/packages/Borders/Border14/settingConfig.js

@@ -19,7 +19,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     // 边框线颜色

data-room-ui/packages/Borders/Border15/settingConfig.js

@@ -19,7 +19,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     // 边框线颜色

data-room-ui/packages/Borders/Border2/settingConfig.js

@@ -29,7 +29,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     borderMainColor: '#83bff6',

data-room-ui/packages/Borders/Border3/settingConfig.js

@@ -29,7 +29,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     borderMainColor: '#83bff6',

data-room-ui/packages/Borders/Border4/settingConfig.js

@@ -29,7 +29,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     // 边框主要颜色

data-room-ui/packages/Borders/Border5/settingConfig.js

@@ -29,7 +29,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     // 边框主要颜色

data-room-ui/packages/Borders/Border6/settingConfig.js

@@ -29,7 +29,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     // 边框主要颜色

data-room-ui/packages/Borders/Border7/settingConfig.js

@@ -29,7 +29,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     // 边框主要颜色

data-room-ui/packages/Borders/Border8/settingConfig.js

@@ -29,7 +29,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     // 边框主要颜色

data-room-ui/packages/Borders/Border9/settingConfig.js

@@ -29,7 +29,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     // 边框主要颜色

data-room-ui/packages/Decorations/Decoration1/settingConfig.js

@@ -25,7 +25,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     decorationColor1: '#fff',

data-room-ui/packages/Decorations/Decoration10/settingConfig.js

@@ -25,7 +25,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     decorationColor1: '#00c2ff',

data-room-ui/packages/Decorations/Decoration11/settingConfig.js

@@ -25,7 +25,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     decorationColor1: '#1a98fc',

data-room-ui/packages/Decorations/Decoration12/settingConfig.js

@@ -25,7 +25,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     decorationColor1: null,

data-room-ui/packages/Decorations/Decoration2/settingConfig.js

@@ -25,7 +25,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     decorationColor1: '#3faacb',

data-room-ui/packages/Decorations/Decoration3/settingConfig.js

@@ -25,7 +25,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     decorationColor1: '#7acaec',

data-room-ui/packages/Decorations/Decoration4/settingConfig.js

@@ -25,7 +25,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     decorationColor1: 'rgba(255, 255, 255, 0.3)',

data-room-ui/packages/Decorations/Decoration4Reverse/settingConfig.js

@@ -25,7 +25,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     decorationColor1: 'rgba(255, 255, 255, 0.3)',

data-room-ui/packages/Decorations/Decoration5/settingConfig.js

@@ -25,7 +25,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     decorationColor1: '#3f96a5',

data-room-ui/packages/Decorations/Decoration6/settingConfig.js

@@ -25,7 +25,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     decorationColor1:'#7acaec',

data-room-ui/packages/Decorations/Decoration8/settingConfig.js

@@ -25,7 +25,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     decorationColor1: '#3f96a5',

data-room-ui/packages/Decorations/Decoration8Reverse/settingConfig.js

@@ -25,7 +25,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     decorationColor1: '#3f96a5',

data-room-ui/packages/Decorations/Decoration9/settingConfig.js

@@ -25,7 +25,9 @@ const customConfig = {
     // 绕z轴旋转角度
     rotateZ: 0,
     // 透视距离
-    perspective: 0
+    perspective: 0,
+    skewX: 0,
+    skewY: 0
   },
   customize: {
     decorationColor1: 'rgba(3, 166, 224, 0.8)',

data-room-ui/packages/Echarts/echartList.js

@@ -35,6 +35,8 @@ function getEchartsList (files) {
       rotateY: config.rotateY || 0,
       rotateZ: config.rotateZ || 0,
       perspective: config.perspective || 0,
+      skewX: config.skewX || 0,
+      skewY: config.skewY || 0,
       type: 'echartsComponent',
       loading: false,
       // 把默认右侧配置与自定义右侧配置集合

data-room-ui/packages/G2Plots/plotList.js

@@ -45,6 +45,8 @@ function getPlotList (files) {
       rotateY: config.rotateY || 0,
       rotateZ: config.rotateZ || 0,
       perspective: config.perspective || 0,
+      skewX: config.skewX || 0,
+      skewY: config.skewY || 0,
       type: 'customComponent',
       chartType: config.chartType,
       loading: false,

data-room-ui/packages/RemoteComponents/remoteComponentsList.js

@@ -43,6 +43,8 @@ export function getRemoteComponents (comList) {
       rotateY: config.rotateY || 0,
       rotateZ: config.rotateZ || 0,
       perspective: config.perspective || 500,
+      skewX: config.skewX || 0,
+      skewY: config.skewY || 0,
       type: 'remoteComponent',
       option: {
         ...cloneDeep(settingConfig),
@@ -79,6 +81,8 @@ export function getRemoteComponentConfig (code, name) {
     rotateY: 0,
     rotateZ: 0,
     perspective: 0,
+    skewX: 0,
+    skewY: 0,
     type: 'remoteComponent',
     option: {
       ...cloneDeep(settingConfig)

data-room-ui/packages/Render/index.vue

@@ -38,7 +38,7 @@
       :style="{
         zIndex: chart.z || 0,
       }"
-      :transform="`perspective(${chart.perspective > 0? (chart.perspective + 'px') : 'none' }) rotateX(${chart.rotateX == undefined ? 0 : chart.rotateX}deg) rotateY(${chart.rotateY == undefined ? 0 : chart.rotateY}deg)  rotateZ(${chart.rotateZ == undefined ? 0 : chart.rotateZ}deg)`"
+      :transform="`perspective(${chart.perspective > 0? (chart.perspective + 'px') : 'none' }) rotateX(${chart.rotateX == undefined ? 0 : chart.rotateX}deg) rotateY(${chart.rotateY == undefined ? 0 : chart.rotateY}deg)  rotateZ(${chart.rotateZ == undefined ? 0 : chart.rotateZ}deg) skew(${chart.skewX == undefined ? 0 : chart.skewX}deg, ${chart.skewY == undefined? 0 : chart.skewY}deg)`"
       :grid="[1,1]"
       :handles="handlesList"
       class-name-handle="bs-handle-class"