echarts之增量动画

增量动画

mCharts.setOption
所有数据的更新都通过setOption实现
不用考虑数据到底产生了哪些变化
Echarts会找到两组数据之间的差异然后通过合适的动画去表现数据的变化

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>柱状图</title>
  <!--  1。引入echart.js文件-->
  <script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="height: 600px;width: 600px">
</div>
<button id="modify">修改数据</button>
<button id="add">新增数据</button>

<script>

    //3。初始化echarts实力对象
    var mCharts = echarts.init(document.querySelector('div'));
    var xArrData = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'];
    var yArrData = [88, 92, 63, 77, 94, 80, 72, 86];

    //4。准备配置项
    var option = {
        title: {
            text: '成绩',
            textStyle: {
                color: 'red'
            }
        },
        xAxis: { //直角坐标系中的x轴
            // type: 'category', //类目轴
            type: 'value', //类目轴
            // data: xArrData
        },
        yAxis: {//直角坐标系中的y轴
            // type: 'value', //数值轴
            type: 'category', //数值轴
            data: xArrData
        },
        series: [ // 系列列表。每一个系列通过type决定自己的图标类型
            {
                name: '语文',
                type: 'bar', //图标的类型
                markPoint: { //最大值
                    data: [
                        {
                            type: 'max',
                            name: '最大值'
                        },
                        {
                            type: 'min',
                            name: '最小值'
                        }
                    ]
                },
                markLine: {// 最小值
                    data: [
                        {
                            type: 'average',
                            name: '平均值'
                        }
                    ]
                },
                label: { //数值的位置展示
                    show: true,
                    rotate: 60,
                    // position:'inside'
                    position: 'bottom'
                },
                barWidth: '30%', //柱的宽度
                data: yArrData
            }
        ]
    }

    //5。将配置项设置给echarts实例对象
    mCharts.setOption(option);


    var btnModify = document.querySelector('#modify');
    btnModify.onclick = function () {
        debugger
        var newYdataArr = [37, 50, 63, 12, 30, 20, 50, 10];
        //4。准备配置项
        //新的option可以设置多次，新的option和旧的option，并不是相互覆盖的，是一个相互整合的关系。
        //设置新的option的时候，只需要考虑到变化的部分就可以了
        var option = {
            series: [ // 系列列表。每一个系列通过type决定自己的图标类型
                {

                    data: newYdataArr
                }
            ]
        }

        //5。将配置项设置给echarts实例对象
        mCharts.setOption(option);
    }

    var btnModify = document.querySelector('#add');
    btnModify.onclick = function () {
        xArrData.push('小明');
       yArrData.push('90');

       var option={
           xAxis: {
               data:xArrData
           },
           series:[{
               data:yArrData
           }]
       };
       mCharts.setOption(option);
    }
</script>
</body>
</html>
posted @ 2022-08-10 01:10  King-DA  阅读(346)  评论(0)    收藏  举报