echarts - vue3 封装了折线图组件，但是数据变化更新的时候折线图不更新?

Question

lineChart 组件代码

<template>
  <div :id="name" :style="echartStyle"></div>
</template>
<script setup lang='ts'>
import { onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'

import * as Echarts from 'echarts'
const prop = defineProps({
  name: String,
  echartStyle: Object,
  option: Object,
  onClick: Object
})
let echartsModel = ref(null)
watch(
  () => prop.option,
  () => {
    initEchart()
  }
)
watch(
  () => prop.echartStyle,
  () => {
    if (echartsModel) {
      this.echartsModel.resize()
    }
  }
)

const initEchart = () => {
  echartsModel = Echarts.init(document.getElementById(prop.name))
  echartsModel.clear()
  echartsModel.showLoading('default', {
    text: '加载中',
    color: '#409EFF',
    textColor: '#409EFF',
    maskColor: 'rgba(0, 0, 0, 0.5)',
    zlevel: 0
  })
  echartsModel.setOption(prop.option)
  echartsModel.off('click')
  if (prop.onClick) {
    echartsModel.on('click', (param) => {
      context.emit('chartClick', param)
    })
  }
  echartsModel.hideLoading()
}

const drawResize = () => {
  if (echartsModel) {
    echartsModel.resize()
  }
}
onMounted(() => {
  window.addEventListener('resize', drawResize, 20)
  initEchart()
})
onBeforeUnmount(() => {
  echartsModel.dispose()
  window.removeEventListener('resize', drawResize, 20)
})


</script>

调用代码

  <lineChart :name="echartName" :echartStyle="echartStyle" :option="option" v-show="showLine"></lineChart>

赋值代码

 await queryData(form)
 option.value = setOption(tableData.value);
 showLine.value = true;

注意

let option = ref({});

option 我定义的是 ref的 难道要定义成reactive的空对象？？？？试了 报错

Answer 1

const initEchart = () => {
  echartsModel = Echarts.init(document.getElementById(prop.name))
  echartsModel.clear()
  echartsModel.showLoading('default', {
    text: '加载中',
    color: '#409EFF',
    textColor: '#409EFF',
    maskColor: 'rgba(0, 0, 0, 0.5)',
    zlevel: 0
  })
  echartsModel.setOption(prop.option, true) // 设置 notMerge 参数为 true
  echartsModel.off('click')
  if (prop.onClick) {
    echartsModel.on('click', (param) => {
      context.emit('chartClick', param)
    })
  }
  echartsModel.hideLoading()
}

或者：

watch(
  () => prop.option,
  (newOption) => {
    console.log(newOption)
    initEchart()
  }
)

Answer 2

你定义的echartsModel是ref类型的

let echartsModel = ref(null)

试试把它要赋值的地方改成echartsModel.value