一、前言

当前环境 webpack；vue3；vuex；router（其实和环境关系不大，还是写出来看看吧）

我使用的是模块化方式引用的echats，用的是这个示例 -> 点击查看示例

从官网给出的示例来看，valueAnimation是生效的，每个柱子后面的数字都是带有动画过渡效果的，我的配置与官方的配置一样，该引用的都引用了，valueAnimation也设置为true了，但就是不生效。

二、解决方案

这里为了方便直接把解决方案写出来吧，感兴趣可以看看第三部分我是怎么解决的。

将import * as echarts from 'echarts/core';替换为const echats = require('echarts/core');

-- import * as echarts from 'echarts/core';
++ const echarts = require('echarts/core');

三、我是如何解决的

从官网的描述来看，valueAnimation这个功能是内置支持的，也就是说我们应该可以在echats核心代码中找到相关的设置。

通过valueAnimation这个关键字翻阅源码大概找到了如下两个相关方法，在这个方法中function animateLabelValue，有这么一段注解 // Value not changed, no new label animation，并且此注解上方还有valueAnimation的if判断来进行return操作。

由此可见这个很有可能就是关于操作动画部分的代码，经过调试发现，果然这个方法没有运行到，通过检索这个方法的引用链 （查找谁引用了这个方法，然后引用这个方法的方法也被其他方法引用了，这一条链式的引用，本文暂称为引用链）。

结果发现这一条引用链都是无效的，经过调试发现都没有被执行到，引用链如下（从左至右依次被引用） animateLabelValue->_animateLabels->processLabelsOverall->installLabelLayout

再通过检索引用链顶端的installLabelLayout方法，找到了我们引用echats插件的入口处，也就是我们通过import * as echarts from 'echarts/core';引用的文件。

再经过调试，发现最下方的两行代码是没有被执行到的，也就是这个installLabelLayout的引用以及use操作，是无效的。

这是因为import * as echarts from 'xxx'这个格式的引用不会执行内部的代码（从运行结果上来看是这样的），只会将此文件中export的内容保存到echarts这里。

所以使用CommonJS规范的require方法引用就行了，也可以在外部再重新引用并use一下。

//core.js
export * from '../core/echarts';
export * from './api';
import { use } from '../extension'; // Import label layout by default.
// TODO will be treeshaked.
//下方代码没有被执行到
import { installLabelLayout } from '../label/installLabelLayout';
use(installLabelLayout);