ECharts图表正常但动画不显示？问题排查指南：大概率是宽高问题

在ECharts使用过程中，有时会遇到图表正常显示但动画效果缺失的情况。

问题现象

图表正常渲染，数据正确显示，但缺少了预期的动画过渡效果：

js 复制代码

// 配置了动画但无效
const option = {
    animation: true, // 已开启动画
    animationDuration: 1000,
    series: [{
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110],
        // 更多配置...
    }]
}

常见原因及解决方案

1. 数据更新方式不正确

问题原因 ：使用setOption时没有正确保留之前的配置

解决方案：使用notMerge参数或明确设置数据更新方式

js 复制代码

// 错误的方式 - 会丢失动画
chart.setOption(newOption);

// 正确的方式 - 保留之前配置
chart.setOption(newOption, {
    notMerge: false, // 默认为false，可省略
    lazyUpdate: false
});

// 或者明确指定要更新的部分
chart.setOption({
    series: [{
        data: newData
    }]
}, true); // true表示不合并，只更新指定部分

2. 动画配置被覆盖

问题原因：多次调用setOption导致动画配置被重置

解决方案：确保动画配置在每次更新时都正确设置

js 复制代码

// 确保动画配置始终存在
const baseOption = {
    animation: true,
    animationDuration: 1000,
    animationEasing: 'cubicInOut',
    // 其他基础配置...
};

// 更新时合并配置
chart.setOption({
    ...baseOption,
    series: [{
        data: newData
    }]
});

3. 性能优化导致动画禁用

问题原因：数据量过大时ECharts自动禁用动画

解决方案：明确指定动画阈值或优化数据

js 复制代码

const option = {
    animation: true,
    animationThreshold: 2000, // 提高动画阈值
    series: [{
        type: 'bar',
        data: largeData,
        large: true, // 启用大数据模式
        largeThreshold: 2000
    }]
};

那天我遇到这个问题的时候以上三种方法我都排除了，都不存在，最后搞了好久发现是我的代码没有给原始宽高的问题，我是封装了一个Echart的组件，代码如下

js 复制代码

<template>
  <div
    ref="chartRef"
    :style="{
      width: `${width ? width + 'px' : '100%'}`,
      height: `${height ? height + 'px' : '100%'}`,
    }"
  ></div>
</template>

<script setup lang="ts">
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入柱状、折线和饼图常用图表
import { BarChart, LineChart, PieChart, RadarChart, GaugeChart } from "echarts/charts";
// 引入标题，提示框，直角坐标系，数据集，内置数据转换器组件，
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  DataZoomComponent,
} from "echarts/components";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

import { useResizeObserver } from "@vueuse/core";

// 按需注册组件
echarts.use([
  CanvasRenderer,
  BarChart,
  LineChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  RadarChart,
  GaugeChart,
  DataZoomComponent,
]);

const props = defineProps<{
  options: echarts.EChartsCoreOption;
  width?: string | number;
  height?: string | number;
}>();

const chartRef = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;

// 初始化图表
const initChart = () => {
    setTimeout(() => {
      chartInstance = echarts.init(chartRef.value);
      if (props.options) {
        chartInstance.setOption(props.options);
      }
    }, 0);
  }
};

// 监听尺寸变化，自动调整
useResizeObserver(chartRef, () => {
  chartInstance?.resize();
});

// 监听 options 变化，更新图表
watch(
  () => props.options,
  (newOptions) => {
    if (chartInstance && newOptions) {
      initChart();
      // chartInstance.setOption(newOptions);
    }
  },
  { deep: true }
);

onMounted(() => {
  nextTick(() => initChart());
});

onBeforeUnmount(() => {
  chartInstance?.dispose();
});
</script>

我开始用的时候忽略的动画，然后后面写多了，去看Echart的配置的时候，也会看示例我突然发现我的Echart是不是没有动画，然后写了好多个都没有，后面也尝试了许多方法，甚至我在 initChart() 方法中还加了延时器有一部分的 Echart 是展示出了动画

js 复制代码

<div class="chart-left-item bar">
    <BarChart :options="barOptions" />
</div>


import BarChart from "@/components/ECharts/index.vue";

.chart-left-item {
        width: 300px;
        height: 100%;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        &.bar {
          position: relative;
          flex: 1;
        }
      }

我是想让他 flex 自动去自适应给了宽度没法自适应了，（给的是相关代码其他太多就没给不影响）,我之前没写 width: 300px; 然后他直接渲染的，没有任何Echart的动画，写上了之后就有了，问了chatGpt给的答案是因为一开始没有宽高无法确定dom的宽高动画那一部分，简单点来说大家可以看图

所以我一开始给了宽高，后面再给 flex：1 这样他会识别到他是有宽的会继续进行渲染

通过本文的解决方案和示例代码，你应该能够解决大多数动画不显示的问题。记得在复杂的应用中，合理使用动画可以显著提升用户体验

ECharts图表不显示的问题，十有八九是由于容器宽高未正确设置导致的。通过本文的讲解和示例，相信你已经掌握了解决这一问题的方法。记住这个简单的 checklist

✅ 容器元素是否存在
✅ 是否设置了明确的宽高
✅ 是否在DOM加载完成后初始化
✅ 数据格式是否正确

希望这篇文章能帮助你顺利解决ECharts使用过程中遇到的问题，文章中只是我的看法并不是一定是这样的，也有可能是其他问题，只是我这样确实是解决了问题，也欢迎大家评论区留言讨论！