动画的使用(ECharts)

最新推荐文章于 2024-09-11 09:55:41 发布

漂流の少年

最新推荐文章于 2024-09-11 09:55:41 发布

阅读量1.5k

点赞数 2

分类专栏： ECharts 文章标签： echarts 动画 javascript

本文链接：https://blog.csdn.net/YINZHE__/article/details/120399125

版权

ECharts 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

1.加载动画

ECharts已经内置好了加载数据的动画，我们只需要在合适的时机显示或隐藏即可

显示加载动画：mCharts.showLoading()

隐藏加载动画：mCharts.hideLoading()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
  <script src="lib/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px;"></div>
  <script>  
      var mCharts = echarts.init(document.querySelector('div'))
      mCharts.showLoading();      //显示加载动画
      $.get('data/test_data.json', function(data){
        mCharts.hideLoading();    //隐藏加载动画
        var axisData = []
        for (var i=0;i<data.length;i++) {
          var height = data[i].height
          var weight = data[i].weight
          var newArr = [height, weight]
          axisData.push(newArr)
        }
        var option = {
          xAxis: {
              type: 'value',
              scale: true
          },
          yAxis: {
              type: 'value',
              scale: true
          },
          series: [
            {
              name: '身高和体重',
              type: 'effectScatter',
              showEffectOn: 'emphasis',
              rippleEffect: {
                scale: 8
              },
              data: axisData
            },
          ]
        }
        mCharts.setOption(option)
      }) 
  </script>
</body>
</html>

data/test_data.json

[{ "gender": "female", "height": 177.1, "weight": 69.6 }, 
  ...
  { "gender": "female", "height": 174.1, "weight": 53.7 } ]

为了放缓数据的获取速度，从而看到加载动画，可在Network中设置一下

加载动画如图

2.增量动画

图表已经展示出来，但是数据又发生变动，这样引起的动画叫增量动画。

用setOption方法来实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px;"></div>
  <button id='modify'>修改数据</button>
  <button id='add'>添加数据</button>
  <script>
      var mCharts = echarts.init(document.querySelector('div'))
      var xDataArr = ['张三', '李四', '王五', '钱七', '孙八', '赵九']
      var yDataArr = [88, 45, 48, 89, 99, 77]
      var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value',
        },
        series: [{
            name: '语文',
            type: 'bar',
            barWidth: '50%',
            data: yDataArr,
            label: {
              show: true,
              rotate: 30,
              position: 'inside'
            }
        }]
      }
      mCharts.setOption(option)
      
      var btnModify = document.querySelector('#modify');
      btnModify.onclick = function() {
        var newDataArr = [69, 95, 18, 89, 99, 77]
        // setOption可以设置多次
        // 新的option和旧的option的关系并不是相互覆盖的关系，而是相互整合的关系
        // 我们在设置新的option的时候，只需要考虑到变化的部分就行
        var option = {
          series: [
            {
              data: newDataArr
            }
          ]
        }
        mCharts.setOption(option)
      }
      var btnAdd = document.querySelector('#add')
      btnAdd.onclick = function() {
        xDataArr.push('小明')
        yDataArr.push(96)
        var option = {
          xAxis: {
            data: xDataArr
          },
          series: [
            {
              data: yDataArr
            }
          ]
        }
        mCharts.setOption(option)
      }
  </script>
</body>
</html>

原图

点击“修改数据” 按钮之后

点击“添加数据” 按钮之后

3.动画的配置项

开启动画

animation:true

动画时长

animationDuration:5000

缓动动画

animationEasing:'bounceOut'，其它参数可查看官网

动画阈值

animationThreshold:8

单个系列显示的图形数量大于这个阈值时会关闭动画

 var option = {
        animation: true,              //控制动画是否开启
        animationDuration: 5000,      //控制动画的时长
        animationEasing: 'bounceOut', //缓动动画
        animationThreshold: 7,        //动画元素的阈值
        ...        //原代码不变
      }