gongchunyi
16 小时以前 2661e2fed477e94f5f048ef3fc8aec40acef01d0
src/components/Echarts/echarts.vue
@@ -9,7 +9,7 @@
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import * as echarts from 'echarts'
const emit = defineEmits(['finished'])
const emit = defineEmits(['finished', 'click'])
// Props
const props = defineProps({
@@ -26,7 +26,7 @@
  },
  dataset: {
    type: Object,
    default: () => {}
    default: () => { }
  },
  xAxis: {
    type: Array,
@@ -82,10 +82,10 @@
    type: Object,
    default: () => ({})
  },
   option: {
      type: Object,
      default: () => ({})
   },
  option: {
    type: Object,
    default: () => ({})
  },
})
import { watch } from 'vue'
@@ -128,6 +128,9 @@
  chartInstance = echarts.init(chartRef.value)
  finishedHandler = () => emit('finished')
  chartInstance.on('finished', finishedHandler)
  chartInstance.on('click', (params) => {
    emit('click', params)
  })
  renderChart()
  // setOption 后补一次 resize,确保首屏尺寸正确
  nextTick(() => {
@@ -137,8 +140,8 @@
// Methods
function generateChart(option) {
  const copiedOption = option
  const copiedOption = option
  if (copiedOption.series && copiedOption.series.length > 0) {
    copiedOption.series.forEach((s, index) => {
      if (s.type === 'line' && props.lineColors.length) {
@@ -152,7 +155,7 @@
      }
    })
  }
  chartInstance.setOption(copiedOption)
}
@@ -170,7 +173,7 @@
    tooltip: props.tooltip,
    visualMap: Object.keys(props.visualMap).length ? props.visualMap : undefined,
  }
  chartInstance.clear()
  generateChart(option)
}
@@ -202,19 +205,19 @@
// Watch all reactive props that affect the chart
watch(
    () => [props.xAxis, props.yAxis, props.series, props.legend, props.tooltip, props.visualMap],
    () => {
      // 如果首屏还没初始化成功,等待容器 ready 后再渲染
      if (!chartInstance) {
        initChartWhenReady()
        return
      }
      renderChart()
      // 数据变化后补一次 resize,避免布局变化导致的偏移
      nextTick(() => {
        if (chartInstance) chartInstance.resize()
      })
    },
    { deep: true, immediate: true }
  () => [props.xAxis, props.yAxis, props.series, props.legend, props.tooltip, props.visualMap],
  () => {
    // 如果首屏还没初始化成功,等待容器 ready 后再渲染
    if (!chartInstance) {
      initChartWhenReady()
      return
    }
    renderChart()
    // 数据变化后补一次 resize,避免布局变化导致的偏移
    nextTick(() => {
      if (chartInstance) chartInstance.resize()
    })
  },
  { deep: true, immediate: true }
)
</script>