1.1.动画的使用
1.1.1.加载动画
ECharts 已经内置好了加载数据的动画, 我们只需要在合适的时机显示或者隐藏即可
- 显示加载动画
- 隐藏加载动画
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 ( ' 图例选择发生了改变 ...' )
})
- echartsInstance.dispatchAction
主动触发某些行为 , 使用代码模拟用户的行为
- echartsInstance.clear
清空当前实例,会移除实例中所有的组件和图表
清空之后可以再次 setOption
- echartsInstance.dispose
销毁实例
销毁后实例无法再被使用