5 changed files with 154 additions and 16 deletions
@ -0,0 +1,80 @@ |
|||
<template> |
|||
<div :style="echartsStyleComputed"> |
|||
<div ref="echartsRef" class="w-full h-full"></div> |
|||
<q-resize-observer @resize="onResize" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { ref, computed, defineProps, nextTick } from 'vue'; |
|||
import * as echarts from 'echarts'; |
|||
import { eventBus } from '@/platform'; |
|||
|
|||
const echartsRef = ref(); |
|||
let echartsObject: echarts.ECharts | null = null; |
|||
|
|||
/** |
|||
* 组件接收属性 |
|||
*/ |
|||
const props = defineProps({ |
|||
width: { type: [Number, String], default: '98%' }, |
|||
height: { type: [Number, String], default: '98%' }, |
|||
option: { |
|||
type: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
/** |
|||
* 高宽计算 |
|||
*/ |
|||
const echartsStyleComputed = computed(() => { |
|||
let width = props.width; |
|||
let height = props.height; |
|||
if (typeof props.width === 'number') { |
|||
width = props.width + 'px'; |
|||
} |
|||
if (typeof props.height === 'number') { |
|||
height = props.height + 'px'; |
|||
} |
|||
return 'width: ' + width + ';height: ' + height + ';'; |
|||
}); |
|||
|
|||
/** |
|||
* 初始化 Echarts |
|||
*/ |
|||
const initEcharts = () => { |
|||
const dom: HTMLElement | null = echartsRef.value; |
|||
echartsObject = echarts.init(dom); |
|||
echartsObject.setOption(props.option); |
|||
}; |
|||
|
|||
/** |
|||
* 语言改变事件 |
|||
*/ |
|||
eventBus.on('onLocaleChanged', (local) => { |
|||
nextTick(() => { |
|||
echartsObject?.setOption(props.option); |
|||
echartsObject?.resize(); |
|||
}); |
|||
}); |
|||
|
|||
/** |
|||
* 窗口大小发生变化 |
|||
*/ |
|||
const onResize = () => { |
|||
setTimeout(() => { |
|||
// 延迟重新设置echarts图表,否则无法拿到dom的高宽,重设之后的高宽不正确。 |
|||
echartsObject?.resize(); |
|||
}, 100); |
|||
}; |
|||
|
|||
nextTick(() => { |
|||
// 延迟初始化echarts图表,否则无法拿到dom的高宽,导致高宽不正确。 |
|||
setTimeout(() => { |
|||
initEcharts(); |
|||
}, 100); |
|||
}); |
|||
</script> |
Loading…
Reference in new issue