1.首页开发联调

gaoluyang

8 天以前 75784e6ec3f6546650ee92ad69fdd270d1ebd0a7

 src/components/Echarts/echarts.vue

@@ -51,15 +51,15 @@
  },
  lineColors: {
    type: Array,
    default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
    default: () => []
  },
  barColors: {
    type: Array,
    default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
    default: () => []
  },
  pieColors: {
    type: Array,
    default: () => ['#A4EEDA', '#86C1F4', '#91A0FC', '#F6C18B', '#F09595']
    default: () => []
  },
  loadingOption: {
    type: Object,
@@ -73,30 +73,34 @@
  }
})

import { watch } from 'vue'

// Refs
const chartRef = ref(null)
let chartInstance = null

// Methods
function generateChart(option) {
  if (option.series && option.series.length > 0) {
    option.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]
        }
      }
    })
  }
  const copiedOption = JSON.parse(JSON.stringify(option)) // ✅ 深拷贝
  
  chartInstance.setOption(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]
  //       }
  //     }
  //   })
  // }
  
  chartInstance.setOption(copiedOption)
}

function renderChart() {
@@ -136,12 +140,13 @@
})

// Watch all reactive props that affect the chart
watchEffect(() => {
  // 避免在 mounted 前触发
  if (chartInstance) {
    renderChart()
  }
}, {
  flush: 'post'
})
watch(
    () => [props.xAxis, props.series],
    () => {
      if (chartInstance) {
        renderChart()
      }
    },
    { deep: true, immediate: true }
)
</script>