eacharts柱状图上涨效果

ECharts是一个非常流行的JavaScript图表库，它支持多种类型的图表，包括柱状图。如果你想在ECharts中创建一个柱状图并添加上涨动画效果，你可以按照以下步骤操作：

1. **初始化图表**：首先，你需要引入ECharts库并在HTML中创建一个div元素用于放置图表。

<div id="chart" style="width: 600px;height:400px;"></div>

2. **配置数据和选项**：然后，在JavaScript中，设置数据和配置项，其中包含`animation`属性控制动画效果。

var option = {
    series: [{
        name: '销量',
        type: 'bar', // 柱状图
        data: [5, 20, 36, 10, 10, 20],
        animation: { // 添加动画效果
            duration: 1000, // 动画持续时间（单位ms）
            easing: 'easeOutQuart', // 缓动函数
            appear: { // 上涨动画
                properties: ['y'], // 只改变y轴值
                delay: function(index) { return index * 150; }, // 每个条形的延迟时间
                duration: 500, // 单个条形的动画时间
            }
        }
    }]
};

3. **渲染图表**：最后，使用ECharts的`echarts.init()`和`setOption()`方法将图表绑定到容器并显示。

var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);
chart.show();

这个例子中，每个柱子会从底部平滑地向上移动到其对应的数据值位置，给人一种动态上升的感觉。