BizCharts

以前都是用echarts 今天接触了 基于react的 BizCharts

看看源码 一脸懵逼 不过倒是能改 领导提的需求:有多个纵坐标周 最后能实现x轴可以拖动 现在还没实现 寻找解决办法

附上学习的链接: https://www.cnblogs.com/xjnotxj/p/12601021.html

学习总结:
https://blog.youkuaiyun.com/wuChiSha/article/details/103121005

### 如何在 BizCharts 中实现动画效果 #### 使用内置动画属性 BizCharts 支持丰富的动画配置选项,允许开发者轻松创建动态视觉效果。通过设置 `animate` 属性可以控制图表加载时的动画行为[^2]。 ```jsx import { Chart, Interval } from 'bizcharts'; import DataSet from '@antv/data-set'; const data = [ { genre: 'Sports', sold: 275 }, { genre: 'Strategy', sold: 115 }, { genre: 'Action', sold: 120 }, { genre: 'Shooter', sold: 350 }, { genre: 'Other', sold: 150 } ]; const ds = new DataSet(); const dv = ds.createView().source(data); <Chart height={400} data={dv} animate={true}> <Interval position="genre*sold" /> </Chart> ``` #### 自定义动画参数 除了启用默认动画外,还可以进一步自定义动画细节,比如调整持续时间、延迟等。这可以通过传递对象给 `animate` 来完成,其中包含了更多可调参数来微调动画表现。 ```jsx <Chart height={400} data={dv} animate={{ appear: { duration: 800, easing: 'easeLinear' }, update: { duration: 600, delay: (ratio) => ratio * 500 } }}> <Interval position="genre*sold"/> </Chart> ``` #### 动态更新数据触发动画 当需要响应用户操作或其他事件实时改变图表展示的数据时,BizCharts 能够自动处理这些变化并应用相应的过渡动画。只需重新渲染组件或修改状态中的数据源即可触发平滑转换效果。 ```javascript // 假设这是某个按钮点击后的回调函数 handleClick = () => { this.setState((prevState) => ({ chartData: prevState.chartData.map(item => ({...item, sold: Math.random() * 500})) })); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值