57 lines
1023 B
Vue
57 lines
1023 B
Vue
<!--
|
|
本组件参考 arco-pro 的实现
|
|
https://github.com/arco-design/arco-design-pro-vue/blob/main/arco-design-pro-vite/src/components/chart/index.vue
|
|
@auther: bypanghu<bypanghu@163.com>
|
|
@date: 2024/5/8
|
|
!-->
|
|
|
|
<template>
|
|
<VCharts
|
|
v-if="renderChart"
|
|
:option="options"
|
|
:autoresize="autoResize"
|
|
:style="{ width, height }"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, nextTick } from 'vue';
|
|
import VCharts from 'vue-echarts';
|
|
import { useWindowResize } from '@/hooks/use-windows-resize'
|
|
|
|
defineProps({
|
|
options: {
|
|
type: Object,
|
|
default() {
|
|
return {};
|
|
},
|
|
},
|
|
autoResize: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
width: {
|
|
type: String,
|
|
default: '100%',
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '100%',
|
|
},
|
|
});
|
|
const renderChart = ref(false);
|
|
nextTick(() => {
|
|
renderChart.value = true;
|
|
});
|
|
useWindowResize(()=>{
|
|
renderChart.value = false;
|
|
nextTick(() => {
|
|
renderChart.value = true;
|
|
});
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
<style scoped lang="less"></style>
|