可以通过使用ECharts的animation配置项,来实现柱状图的动画效果。具体做法如下所示:
ECharts柱状图动画示例
// 定义柱状图的数据
var data = [180, 80, 145, 90, 300, 230, 160];
// 定义柱状图的配置项
var option = {
// 声明x轴和y轴
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
// 声明柱状图的数据
series: [{
data: data,
type: 'bar',
// 设置柱状图动画的持续时间
animationDuration: 2000,
// 设置柱状图动画的缓动效果
animationEasing: 'elasticOut'
}]
};
// 获取DOM元素
var chart = document.getElementById('chart');
// 初始化柱状图
var myChart = echarts.init(chart);
// 设置
上一篇:ApacheEcharts中是否可以旋转整个Echarts实例?
下一篇:ApacheECharts:dataZoom的迷你图在绘制过程中可能会误代表被管理的图表数据(在滑块上绘制的图表不符合主图表的数据)