From 62edc8fceb830c85f2a81a525fb9dbbefaac7153 Mon Sep 17 00:00:00 2001
From: yaowanxin <3588231647@qq.com>
Date: 星期五, 30 一月 2026 17:10:55 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev_New' into dev_New
---
src/components/Echarts/echarts.vue | 73 +++++++++++++++++++++++++++++++++---
1 files changed, 67 insertions(+), 6 deletions(-)
diff --git a/src/components/Echarts/echarts.vue b/src/components/Echarts/echarts.vue
index d8264ad..0e07163 100644
--- a/src/components/Echarts/echarts.vue
+++ b/src/components/Echarts/echarts.vue
@@ -6,8 +6,10 @@
</template>
<script setup>
-import { ref, onMounted, onBeforeUnmount, watchEffect } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import * as echarts from 'echarts'
+
+const emit = defineEmits(['finished'])
// Props
const props = defineProps({
@@ -76,6 +78,10 @@
type: Array,
default: () => []
},
+ visualMap: {
+ type: Object,
+ default: () => ({})
+ },
option: {
type: Object,
default: () => ({})
@@ -87,6 +93,47 @@
// Refs
const chartRef = ref(null)
let chartInstance = null
+let finishedHandler = null
+let initTimer = null
+let initAttempts = 0
+
+function clearInitTimer() {
+ if (initTimer) {
+ clearTimeout(initTimer)
+ initTimer = null
+ }
+}
+
+function isContainerReady() {
+ const el = chartRef.value
+ if (!el) return false
+ // offsetWidth/offsetHeight 鏇磋创杩戠湡瀹炲竷灞�锛堜负 0 寰�寰�浠ｈ〃杩樻病甯冨眬/涓嶅彲瑙侊級
+ return el.offsetWidth > 0 && el.offsetHeight > 0
+}
+
+function initChartWhenReady() {
+ clearInitTimer()
+ initAttempts += 1
+
+ if (!isContainerReady()) {
+ // 绛夊鍣ㄧ湡姝ｆ湁灏哄锛堥伩鍏嶉灞忓垵濮嬪寲鍋忕Щ/绌虹櫧锛岀儹鏇存柊鍚庢墠姝ｅ父鐨勬儏鍐碉級
+ // 鏈�澶氶噸璇曠害 3 绉掞紝閬垮厤鏃犻檺寰幆
+ if (initAttempts < 60) {
+ initTimer = setTimeout(initChartWhenReady, 50)
+ }
+ return
+ }
+
+ if (chartInstance) return
+ chartInstance = echarts.init(chartRef.value)
+ finishedHandler = () => emit('finished')
+ chartInstance.on('finished', finishedHandler)
+ renderChart()
+ // setOption 鍚庤ˉ涓�娆� resize锛岀‘淇濋灞忓昂瀵告纭�
+ nextTick(() => {
+ if (chartInstance) chartInstance.resize()
+ })
+}
// Methods
function generateChart(option) {
@@ -113,6 +160,7 @@
const option = {
color: props.color.length ? props.color : undefined,
backgroundColor: props.options.backgroundColor || '#fff',
+ textStyle: props.options.textStyle || { color: '#333' },
xAxis: props.xAxis,
yAxis: props.yAxis,
dataset: props.dataset,
@@ -120,6 +168,7 @@
grid: props.grid,
legend: props.legend,
tooltip: props.tooltip,
+ visualMap: Object.keys(props.visualMap).length ? props.visualMap : undefined,
}
chartInstance.clear()
@@ -133,26 +182,38 @@
// Lifecycle hooks
onMounted(() => {
- chartInstance = echarts.init(chartRef.value)
- renderChart()
+ initAttempts = 0
+ initChartWhenReady()
window.addEventListener('resize', windowResizeListener)
})
onBeforeUnmount(() => {
if (chartInstance) {
window.removeEventListener('resize', windowResizeListener)
+ if (finishedHandler) {
+ chartInstance.off('finished', finishedHandler)
+ finishedHandler = null
+ }
chartInstance.dispose()
chartInstance = null
}
+ clearInitTimer()
})
// Watch all reactive props that affect the chart
watch(
- () => [props.xAxis, props.series, props.legend, props.tooltip],
+ () => [props.xAxis, props.yAxis, props.series, props.legend, props.tooltip, props.visualMap],
() => {
- if (chartInstance) {
- renderChart()
+ // 濡傛灉棣栧睆杩樻病鍒濆鍖栨垚鍔燂紝绛夊緟瀹瑰櫒 ready 鍚庡啀娓叉煋
+ if (!chartInstance) {
+ initChartWhenReady()
+ return
}
+ renderChart()
+ // 鏁版嵁鍙樺寲鍚庤ˉ涓�娆� resize锛岄伩鍏嶅竷灞�鍙樺寲瀵艰嚧鐨勫亸绉�
+ nextTick(() => {
+ if (chartInstance) chartInstance.resize()
+ })
},
{ deep: true, immediate: true }
)
--
Gitblit v1.9.3