关键词：
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 ( ' 图例选择发生了改变 ...' ) )
- echartsInstance.dispatchAction
- echartsInstance.clear
清空当前实例，会移除实例中所有的组件和图表
清空之后可以再次 setOption
- echartsInstance.dispose
销毁实例
销毁后实例无法再被使用
往期文章：
- 数据可视化你了解多少？
- ECharts的基本使用
- ECharts常用图表 折线图
- ECharts常用图表 散点图
- ECharts常用图表 饼图
- ECharts常用图表 地图
- ECharts常用图表 雷达图、仪表盘图
- ECharts高级 显示相关
黑马前端专栏干货多多，关注再学，好方便~
2022年前端学习路线图：课程、源码、笔记，技术栈 另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我喔~
37-vue之echarts高级-交互api(代码片段)
交互API前言全局ECharts对象echartsInstance对象前言本篇来学习下ECharts中交互API的使用全局ECharts对象全局echarts对象是引入echarts.js文件之后就可以直接使用的init：初始化ECharts实例对象，使用主题registerTheme：注册主题echarts... 查看详情
36-vue之echarts高级-动画的使用(代码片段)
ECharts高级-动画的使用前言加载动画增量动画动画的配置前言本篇来学习下ECharts中动画的使用加载动画showLoading()：显示加载动画，一般在获取图表数据之前显示加载动画hideLoading()：隐藏加载动画，在获取图表数... 查看详情
36-vue之echarts高级-动画的使用(代码片段)
ECharts高级-动画的使用前言加载动画增量动画动画的配置前言本篇来学习下ECharts中动画的使用加载动画showLoading()：显示加载动画，一般在获取图表数据之前显示加载动画hideLoading()：隐藏加载动画，在获取图表数... 查看详情
交互api（echarts对象和echartsinstance对象）(代码片段)
目录1.全局echarts对象引入echarts.js文件之后就可以使用init方法初始化ECharts实例对象使用主题 registerTheme方法注册主题只有注册过的主题，才能在init方法中使用该主题registerMap方法注册地图数据$.get('json/map/china.json',functio... 查看详情
动画的使用(echarts)(代码片段)
目录1.加载动画ECharts已经内置好了加载数据的动画，我们只需要在合适的时机显示或隐藏即可显示加载动画：mCharts.showLoading()隐藏加载动画：mCharts.hideLoading()<!DOCTYPEhtml><htmllang="en"><head><metacha 查看详情
echarts的高级使用(样式自适应)(代码片段)
目录1.样式1.1直接样式itemStyle、textStyle、lineStyle(折线图)、areaStyle(雷达图)、label<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv=" 查看详情
echarts学习(代码片段)
ECharts，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上认识ECharts ECharts，缩写来自EnterpriseCharts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯Javascript的图表库，能够在PC端和移动设备上流畅运... 查看详情
这样做动画交互，一点都不费力！(代码片段)
...导语：Lottie是Airbnb开源的一个面向iOS、Android、ReactNative的动画库，可实现非常复杂的动画，使用也及其简单，极大释放人力，值得一试。一、简介Lottie是Airbnb开源的一个面向iOS、Android、ReactNative的动画库，能分析AdobeAfterEffects导... 查看详情
echarts的高级使用(主题调色板颜色渐变)(代码片段)
目录1.主题1.1内置的主题init方法有两个参数，第一个参数代表的是一个dom节点，第二个参数代表你需要使用哪一套主题默认内置了两套主题，light、dark<!DOCTYPEhtml><htmllang="en"><head><metacharset=&#... 查看详情
高级动画(代码片段)
原文:高级动画1、动态变换。变换提供了自定义元素的最强大方式之一。每个元素都能以两种不同的方式使用变换，RenderTransform属性和LayoutTransform属性。RenderTransform属性效率更高。因为是在布局之后应用变换，并且用于变换最终... 查看详情
html打造动画交互界面(代码片段)
使用方式1使用svg2png图片3css3动画4使用webgl5canvas6使用glsl发现很多东西本身html里面已经有了，关键是要熟悉和使用。现在先做基本的东西，等基本的创造好了，就可以打造科技界面了。读者请耐心等待1svg圆<svgwidth... 查看详情
swiftui之深入解析高级动画的animatablemodifier使用(代码片段)
一、前言在我之前的SwiftUI之深入解析高级动画的路径Paths和SwiftUI之深入解析高级动画的几何效果GeometryEffect两篇博客中，已经对Animatable协议使用做详细的分析，本文将分析AnimatableModifier，使用它可以完成更多的动画... 查看详情
25-vue之echarts-基本使用(代码片段)
ECharts-基本使用前言ECharts介绍ECharts快速上手ECharts配置说明前言本篇开始来学习下开源可视化库EChartsECharts介绍ECharts是百度公司开源的一个使用JavaScript实现的开源可视化库，兼容性强，底层依赖矢量图形库ZRender，提... 查看详情
reactnative动画（animated）(代码片段)
一、前言对于一个移动应用APP，其中的动画交互能够给用户带来很好的体验，所以动画在移动应用开发过程中是非常重要的;二、ReactNative中实现动画的方式-不断修改state-AnimatedAPI首先如果不使用任何动画API，那想到的... 查看详情
echarts的基本使用(代码片段)
echarts的基本使用官网：http://echarts.baidu.com/index.htmlECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库ZR... 查看详情
如何使用css创建高级动画，这个函数必须掌握(代码片段)
微信搜索【大迁世界】,我会第一时间和你分享前端行业趋势，学习途径等等。本文GitHubhttps://github.com/qq449245884/xiaozhi已收录，有一线大厂面试完整考点、资料以及我的系列文章。我们每天都在网上摸鱼，作为前端开发... 查看详情
qt+echarts开发笔记：echarts的动态排序柱状图介绍基础使用和qt封装demo(代码片段)
前言 上一篇的demo使用隐藏js代码的方式，实现了一个饼图的基本交互方式，并预留了Qt模块对外的基础接口。 本篇的demo实现了自动排序的柱状图，实现了一个自动排序柱状图的基本交互方式，即Qt调用js脚本操作html。 ... 查看详情
echarts(代码片段)
官方网站：https://www.echartsjs.com/index.html ECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRend... 查看详情