ECharts高级动画的使用、交互API

黑马程序员官方

企业官方账号

2023-02-15 18:32:43

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('图例选择发生了改变...')

})