echarts 动态数据动画效果

在做项目时，当我们用到echarts图表时，大部分产品经理都会要求我们给图表加上一些动画效果，让页面看起来更加炫酷。其实给图表加上动画效果不难，如果数据是实时数据这样做动画效果会更简单点，就怕数据不是实时数据还非要加动画。
接下来我说下echarts 数据动画效果，还是老规矩，先看下效果图

这是个柱形图，我就截图放上来，大家将就的看下哈，想看实际效果可以把下面的代码复制到本地页面上去，自己运行下。接下来就是代码了。

var dom = document.getElementById("p_columnar");var myChart = echarts.init(dom);var app = {};var option;option = {grid: {top: '18%',right: '2%',bottom: '18%',left: '10%'},xAxis: {type: 'category',//boundaryGap: false,//去除图表四周留白axisTick: { //x轴刻度show: false},axisLine: { //x轴线条颜色show: true,lineStyle: {color: '#374186',width: 0.5}},axisLabel: {show: true,rotate: 40, //文字倾斜度textStyle: {color: '#b1bcff', //更改坐标轴文字颜色fontSize: 14 //更改坐标轴文字大小}},data: ['大乐透', '竞彩', '七星彩', '排3', '排5', '即开', '顶呱呱', '传足']},yAxis: {type: 'value',//interval: 100, //刻度值间隔值name: '万',nameTextStyle: {padding: [0, 30, 5, 0], // y轴name位置color: '#b1bcff', //更改单位文字颜色fontSize: 15 //更改单位文字大小},splitLine: { //网格线lineStyle: {//type: 'dashed', //设置网格线类型 dotted：虚线   solid:实线color: '#374186', //网格线颜色width: 0.5},},axisLabel: {show: true,textStyle: {color: '#b1bcff', //更改坐标轴文字颜色fontSize: 15 //更改坐标轴文字大小}},axisLine: {//y轴线条颜色show: false,},},animationDuration: 3000,series: [{barWidth: 20, //柱形宽度showBackground: false, //柱形背景色itemStyle: { //柱形渐变色normal: {//barBorderRadius: 6, //柱形圆角color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0,color: '#188df0'},{offset: 1,color: '#36d1dc'}]),},},label: { //显示当前柱形数值show: true,position: 'top',textStyle: {color: '#15d0dd', //更改坐标轴文字颜色fontSize: 15 //更改坐标轴文字大小}},data: [49, 71, 106, 129, 144, 176, 135, 148],type: 'bar'}]};var mychart1 = echarts.init(document.getElementById("p_columnar"));//模拟实时数据var data = [[23, 42, 53, 23, 42, 47, 112, 212],[29, 64, 56, 98, 75, 67, 172, 312],[43, 82, 80, 116, 95, 367, 192, 412],[61, 105, 165, 156, 155, 500, 220, 512],[123, 234, 533, 206, 405, 667, 362, 612],];//定时器setInterval(getItem, 2000);function getItem() {var random = data[parseInt(Math.random() * data.length)];option.series[0].data = random; //获取series的第一行数据，并将模拟的数据赋值给他mychart1.setOption(option); //重新加载图表};if (option && typeof option === 'object') {myChart.setOption(option);};

以上代码就是以柱形图为例做的数据动画效果，做个笔记记录下，欢迎大家点评。

echarts 动态数据动画效果相关推荐

Echarts 学习系列(3)-Echarts动态数据交互
写在前面上一小节,我们总结了折线(面积)图.柱状(条形)图.饼(圆环)图类型的图表. 但是,都是静态的.接下来的,这一小节,总结的是Echarts 动态数据的交换. 前置条件开发环境:win10 ...
QGIS 3.14|地震数据动画效果实战（二）动画设置篇
01 设置图层Temporal属性在QGIS 3.14中,图层的属性对话框首次加入了 Temporal标签页,提供图层的时间设置. 右键点击[图层]面板中的"quake2020" ...
html怎么自动导入数据并排序,JS实现table表格数据排序功能(可支持动态数据+分页效果)...
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需 ...
QGIS 3.14|地震数据动画效果实战（三）进度条设置
在之前的版本中,QGIS对时间的处理是通过Time Manager插件实现的,QGIS 3.14将Temporal Controller引入软件整体框架之中,以原生的方式支持各类数据集对时间维度的处理 ...
基于Spring MVC的ECharts动态数据实时展示
为什么80%的码农都做不了架构师?>>> 基于SpringMVC进行ECharts动态实时数据展示,ECharts的官网示例是前端的js动态随机数据,没有与后端程序进行交互,由 ...
easyui combobox java_Easyui的combobox实现动态数据级联效果
实现从数据库中动态获取对应的list集合,并在easyui的combobox中显示出来. 实现的效果如下: 1.数据库的表设计如图所示 2.数据库中填写相关的数据,如图所示.如图所示[法律法规]是所属 ...
Echarts动态数据折线图
1.添加引用: <script src="~/Scripts/jquery-3.3.1.js"></script><script src=" ...
echarts加载动画效果_入门ae教程：科技类的加载动画，非常酷炫的效果，附带教程...
效果图今天这个教程属于初学者的教程,很简单,但是科技类的加载动画,我个人觉得都是非常酷的(每天5分钟,充实一整天) 教程 1. 首先打开我们的AE 2. 新建一个合成,1080*660px,持续时间 ...
vue echarts动态数据定时刷新
关键代码截图完整代码 <template><div class="block"><div :class="className" ...

echarts 动态数据动画效果

echarts 动态数据动画效果相关推荐

最新文章

热门文章