Анимация панели Apache ECharts?

Попытка заставить анимацию полосы изменения размера работать для демонстрации Apache ECharts (ссылка).

Это Stackblitz — код диаграммы находится в компоненте приветствия..

Экземпляр диаграммы получается из вызова этого метода.

  onChartInit(echarts) {
    this.echartsIntance = echarts;
  }

Генератор событий chartInit на графике запускает его.

<div
  echarts
  (chartInit) = "onChartInit($event)"
  [options] = "options"
  class = "demo-chart"
></div>

А события изменения размера окна отслеживаются через RxJS fromEvent. Метод resize() вызывается в конструкторе:

  resize() {
    fromEvent(window, 'resize')
      .pipe(debounceTime(200))
      .subscribe((e) => {
        console.info('RESIZE');
        if (this.echartsIntance) {
          this.echartsIntance.resize();
        }
      });
  }

При изменении размера окна полосы диаграммы должны анимироваться, однако анимация не происходит. Есть идеи?

[JS за 1 час] - 9. Асинхронный
[JS за 1 час] - 9. Асинхронный
JavaScript является однопоточным, то есть он может обрабатывать только одну задачу за раз. Для обработки длительных задач, таких как сетевые запросы,...
Подъем в javascript
Подъем в javascript
Hoisting - это поведение в JavaScript, при котором переменные и объявления функций автоматически "перемещаются" в верхнюю часть соответствующих...
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
0
0
109
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

На самом графике разметку мы должны добавить.

[autoResize] = "false"

И метод resize должен быть настроен. Вот пример:

this.echartsIntance.resize({
  animation: {
     duration: 1500,
     easing: 'elasticOut',
   },
});

Это новый рабочий стекблиц.

Другие вопросы по теме