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