ECharts高级动画的使用交互API

Posted 2022-12-21 黑马程序员官方

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ECharts高级动画的使用交互API相关的知识，希望对你有一定的参考价值。

1.1.动画的使用

1.1.1.加载动画

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

显示加载动画

mCharts.showLoading()
一般, 我们会在获取图表数据之前 显示加载动画

隐藏加载动画

mCharts.hideLoading()
一般, 我们会在获取图表数据之后 隐藏加载动画, 显示图表

1.1.2.增量动画

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

1.1.3.动画的配置

开启动画

animation: true

动画时长

animationDuration: 5000

缓动动画

animationEasing : 'bounceOut'

linear ,线性变化, 这样动画效果会很均匀

bounceOut ,这样动画效果会有一个回弹效果

缓动动画的可选值如下图:

动画阈值

animationThreshold: 8

单种形式的元素数量大于这个阈值时会关闭动画

1.2.交互API

1.2.1.全局echarts 对象

全局 echarts 对象是引入 echarts.js 文件之后就可以直接使用的

echarts.init

初始化 ECharts 实例对象使用主题

echarts.registerTheme

注册主题只有注册过的主题 , 才能在 init 方法中使用该主题

echarts.registerMap

echarts.connect

一个页面中可以有多个独立的图表
每一个图表对应一个 ECharts 实例对象
connect 可以实现多图关联，传入联动目标为 EChart 实例，支持数组

这样 , 由于我们打开了 toolbox 中的 saveAsImage, 所以会出现下载图片的按钮 . 而通过 echarts.connect([mCharts, mCharts2]) , 此时点击下载图片按钮 , 保存下来的图片就是两个图表的图片了 .

1.2.2. echartsInstance 对象

eChartsInstance 对象是通过 echarts.init 方法调用之后得到的

echartsInstance.setOption

设置或修改图表实例的配置项以及数据
多次调用 setOption 方法合并新的配置和旧的配置增量动画

echartsInstance.resize

重新计算和绘制图表一般和 window 对象的 resize 事件结合使用 window . onresize = function () myChart . resize ();

echartsInstance.on `echartsInstance.of`

绑定或者解绑事件处理函数

鼠标事件

ECharts 事件

常见事件 : legendselectchanged 、 'datazoom' 、 'pieselectchanged' 、 'mapselectchanged' 等事件参数 arg : 和事件相关的数据信息 mCharts . on ( 'legendselectchanged' , function ( arg ) console . log ( arg ) console . log ( ' 图例选择发生了改变 ...' ) )