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

1. 一个页面中可以有多个独立的图表
2. 每一个图表对应一个 ECharts 实例对象
3. 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('图例选择发生了改变...')

})

• echartsInstance.dispatchAction

主动触发某些行为, 使用代码模拟用户的行为

 

• echartsInstance.clear

        清空当前实例，会移除实例中所有的组件和图表

        清空之后可以再次 setOption

• echartsInstance.dispose

        销毁实例

        销毁后实例无法再被使用
 

 往期文章：

• 数据可视化你了解多少？
• ECharts的基本使用
• ECharts常用图表  折线图
• ECharts常用图表  散点图
• ECharts常用图表 饼图
• ECharts常用图表 地图
• ECharts常用图表 雷达图、仪表盘图
• ECharts高级 显示相关

---

 黑马前端专栏干货多多，关注再学，好方便~

2023年前端学习路线图：课程、源码、笔记，技术栈另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~