perf: 图表缩略图缩放比例优化

This commit is contained in:
pipipi-pikachu 2022-05-01 15:25:53 +08:00
parent d7a9fc0e28
commit f6a8c921f1
2 changed files with 8 additions and 11 deletions

View File

@ -66,6 +66,8 @@ export default defineComponent({
const address = ref('') const address = ref('')
const slideId = ref('') const slideId = ref('')
slideId.value = slides.value[0].id
const selectedSlide = computed(() => { const selectedSlide = computed(() => {
if (!slideId.value) return null if (!slideId.value) return null

View File

@ -23,9 +23,8 @@
:outline="elementInfo.outline" :outline="elementInfo.outline"
/> />
<Chart <Chart
:class="{ 'need-scale': needScaleSize }" :width="elementInfo.width * zoom"
:width="chartWidth" :height="elementInfo.height * zoom"
:height="chartHeight"
:type="elementInfo.chartType" :type="elementInfo.chartType"
:data="elementInfo.data" :data="elementInfo.data"
:options="elementInfo.options" :options="elementInfo.options"
@ -33,6 +32,7 @@
:gridColor="elementInfo.gridColor" :gridColor="elementInfo.gridColor"
:legends="elementInfo.data.legends" :legends="elementInfo.data.legends"
:legend="elementInfo.legend || ''" :legend="elementInfo.legend || ''"
:style="{ zoom: 1 / zoom }"
/> />
</div> </div>
</div> </div>
@ -59,17 +59,15 @@ export default defineComponent({
required: true, required: true,
}, },
}, },
setup(props) { setup() {
const slideScale = inject(injectKeySlideScale) || ref(1) const slideScale = inject(injectKeySlideScale) || ref(1)
const needScaleSize = computed(() => slideScale.value < 1) const needScaleSize = computed(() => slideScale.value < 1)
const chartWidth = computed(() => needScaleSize.value ? props.elementInfo.width * 10 : props.elementInfo.width) const zoom = computed(() => needScaleSize.value ? 1 / slideScale.value : 1)
const chartHeight = computed(() => needScaleSize.value ? props.elementInfo.height * 10 : props.elementInfo.height)
return { return {
needScaleSize, needScaleSize,
chartWidth, zoom,
chartHeight,
} }
}, },
}) })
@ -87,7 +85,4 @@ export default defineComponent({
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.need-scale {
zoom: .1;
}
</style> </style>