Echarts笔记——增量动画

Echarts笔记——增量动画

目录

Echarts笔记——增量动画

1.  添加按钮

2. 获取按钮标签

3. 响应修改数据函数

4. 响应增加数据函数

5.  效果图

6. 原码

---

 

1.  添加按钮

 

// 添加按钮
<button id="modify">修改数据</button>

<button id="add">添加数据</button>

 

2. 获取按钮标签

 

// 获取添加数据按钮的标签
var btnAdd = document.getElementById("add")

// 获取修改数据按钮的标签
var btnModify = document.getElementById("modify")

 

3. 响应修改数据函数

 

// 响应修改数据的函数
btnModify.onclick = function () {

    //Math.ceil:函数返回大于或等于一个给定数字的最小整数。(向上取整)
    //Math.random()  函数返回一个浮点数,  伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1），
    var newBarData = [Math.ceil(Math.random() * 10000), 2352, 4522, Math.ceil(Math.random() * 10000), 5315,4324,3522,2793, Math.ceil(Math.random() * 10000)]
    newX_Data = ['a部门', 'b部门', 'c部门', 'd部门', 'e部门', 'f部门', 'g部门', 'h部门', "i部门"]

    // option可以设置多次，新旧option之间不是覆盖关系，而是整合关系
    // 设置新的option的时候，只需要考虑到变化的部分
    var option = {
        xAxis: {
            type: 'category',
            data: newX_Data
        },
        series: [