fix: 解决缩放大于100%的问题

This commit is contained in:
MTrun 2022-03-10 20:54:02 +08:00
parent d1c0cae68e
commit d15e551743
5 changed files with 17 additions and 7 deletions

View File

@ -11,6 +11,7 @@ import { LineChart } from 'echarts/charts'
import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
const props = defineProps({
themeSetting: {
@ -35,7 +36,10 @@ use([
LegendComponent
])
const chartEditStore = useChartEditStore()
const option = computed(() => {
console.log(chartEditStore.getEditCanvasConfig.chartThemeColor)
return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})
</script>

View File

@ -541,7 +541,6 @@ export const useChartEditStore = defineStore({
if (!this.getEditCanvas.lockScale) {
this.setPageSizeClass()
this.setPageSize(scale)
this.setPageStyle('transform', `scale(${scale})`)
this.getEditCanvas.userScale = scale
if (sys) {
this.getEditCanvas.scale = scale

View File

@ -1,6 +1,6 @@
<template>
<div
class="go-edit-range"
class="go-edit-range go-transition"
:style="rangeStyle"
@mousedown="mousedownHandleUnStop($event, undefined)"
>
@ -31,15 +31,24 @@ const size = computed(() => {
})
const rangeStyle = computed(() => {
//
const scale = {
transform: `scale(${getEditCanvas.value.scale})`
}
console.log(scale)
//
const background = getEditCanvasConfig.value.background
const backgroundImage = getEditCanvasConfig.value.backgroundImage
const selectColor = getEditCanvasConfig.value.selectColor
const backgroundColor = background ? background : undefined
const computedBackground = selectColor
? { background: backgroundColor }
: { background: `url(${backgroundImage}) no-repeat center/100% !important` }
// @ts-ignore
return { ...useSizeStyle(size.value), ...computedBackground }
return { ...useSizeStyle(size.value), ...computedBackground, ...scale }
})
//
@ -55,6 +64,7 @@ const rangeModelStyle = computed(() => {
position: relative;
border: 1px solid;
border-radius: 15px;
transform-origin: left top;
@include fetch-theme('box-shadow');
@include filter-border-color('hover-border-color');
@include fetch-theme-custom('border-color', 'background-color4');

View File

@ -12,11 +12,10 @@ export const useComponentStyle = (attr: AttrType, index: number) => {
}
export const useSizeStyle = (attr: AttrType, scale?: number) => {
const sizeStyle = {
return {
width: `${scale ? scale * attr.w : attr.w}px`,
height: `${scale ? scale * attr.h : attr.h}px`
}
return sizeStyle
}
// 锚点位置

View File

@ -96,8 +96,6 @@ onMounted(() => {
@extend .go-point-bg;
@include goId(chart-edit-content) {
margin: 20px;
/* overflow: hidden; */
transform-origin: left top;
border: 1px solid rgba(0, 0, 0, 0);
@extend .go-transition;
&.content-resize {