37-Vue之ECharts高级-动画的使用

爱学习de测试小白

已于 2024-03-17 11:34:46 修改

阅读量2.1k

点赞数

分类专栏： # Vue 文章标签： echarts vue.js javascript

于 2022-12-22 15:17:14 首次发布

-- 来着爱学习de测试小白

本文链接：https://blog.csdn.net/IT_heima/article/details/128407812

版权

Vue 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

ECharts高级-动画的使用

前言

本篇来学习下ECharts中动画的使用

加载动画

showLoading() ：显示加载动画，一般在获取图表数据之前显示加载动画
hideLoading()：隐藏加载动画，在获取图表数据之后隐藏加载动画, 显示图表

仅做使用示例，未试出动画效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECharts高级-加载动画</title>
    <!-- cdn方式 引入echarts.js文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>

<body>

<div id='app' style="width: 600px;height: 400px"></div>
<script>

    var sleep = function (time) {
        var timeOut = new Date().getTime() + parseInt(time, 10);
        while (new Date().getTime() <= timeOut) {
        }
    }

    var myCharts = echarts.init(document.getElementById('app'))

    myCharts.showLoading()  // 获取数据前显示加载动画
    sleep(8000)  // 单位ms  模拟接口响应时长

    var xDataArr = ['张三', '李四', '王五', '大明白', '小糊涂'] // x轴数据
    myCharts.hideLoading()  // 获取数据后隐藏加载动画

    var yDataArr = [88, 92, 63, 77, 94]  // y轴数据
    var option = {
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '分数',
                type: 'bar',  // 图表类型  bar:柱状图   line:折线图   pie:饼图
                data: yDataArr,
                markPoint: {   // 标记最大最小值
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                },
                label: {
                    show: true,  // 柱状图显示数值
                    rotate: 30, // 值旋转角度
                },
                barWidth: '30%' // 柱的宽度
            }
        ]
    }
    // 将配置项设置给echarts实例对象
    myCharts.setOption(option)
</script>
</body>

</html>

增量动画

所有数据的更新都通过 setOption 实现, ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>ECharts高级-增量动画</title>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/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, 92, 63, 77, 94, 80]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          data: yDataArr,
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: {
            show: true,
            rotate: 60
          },
          barWidth: '30%'
        }
      ]
    }
    mCharts.setOption(option)

    var btnModify = document.querySelector('#modify')
    btnModify.onclick = function () {
      var newYDataArr = [68, 32, 99, 77, 94, 80]
      // setOption 可以设置多次
      // 新的option 和 旧的option
      // 新旧option的关系并不是相互覆盖的关系, 是相互整合的关系
      // 我们在设置新的option的时候, 只需要考虑到变化的部分就可以
      var option = {
        series: [
          {
            data: newYDataArr
          }
        ]
      }
      mCharts.setOption(option)
    }
    var btnAdd = document.querySelector('#add')
    btnAdd.onclick = function(){
      xDataArr.push('小白')
      yDataArr.push(99)
      var option = {
        xAxis: {
          data: xDataArr
        },
        series: [
          {
            data: yDataArr
          }
        ]
      }
      mCharts.setOption(option)
    }
  </script>
</body>

</html>

动画的配置

开启动画
- animation: true
动画时长
- animationDuration: 5000
缓动动画
- animationEasing : ‘bounceOut’ （linear:线性变化 bounceOut: 线性变化）
动画阈值：单种形式的元素数量(通俗说柱状图柱子数)大于这个阈值时会关闭动画
- animationThreshold: 5

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>EChart高级-动画配置</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
</head>

<body>

<div id='app' style="width: 600px;height: 400px"></div>
<script>
    // 初始化echarts实例对象
    var myCharts = echarts.init(document.getElementById('app'))
    // 准备数据 将type的值设置为bar
    var xDataArr = ['张三', '李四', '王五', '大明白', '小糊涂'] // x轴数据
    var yDataArr = [88, 92, 63, 77, 94]  // y轴数据
    var option = {
        animation: true,  // 控制动画是否开启,模认true
        // animationDuration: 5000, // 动画的时长, 以毫秒为单位
        animationDuration: function (arg) {
            console.log(arg)
            return 2000 * arg   // 不同值得到不同的动画时长
        },
        animationEasing: 'bounceOut', // 缓动动画，linear:线性变化  bounceOut: 线性变化
        animationThreshold: 5, // 动画元素的阈值,
        xAxis: {
            type: 'category',
            data: xDataArr
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '分数',
                type: 'bar',  // 图表类型  bar:柱状图   line:折线图   pie:饼图
                data: yDataArr,
                markPoint: {   // 标记最大最小值
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {
                            type: 'average', name: '平均值'
                        }
                    ]
                },
                label: {
                    show: true,  // 柱状图显示数值
                    rotate: 30, // 值旋转角度
                },
                barWidth: '30%' // 柱的宽度
            }
        ]
    }
    // 将配置项设置给echarts实例对象
    myCharts.setOption(option)
</script>
</body>

</html>