Echarts的一些动画配置

<template>
<div> 
    <h1>动画配置</h1>
    <div id="canvas7" style="width: 1000px;height:400px;"></div>
</div>

</template>

<script>
export default {
    data() {
        return {
        }
    },
    mounted() {
        //柱状图：
        var mcharts = this.$echarts.init(document.getElementById('canvas7'))
        let xDataArr = ['张三', '李四', '王五', '小明', '小米', '大锤']
        let yDataArr = [10, 20, 30, 40, 50, 60]
        let option = {
            // animation:false,//控制动画，默认为true开启动画
            animationDuration:5000,//控制动画时长,他也可以接收一个回调函数
            //例子： animationDuration:function(arr){//arr:参数代表图表的每一项，显示平均线再是最大和最小值，然后再是数据
            //    return 2000 * arr
           // },
           animationEasing:'linear',//缓动动画有很多个参数：linear（均衡），bounceOut(有回弹效果)等，详情可以查看官方文档
           animationThreshold:7,//动画的阈值，单种形式的元素数量大于这个阈值时会关闭动画
           xAxis: {
                // type: 'value',//设置从左向右
                type: 'category',//默认从上到下
                data: xDataArr,
            },
            yAxis: {
                // type: 'category',//设置从左向右
                // data: xDataArr,
                type: 'value',//默认从上到下
            },
            grid: {//为直角坐标系内绘图网格
                // left: "3%",
                // right: "4%",
                // bottom: "3%",
                // width:800,
                // height:400,
                // show:true,
                // containLabel: true,//是否包含坐标轴刻度标签
            },
            toolbox: {//提供了工具栏：导出图片，数据视图，动态类型切换，数据区域缩放，重置
                //都是不用写东西的，除了最后一个图表切换
                feature: {//对图表的扩展设置
                    magicType: {//可以在不同的图表之间来进行切换
                        type: ['bar', 'line'],//图表的类型，柱状图或折线图,可以写多个不同的图表
                    },
                    saveAsImage: {},//可以将图表变成图片并导出
                    dataView: {},//将图表变成视图，并且可以直接修改里面的数据
                    restore: {},//重置按钮，将所有数据回复原状
                    dataZoom: {},//可以对区域进行缩放

                }
            },
            series: [
            {
                name: '语文',
                type: 'bar',
                markPoint: {//设置最大值和最小值
                    data: [
                        // {type:'max',name:'最大值'},{type:'min',name:'最小值'}
                    ],
                },
                markLine: {//设置平均值
                    data: [
                        {type:'average',name:'平均值'}
                    ]
                },
                markArea: {//标注区间,适用于折线图
                    data: [
                        // [{xAxis:'张三'},{xAxis:'王五'}],//标注的范围,开始,结束
                        // [{xAxis:'小明'},{xAxis:'小米'}],
                    ]
                },

                label: {//对每条数据的显示设置
                    show: true,//显示每一条的数据
                    rotate: 60,//显示数据文字倾斜角度
                    position: 'top',//标签的位置，通过相对的百分比或像素值表示，例：[x,y],或[10,20],[50% ,50%],也可以inside（默认），top(顶部)等
                },
                barWidth: '30%',//设置每条数据的宽度
                data: yDataArr,
                itemStyle: {
                    color: {
                        type: 'linear',//线性渐变
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            //只能从0到1
                            {
                                offset: 0, color: 'red',//颜色为0时是红色，也可以设置百分比和小数
                            },
                            {
                                offset: 1, color: 'blue',//颜色为1时是蓝色，也可以设置百分比
                            },
                           
                        ]
                    }
                }
            },

            ],
        }
        mcharts.setOption(option)
        /**
         * 通用配置：
         * 1、title:{
         *      //控制标题的样式
         *      textStyle:{color:'red',},设置标题的样式
         *      //控制标题的边框
         *      borderWidth:5,//设置标题的边框
         *      borderColor:'red',//边框颜色
         *      borderRadius:3,//边框圆角
         *      //控制标题的位置
         *      left:30,//也可以right
         *      top:30,//也可以buttom
         * },
         * 2、tooltip:{//提示框
         *      trigger:'item',//也可以axis(只要在轴上提示框就出来)，item(范围)
         *      triggerOn:'click',//点击后提示框出来，默认（mouseover 鼠标进入）
         *      formatter:`{a}`,可以写文字或其他符号{b}',//可以是字符串或函数，{a}{b}{c}{d}等，不同的图标代表的意义是不同的，函数例子：
         *      formatter:function(arr){
         *          return arr[0].name + '的分数是' + arr[0].data
         *      },
         *      //也可以设置提示框的样式
         *      backgroundColor: "rgba(0,0,0,0.3)",
         *      borderColor: "rgba(0,0,0,0)",
         *      textStyle: {
         *          color: "#fff"
         *      },
         * }
         * 3、toolbox:{//提供了工具栏：导出图片，数据视图，动态类型切换，数据区域缩放，重置
         *      //都是不用写东西的，除了最后一个图表切换
         *      feature:{//对图表的扩展设置
         *          saveAsImage:{},//可以将图表变成图片并导出
         *          dataView:{},//将图表变成视图，并且可以直接修改里面的数据
         *          restore:{},重置按钮，将所有数据回复原状
         *          dataZoom:{},可以对区域进行缩放
         *          magicType:{//可以在不同的图表之间来进行切换
         *              type:['bar','line'],//图表的类型，柱状图或折线图,可以写多个不同的图表
         *          }
         *      }
         * }
         * 4、legend:图例，用于筛选系列，需要配合series使用
         *      series:[//可以写多条数据
         *         {
         *              name:'语文',
         *              type:'bar',
         *              data:[],
         *          },
         *          {
         *              name:'数学',
         *              type:'bar',
         *              data:[],
         *          },
         *      ],
         *      legend:{//可以筛选每一组数据，语文或数学
         *          data:['语文','数学'],//和series里面的name是对应的
         *      }
         */
    }
}
</script>

<style scoped>
#canvas7 {
    margin-top: 50px;
}
</style>