antvis/G2

Do you want to work on this issue?

You can request for a bounty in order to promote it!

waveIn 动画支持更新图形 #4852

pearmini posted onGitHub

目前使用 waveIn 动画更新数据的时候,还是从 0 度旋转到最终的角度,期望能从起始角度开始。

animation-wave-in

import { Chart } from '@antv/g2';

const chart = new Chart({
  theme: 'classic',
  container: 'container',
  width: 200,
  height: 200,
});

chart
  .interval()
  .coordinate({ type: 'radial', innerRadius: 0.7, outerRadius: 0.95 })
  .data([{ name: 'CPU', percent: 27, color: 'rgba(90, 132, 226, 1)' }])
  .encode('x', 'name')
  .encode('y', 'percent')
  .encode('color', 'color')
  .encode('key', 'name')
  .encode('size', 100)
  .scale('y', { domainMax: 100 })
  .scale('color', { type: 'identity' })
  .tooltip({ name: '已使用', channel: 'y' })
  .axis(false)
  .style('radius', 26)
  .style('shadowColor', 'color')
  .style('shadowBlur', 10)
  .style('shadowOffsetX', -1)
  .style('shadowOffsetY', -1)
  .animate('enter', { type: 'waveIn', duration: 1000 })
  .animate('update', { type: 'waveIn' });

chart.render().then(() => {
  chart.changeData([
    { name: 'CPU', percent: 40, color: 'rgba(90, 132, 226, 1)' },
  ]);
});

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests