关键词：
1.加载动画
ECharts已经内置好了加载数据的动画，我们只需要在合适的时机显示或隐藏即可
显示加载动画：mCharts.showLoading()
隐藏加载动画：mCharts.hideLoading()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
<script src="lib/jquery-3.6.0.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'))
mCharts.showLoading(); //显示加载动画
$.get('data/test_data.json', function(data)
mCharts.hideLoading(); //隐藏加载动画
var axisData = []
for (var i=0;i<data.length;i++)
var height = data[i].height
var weight = data[i].weight
var newArr = [height, weight]
axisData.push(newArr)
var option =
xAxis:
type: 'value',
scale: true
,
yAxis:
type: 'value',
scale: true
,
series: [
name: '身高和体重',
type: 'effectScatter',
showEffectOn: 'emphasis',
rippleEffect:
scale: 8
,
data: axisData
,
]
mCharts.setOption(option)
)
</script>
</body>
</html>data/test_data.json
[ "gender": "female", "height": 177.1, "weight": 69.6 ,
...
"gender": "female", "height": 174.1, "weight": 53.7 ]为了放缓数据的获取速度，从而看到加载动画，可在Network中设置一下
加载动画如图
2.增量动画
图表已经展示出来，但是数据又发生变动，这样引起的动画叫增量动画。
用setOption方法来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<button id='modify'>修改数据</button>
<button id='add'>添加数据</button>
<script>
var mCharts = echarts.init(document.querySelector('div'))
var xDataArr = ['张三', '李四', '王五', '钱七', '孙八', '赵九']
var yDataArr = [88, 45, 48, 89, 99, 77]
var option =
xAxis:
type: 'category',
data: xDataArr
,
yAxis:
type: 'value',
,
series: [
name: '语文',
type: 'bar',
barWidth: '50%',
data: yDataArr,
label:
show: true,
rotate: 30,
position: 'inside'
]
mCharts.setOption(option)
var btnModify = document.querySelector('#modify');
btnModify.onclick = function()
var newDataArr = [69, 95, 18, 89, 99, 77]
// setOption可以设置多次
// 新的option和旧的option的关系并不是相互覆盖的关系，而是相互整合的关系
// 我们在设置新的option的时候，只需要考虑到变化的部分就行
var option =
series: [
data: newDataArr
]
mCharts.setOption(option)
var btnAdd = document.querySelector('#add')
btnAdd.onclick = function()
xDataArr.push('小明')
yDataArr.push(96)
var option =
xAxis:
data: xDataArr
,
series: [
data: yDataArr
]
mCharts.setOption(option)
</script>
</body>
</html>原图
点击“修改数据” 按钮之后
点击“添加数据” 按钮之后
3.动画的配置项
开启动画
animation:true
动画时长
animationDuration:5000
缓动动画
animationEasing:'bounceOut'，其它参数可查看官网
动画阈值
animationThreshold:8
单个系列显示的图形数量大于这个阈值时会关闭动画
var option =
animation: true, //控制动画是否开启
animationDuration: 5000, //控制动画的时长
animationEasing: 'bounceOut', //缓动动画
animationThreshold: 7, //动画元素的阈值
... //原代码不变
echarts高级动画的使用交互api(代码片段)
1.1.动画的使用1.1.1.加载动画ECharts已经内置好了加载数据的动画,我们只需要在合适的时机显示或者隐藏即可显示加载动画mCharts.showLoading()一般,我们会在获取图表数据之前显示加载动画 隐藏加载动画mCharts.hideLoading()一般,我们会... 查看详情
36-vue之echarts高级-动画的使用(代码片段)
ECharts高级-动画的使用前言加载动画增量动画动画的配置前言本篇来学习下ECharts中动画的使用加载动画showLoading()：显示加载动画，一般在获取图表数据之前显示加载动画hideLoading()：隐藏加载动画，在获取图表数... 查看详情
可视化2d动画—cavas旋转的圈(代码片段)
1.1RotatingCircle介绍Cavas动画组件RotatingCircle是一个能够自定义颜色、半径、排序方式的圆形组件，具有2D动画效果，可以单独使用也可以与echarts结合。组件由五个圆形图组成，每个部分是独立的参数控制，可以自定... 查看详情
使用echarts画一个类似组织结构图的图表(代码片段)
...这种需求，自己用div+css也是可以实现的，但是没有什么动画效果，我的css3又很差劲，而且项目中已经使用到了折线图、饼状图、柱状图之类的图表，用的还是百度的echarts，所以这个组织结构图之类的需求也就用了百度的echarts... 查看详情
echarts使用记录翻页，事件(代码片段)
...个属性legend的type属性设置为scroll，然后animation可以控制动画，官方文档均可查。 再就是scrollDataIndex，就是默认从哪一项开始翻页。 然后有个问题就是虽然legend可以显示分页，但是series却没法跟随legend同步，而是全部显... 查看详情
echarts(代码片段)
...础折线图Echarts基础饼图异步数据的加载与动态更新loading动画ECharts基础图表ECharts基本柱状图柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的一种常用图表类型。设置柱状图的方式，是将series的type设为&... 查看详情
echarts学习(代码片段)
...说明，非常详细；ECharts兼容性好，基于HTML5，有着良好的动画渲染效果。 引入echarts<!DOCTYPEhtml><html><head><metacharset="utf-8"><!- 查看详情
echarts的使用(代码片段)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><scriptsrc="js/echarts.min.js"></script></head><body><!--为ECharts准备一个具备大小（宽 查看详情
使用echarts出现的一些问题......(代码片段)
CodeIsNeverDie!一、Echarts图表显示大小与屏幕之间的问题终极解决方案：window.onresize=myChart.resizeP1.页面中只有一个Echarts图<divid="echartFirst"></div>......varmyChart=echarts.init(document.ge 查看详情
echarts的基本使用(代码片段)
echarts的基本使用官网：http://echarts.baidu.com/index.htmlECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库ZR... 查看详情
echarts-k线图的使用(代码片段)
工作：使用Hbuilder建web工程，加入echarts相关库，根据需要更改K线图及其的提示样式，去除默认提示，使用异步加载echarts的数据，数据格式为json。 需要注意的K线图和5日均线，10日均线的意义，5日均值是根据前4天加上当天的... 查看详情
echarts的简单使用(代码片段)
...等几个图表，而且只显示图，连标题都是不显示的，一般使用的话下载普通就行。基本使用：在HTML里必须有一个固定宽高的容器，这样才能显示出来//指定图标的配置和数据varoption=title://标题t 查看详情
简单的echarts安装教程(代码片段)
echarts配置方式两种方式使用echarts两种方式使用echarts通过npm获取echarts，npminstallecharts--save引入echartsimport*asechartsfrom'echarts';//基于准备好的dom，初始化echarts实例varmyChart=echarts.init(document.get 查看详情
echarts地图使用经验-地图变形和添加数据(代码片段)
关于echart2,echart3地图的使用一点人生经验：1.echart3，echart2加载地图变形修复。最近在使用echart2使用过程中，发现加载海南地图会产生变形。如下图，海南地图产生了较大的变形，于是需要研究怎么才能消除变形。经过一番折腾... 查看详情
echart使用的自我总结(代码片段)
1.echart下载你可以通过以下几种方式获取ECharts。从ApacheECharts(incubating)官网下载界面获取官方源码包后构建。在ECharts的GitHub获取。通过jsDelivr等CDN引入我是从官网下载的2.中国地图的引入我们结对作业是引入的中国地图，所以用中... 查看详情
echarts的使用步骤(代码片段)
效果代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale 查看详情
echarts的简单使用(代码片段)
...就想到了ECharts这个js渲染，然后网上查了查简单的ECarts的使用，就有了以下的东西。因为是在项目里加入的一个展示界面，所以我还用到了bootstrap.css的样式，想了解bootstrap的可以去官网简单了解<!DOCTYPEhtml><html><head>... 查看详情
vue使用vue-echarts图表(代码片段)
...能一样的只是把它封装成vue插件这样更方便以vue的方式去使用它。echarts就是普通的js库，vue-echarts特征：轻量，高效，按需绑定事件支持按需导入ECharts.js图表?? 查看详情