|
|
@ -1,5 +1,5 @@ |
|
|
|
<template> |
|
|
|
<div ref="echartsContainerRef" v-bind="attrs"> |
|
|
|
<div ref="echartsContainerRef" v-bind="attrs" class="h-full"> |
|
|
|
<q-resize-observer debounce="500" @resize="onResize" /> |
|
|
|
<div ref="echartsRef" style="width: 100%; height: 100%"></div> |
|
|
|
</div> |
|
|
@ -44,32 +44,27 @@ const getSize = () => { |
|
|
|
* 初始化 Echarts |
|
|
|
*/ |
|
|
|
const initEcharts = () => { |
|
|
|
console.log('echarts initEcharts'); |
|
|
|
const size = getSize(); |
|
|
|
const dom: HTMLElement | null = echartsRef.value; |
|
|
|
echartsObject = echarts.init(dom, null, size); |
|
|
|
}; |
|
|
|
|
|
|
|
const setOption = (option) => { |
|
|
|
console.log('echarts setOption'); |
|
|
|
echartsOption = option; |
|
|
|
echartsObject.setOption(echartsOption); |
|
|
|
}; |
|
|
|
|
|
|
|
const setOptionFromUrl = () => { |
|
|
|
console.log('echarts setOptionFromUrl'); |
|
|
|
axios.get(props.optionUrl).then((response) => { |
|
|
|
setOption(response.data); |
|
|
|
}); |
|
|
|
}; |
|
|
|
|
|
|
|
const resize = (size) => { |
|
|
|
console.log('echarts resized'); |
|
|
|
echartsObject?.resize(size); |
|
|
|
}; |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
console.log('echarts onMounted'); |
|
|
|
initEcharts(); |
|
|
|
if (props.optionUrl) { |
|
|
|
setOptionFromUrl(); |
|
|
@ -79,7 +74,6 @@ onMounted(() => { |
|
|
|
}); |
|
|
|
|
|
|
|
onUpdated(() => { |
|
|
|
console.log('echarts onUpdated'); |
|
|
|
if (props.optionUrl) { |
|
|
|
setOptionFromUrl(); |
|
|
|
} else { |
|
|
@ -91,7 +85,6 @@ onUpdated(() => { |
|
|
|
* 语言改变事件 |
|
|
|
*/ |
|
|
|
eventBus.on('onLocaleChanged', (local) => { |
|
|
|
console.log('echarts onLocaleChanged'); |
|
|
|
echartsObject?.setOption(echartsOption); |
|
|
|
echartsObject?.resize(); |
|
|
|
}); |
|
|
@ -100,7 +93,6 @@ eventBus.on('onLocaleChanged', (local) => { |
|
|
|
* 窗口大小发生变化 |
|
|
|
*/ |
|
|
|
const onResize = (size) => { |
|
|
|
console.log('echarts onResize'); |
|
|
|
resize(size); |
|
|
|
}; |
|
|
|
|
|
|
|