Merge remote-tracking branch 'origin/dev_New' into dev_New

yaowanxin

3 天以前 62edc8fceb830c85f2a81a525fb9dbbefaac7153

 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 }
)