[apache/echarts]echarts5.0.1 和vue2.6 版本在使用新特性动态：动态柱状图，label会始终是0

<template>
  <div id="id" style="width: 100%; height: 500px"></div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    name: 'test',
    mounted() {
      const res = [
        { name: '土采置存她', num: 79 },
        { name: '位件内月前', num: 827 },
        { name: '得三率别重', num: 99 },
        { name: '样名广斯', num: 356 },
        { name: '前象确', num: 359 },
      ];
      this.options = {
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          max: 3,
          animationDuration: 300,
          animationDurationUpdate: 300,
          inverse: true,
          data: res.map(i => {
            return i.name;
          }),
        },
        series: [
          {
            name: 'xxxxx',
            type: 'bar',
            realtimeSort: true,
            label: {
              show: true,
              position: 'right',
              valueAnimation: true,
            },
            showBackground: true,
            data: res.map(i => {
              return i.num;
            }),
          },
        ],
        animationDuration: 3000,
        animationDurationUpdate: 3000,
      };
      this.initChart();
    },
    methods: {
      initChart() {
        this.$nextTick(e => {
          this.chart = echarts.init(document.getElementById('id'));
          this.chart.setOption(this.options);
        });
      },
    },
  };
</script>

和官网上的示例几乎一致，单独使用valueAnimation或者realtimeSort是有效的，但一起使用就会导致label始终为0的bug。

动态柱状图主要是针对数据更新时的动画，可能在初始化的时候也应用会有问题。我们在下个版本修复一下，先可以这样调整一下：

const res = [
    { name: '土采置存她', num: 0 },
    { name: '位件内月前', num: 0 },
    { name: '得三率别重', num: 0 },
    { name: '样名广斯', num: 0 },
    { name: '前象确', num: 0 },
];

option = {
    xAxis: {
      type: 'value',
    },
    yAxis: {
      type: 'category',
      max: 3,
      animationDuration: 300,
      animationDurationUpdate: 300,
      inverse: true,
      data: res.map(i => {
        return i.name;
      }),
    },
    series: [
      {
        name: 'xxxxx',
        type: 'bar',
        realtimeSort: true,
        label: {
          show: true,
          position: 'right',
          valueAnimation: true,
        },
        // showBackground: true,
        data: res.map(i => {
          return i.num;
        }),
      },
    ],
    animationEasingUpdate: 'linear',
    animationDuration: 0,
    animationDurationUpdate: 3000,
};

setTimeout(function () {
   myChart.setOption({
        series: [{
            data: [79, 827, 99, 356, 359]
        }] 
   });
});

我刚才又重新做了测试，和vue没有关系，但凡是通过import * as echarts from 'echarts';引入的，通过webpack构建后都会出现如上问题，但通过script直接导入的则没有这个问题。

另外补充一句：您给的方案并没有解决问题。

@akeagle https://codesandbox.io/dashboard 发我下你的例子？

version "4.44.2" resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.2.tgz#6bfe2b0af055c8b2d1e90ed2cd9363f841266b72" integrity sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==

这是我测试用的webpack版本，目前不确定问题出在webpack这里还是echarts这里。

@akeagle https://codesandbox.io/dashboard 发我下你的例子？

代码我没改变，还是上面的代码，区别只是一个import，一个script引入的echarts。

@akeagle 我写了个 import 的例子 https://codesandbox.io/s/dark-frog-28xz8?file=/src/index.js

@akeagle 我写了个 import 的例子 https://codesandbox.io/s/dark-frog-28xz8?file=/src/index.js

具体原因我也不清楚，但您可以本地构建一下，我本地构建后的确实是存在上述问题的。ps:话说国内真是各种不方便，在线代码编辑的工具一个比一个卡，完全用不起的样子。