ECharts动画使用
2024-04-10 02:49:20
动画使用
- 加载动画
- 增量动画
- 动画的配置
加载动画
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>散点图</title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/lib/echarts.min.js" type="text/javascript" charset="utf-8"></script><script src="js/lib/jquery.min.js"></script></head><body><div style="padding-left: 20px;width: 600px;height: 600px;"></div><script>var mCharts = echarts.init(document.querySelector('div'))//打开加载动画mCharts.showLoading();$.get('data/test_data.json',function(ret){//隐藏加载动画mCharts.hideLoading();var axisData = []for( var i=0;i<ret.length;i++) {var height = ret[i].heightvar weight = ret[i].weightvar newArr = [height, weight]axisData.push(newArr)}var option = {xAxis:{type:'value',//脱离0值的束缚scale:true,},yAxis:{type:'value',//脱离0值的束缚scale:true,},series:[{data: axisData,type:'effectScatter', // Scatter散点图//控制涟漪动画的时机showEffectOn:'emphasis', //render emphasis//涟漪动画的大小rippleEffect:{scale:10},//动态控制散点大小symbolSize:function(arg){console.log(arg);var height = arg[0]/100;var weight = arg[1];if(weight/(height*height) > 28){return 20}return 5},//动态控制散点的颜色itemStyle:{// color:'green'color:function(arg){var height = arg.data[0]/100;var weight = arg.data[1];if(weight/(height*height) > 28){return 'red'}return 'green'}}}]}mCharts.setOption(option);window.onresize = mCharts.resize;})</script></body>
</html>增量动画
- 所有的更新都通过setOption实现
- 不用考虑数据哪产生了变化
- Echarts会找到两组数据之间的差异然后通过合适的东爱护去表现数据的变化
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>增量动画</title><script src="js/lib/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body><div id="main" style="width: 600px;height:400px;"></div><button id="modify">修改数据</button><button id="add">增加数据</button><script type="text/javascript">var myChart = echarts.init(document.querySelector('div'));var xDataArr = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];var yDataArr = [5, 20, 36, 10, 10, 20];var option = {xAxis: {type:'category',data: xDataArr},yAxis: { type:'value',},series: [{name: '销量',type: 'bar',data: yDataArr,}]};myChart.setOption(option);//修改数据var btnModify = document.querySelector('#modify')btnModify.onclick = function(){var newYDataArr = [100, 2000, 36, 10, 10, 20];//只用包含变化之后的数据就行了//新旧的option是一个整合的关系不是覆盖的关系var option = {series: [{data: newYDataArr,}]};myChart.setOption(option);}//增加数据var btnAdd = document.querySelector('#add')btnAdd.onclick = function(){xDataArr.push("nike鞋");yDataArr.push(100);var option = {xAxis: {data: xDataArr},series: [{data: yDataArr,}]};myChart.setOption(option);}</script>
</body>
</html>
动画的配置
- 开启动画
- 动画时长
- 缓动动画效果
- 缓动动画数目设定
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>增量动画</title><script src="js/lib/echarts.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">var myChart = echarts.init(document.querySelector('div'));var xDataArr = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];var yDataArr = [5, 20, 36, 10, 10, 20];var option = {//控制动画开启或者关闭animation:true,//动画时长 还可以接受回调函数animationDuration:7000,animationDuration : function(arg) {//总共三部分有动画 分别从0序号开始//柱子 最大值 最小值 平均值console.log(arg);return 2000 * arg},//缓动动画//linear 比较均匀 bounceOut 带有回弹效果animationEasing:'bounceOut',//单中元素超过这个设定值之后动画就会丢失animationThreshold:7,xAxis: {type:'category',data: xDataArr},yAxis: { type:'value',},series: [{name: '销量',type: 'bar',data: yDataArr,}]};myChart.setOption(option);</script>
</body>
</html>
ECharts动画使用相关推荐
- VUE 中渲染Echarts 动画 柱状图
VUE 中渲染Echarts 动画 柱状图 效果图: 安装Echarts依赖 要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echart ...
- Echarts 动画效果
最近因为公司业务需求,需要实现,当Echarts重新加载数据时,实现动态效果, 比如,折线图初始化时动画效果,仪表盘从0 到value值的动画效果等等: 但是在实际使用时,遇到一点点问题. 前期基础代 ...
- echart自定义动画_很炫的echarts动画
技术文档 主体内容:可以认为是页面最想表达的内容总和.对于内容详情页来说,主体内容指从标题开始至正文内容结束,翻页区域也被视为主体内容,文章后的评论.分享.推荐等不视为主体内容. 首屏:用户点击搜索结 ...
- 如何设计出完美的动画技术架构
动画在前端领域中的作用是提升用户体验.吸引用户注意力.在互联网行业中,它也是一个永久的热点话题.一般在电商平台或者娱乐类项目(快手.拼多多.淘宝.腾讯视频.抖音等)中会出现很多的动画场景. 那么通过本 ...
- Java生成word通报（使用echart、poi-tl、PhantomJS）
Java生成word通报(使用echart.poi-tl.PhantomJS) 前段时间客户需要系统自动生成服务通报,word文档中要有图片.表格.文字.第一次做这种通报,项目经理又想用以前的方式,只 ...
- axios vue 加载效果动画_在vue中通过axios异步使用echarts
现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中 ...
- echarts定时加载动画数据
首先看看效果: 接下在看看代码: <!DOCTYPE html> <html> <head><meta charset="utf-8"&g ...
- html5 地图效果,html5 echarts图表插件炫光的分布地图动画特效
特效描述:图表插件 炫光的动画 分布地图动画 动画特效.html5地图动画,html5 echarts图表插件 代码结构 1. 引入JS 2. HTML代码 ECharts $('#documen ...
- html5基于Echarts制作3D炫酷世界地图地球制作，地图勾起动画，非常炫酷。
❉ html5基于echarts.js制作3D炫酷世界地图地球仪动画 `html5基于echarts.js制作3D炫酷世界地图地球仪动画,业务迁移热点显示动画,地图勾起动画,非常炫酷.ps:涉及跨域, ...
最新文章
- 软件测试人员必备Linux命令（初、中、高级）
- mockito_Mockito 101
- Ubuntu 下载安装删除方式(自己常用,保持更新)
- 计算机的收获初一作文,初一关于收获的作文
- react- native 入门
- [转载] java synchronized静态同步方法与非静态同步方法，同步语句块
- 编程语言对比 内存操作
- Android 布局管理器 之 TableLayout
- bzoj 4129 Haruna’s Breakfast 树上莫队
- 学习笔记之15道简单算法题
- jdk1.8 新特性(中英文)及中文版帮助文档
- “缺少winload.efi”的解决办法“：Windows Boot Manager更改读取启动信息路径
- 『搬运』分享一些国内外的专利搜索网站
- 决定局域网特性的三要素
- 《三国演义》与“项目管理”——从诸葛亮舌战群儒看商务谈判
- linux -unrar解压缩
- 农业物联网发展有哪些问题
- 基于分治和DP的算法设计
- html游戏让目标人物移动,用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动...
- Racket编程指南——20 并行