Merge remote-tracking branch 'origin/dev_ai' into dev_7004

gaoluyang

2025-08-13 276c0aa6267a447cfabfe20c511209118385452f

 src/components/Echarts/echarts.vue

@@ -1,6 +1,7 @@
<template>
  <div>
  <div style="position: relative;">
    <div ref="chartRef" :style="chartStyle"></div>
    <slot></slot>
  </div>
</template>

@@ -70,7 +71,15 @@
      maskColor: 'rgba(255, 255, 255, 0.8)',
      zlevel: 0
    })
  }
  },
  color: {
    type: Array,
    default: () => []
  },
   option: {
      type: Object,
      default: () => ({})
   },
})

import { watch } from 'vue'
@@ -81,30 +90,28 @@

// Methods
function generateChart(option) {
  const copiedOption = JSON.parse(JSON.stringify(option)) // ✅ 深拷贝
  const copiedOption = option 
  
  // if (copiedOption.series && copiedOption.series.length > 0) {
  //   copiedOption.series.forEach((s, index) => {
  //     if (s.type === 'line') {
  //       s.itemStyle = {
  //         color: props.lineColors[index] || props.lineColors[0]
  //       }
  //       s.lineStyle = {
  //         color: props.lineColors[index] || props.lineColors[0]
  //       }
  //     } else if (s.type === 'bar') {
  //       s.itemStyle = {
  //         color: props.barColors[index] || props.barColors[0]
  //       }
  //     }
  //   })
  // }
  if (copiedOption.series && copiedOption.series.length > 0) {
    copiedOption.series.forEach((s, index) => {
      if (s.type === 'line' && props.lineColors.length) {
        s.itemStyle = s.itemStyle || {}
        s.lineStyle = s.lineStyle || {}
        s.itemStyle.color = props.lineColors[index] || props.lineColors[0]
        s.lineStyle.color = props.lineColors[index] || props.lineColors[0]
      } else if (s.type === 'bar' && props.barColors.length) {
        s.itemStyle = s.itemStyle || {}
        s.itemStyle.color = props.barColors[index] || props.barColors[0]
      }
    })
  }
  
  chartInstance.setOption(copiedOption)
}

function renderChart() {
  const option = {
    color: props.color.length ? props.color : undefined,
    backgroundColor: props.options.backgroundColor || '#fff',
    xAxis: props.xAxis,
    yAxis: props.yAxis,
@@ -112,7 +119,7 @@
    series: props.series,
    grid: props.grid,
    legend: props.legend,
    tooltip: props.tooltip
    tooltip: props.tooltip,
  }
  
  chartInstance.clear()
@@ -141,7 +148,7 @@

// Watch all reactive props that affect the chart
watch(
    () => [props.xAxis, props.series],
    () => [props.xAxis, props.series, props.legend, props.tooltip],
    () => {
      if (chartInstance) {
        renderChart()