PPTist/src/views/components/element/ChartElement/ScreenChartElement.vue
2021-01-18 12:58:21 +08:00

66 lines
1.4 KiB
Vue

<template>
<div class="screen-element-chart"
:style="{
top: elementInfo.top + 'px',
left: elementInfo.left + 'px',
width: elementInfo.width + 'px',
height: elementInfo.height + 'px',
}"
>
<div
class="element-content"
:style="{
backgroundColor: elementInfo.fill,
}"
>
<ElementOutline
:width="elementInfo.width"
:height="elementInfo.height"
:outline="elementInfo.outline"
/>
<Chart
:width="elementInfo.width"
:height="elementInfo.height"
:type="elementInfo.chartType"
:data="elementInfo.data"
:options="elementInfo.options"
:themeColors="elementInfo.themeColors"
:gridColor="elementInfo.gridColor"
/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { PPTChartElement } from '@/types/slides'
import ElementOutline from '@/views/components/element/ElementOutline.vue'
import Chart from '@/components/Chart.vue'
export default defineComponent({
name: 'screen-element-chart',
components: {
ElementOutline,
Chart,
},
props: {
elementInfo: {
type: Object as PropType<PPTChartElement>,
required: true,
},
},
})
</script>
<style lang="scss" scoped>
.screen-element-chart {
position: absolute;
}
.element-content {
width: 100%;
height: 100%;
}
</style>