切换echart图表没有动画

[fairySusan]

当使用绑定响应式属性ref的select来切换图表的时候，echarts没有了动画，以下是源码里LineChart.vue,，我写了复现代码：

<template>
  <div class="mode-control">
    <a-select
      v-model:value="chartType"
      style="width: 120px"
      @change="onChartTypeChange"
    >
      <a-select-option value="trend">trend</a-select-option>
      <a-select-option value="stack">stack</a-select-option>
      <a-select-option value="accumulate">accumulate</a-select-option>
      <a-select-option value="distribute">distribute</a-select-option>
    </a-select>
  </div>
  <div ref="bar" :style="styleObj"></div>
</template>
<script lang="ts" setup>
import {ref, onUpdated, computed,onMounted} from "vue"
import echarts from "./index"
import {ECharts, EChartsCoreOption} from "echarts/core"

const props = defineProps<{
  styleObj: {width: string; height: string}
}>()
const chartType = ref('trend')
const styleObj = computed(() => {
  return {
    width: props.styleObj.width,
    height: props.styleObj.height
  }
})

const bar = ref<HTMLElement>()
let ins: ECharts | null = null
const defaultOption = {
  legend: {
    orient: 'horizontal',
    bottom: 0,
    data: []
  },
  tooltip: {
    show:true
  },
  xAxis: [{
    type: 'category',
    boundaryGap:true,
    axisTick: {
      alignWithLabel:true
    },
    axisLabel: {
      interval: 0,
    },
    data: []
  }],
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [],
    type: "line",
  }]
}
const option = {
    "legend": {
      "data": [
        {
          "name": "click.总次数"
        }
      ]
    },
    "xAxis": [
      {
      "type": "category",
      "boundaryGap": true,
      "axisTick": {
          "alignWithLabel": true
      },
      "data": [
          "04-10",
          "04-11",
          "04-12",
          "04-13",
          "04-14",
          "04-15",
          "04-16" 
      ]
      }
    ],
    "series": [
      {
        "name": "click.总次数",
        "data": [
          2,
          3,
          0,
          0,
          0,
          2,
          0
        ],
        "type": "line"
      }
    ]
}

const option2 = {
    "legend": {
        "data": [
            {
                "name": "click.总次数"
            }
        ]
    },
    "xAxis": [
        {
            "type": "category",
            "boundaryGap": true,
            "axisTick": {
                "alignWithLabel": true
            },
            "data": [
                "04-10",
                "04-11",
                "04-12",
                "04-13",
                "04-14",
                "04-15",
                "04-16"
            ]
        }
    ],
    "series": [
        {
            "xAxisIndex": 0,
            "name": "click.总次数",
            "data": [
                "2",
                "3",
                "0",
                "0",
                "0",
                "2",
                "0"
            ],
            "type": "line",
            "stack": "x",
            "areaStyle": {}
        }
    ]
}
const option3 = {
    "legend": {
        "data": [
            {
                "name": "click.总次数"
            }
        ]
    },
    "xAxis": [
        {
            "type": "category",
            "boundaryGap": true,
            "axisTick": {
                "alignWithLabel": true
            },
            "data": [
                "04-10",
                "04-11",
                "04-12",
                "04-13",
                "04-14",
                "04-15",
                "04-16"
            ]
        }
    ],
    "series": [
        {
            "xAxisIndex": 0,
            "name": "click.总次数",
            "data": [
                2,
                5,
                5,
                5,
                5,
                7,
                7
            ],
            "type": "line"
        }
    ]
}

const option4 = {
    "legend": {
        "data": [
            {
                "name": "原始日期"
            }
        ]
    },
    "xAxis": {
        "data": [
            "click.总次数.总体"
        ],
        "axisLabel": {
            "interval": 0
        },
        "boundaryGap": true,
        "axisTick": {
            "alignWithLabel": true
        }
    },
    "series": [
        {
            "name": "原始日期",
            "type": "bar",
            "barWidth": 40,
            "data": [
                "7"
            ]
        }
    ]
}
onUpdated(() => {
  if (bar.value && !ins) {
    const w = getStyle(bar.value, "width")
    if (w !== "0px") {
      ins = echarts.init(bar.value)
      ins.setOption(defaultOption)
    }
  }
  if (ins) {
    ins.resize()
  }
})
function getStyle(dom: HTMLElement, attr: string) {
  return window.getComputedStyle(dom, null)[attr]
}

const onChartTypeChange = (type:string) => {
  if (type==='trend') {
    ins.setOption(option, {replaceMerge: ['series', 'xAxis']})
  } else if(type==='stack'){
    ins.setOption(option2, {replaceMerge: ['series', 'xAxis']})
  } else if(type==='accumulate'){
    ins.setOption(option3, {replaceMerge: ['series', 'xAxis']})
  } else if(type==='distribute'){
    ins.setOption(option4, {replaceMerge: ['series', 'xAxis']})
  }
}
</script>
<style lang="scss" scoped></style>