Echarts折线图的平移假动画

#可视化项目中经常用图表的方式来展示数据，折线图是经常出现的，但是在echarts折线图中正常情况是通过删除数据的第一个，添加一个新数据在数组的末尾来实现动画，此动画会导致折线图的明显跳动，因此考虑用时间轴的方式来实现平滑过渡。


var dataUser =[];
var dataCount = [];function rand(a){let time = (new Date()).getTime() - 3600 * 1000 *  a;let value = Math.random() * 100;return {name: updateTime(time),value: [[updateTime(time),value]}
};function updateTime(timestamp) {let time;if(timestamp != null && timestamp != "" && timestamp != 0){time = timestamp+"";}let date = new Date(timestamp);let Y = date.getFullYear() + '-';let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';let D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() + ':');let s = date.getSeconds();return Y + M + D + h + m + s;}for(let i = 0 ;i<10;i++){dataUser.push( rand(i));dataCount.push( rand(i));}var option = {tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['在线人数', '访问次数'],right: '60px'},grid: {x: 50,y: 25,x2: 50,y2: 30,// borderWidth:1},dataZoom : [{type: 'slider',//图表下方的伸缩条show : false,  //是否显示realtime : true,  //start : 0,  //伸缩条开始位置（1-100），可以随时更改end : 100,  //伸缩条结束位置（1-100），可以随时更改xAxisIndex:[0],filterMode:'none'}],xAxis: [{type: 'time',boundaryGap: false,// data: [/*'周一','周二','周三','周四','周五','周六','周日'*/],splitLine: {show: false},splitNumber:12,axisLine: {lineStyle: {color: '#FFF'}},}],yAxis: [{type: 'value',name: '人',nameGap: 6,splitLine: {show: false}},{type: 'value',name: '次',nameGap: 6,splitLine: {show: false}}],series: [{name: '在线人数',type: 'line',color: '#0EDF99',smooth: true,showSymbol: false,areaStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'rgb(66,255,251,1)' // 0% 处的颜色}, {offset: 1, color: 'rgb(66,255,251,0)' // 100% 处的颜色}],global: false // 缺省为 false}},data: dataUser},{name: '访问次数',type: 'line',color: '#42FFFB',smooth: true,showSymbol: false,yAxisIndex: 1,areaStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'rgb(10,195,248,1)' // 0% 处的颜色}, {offset: 1, color: 'rgb(10,195,248,0)' // 100% 处的颜色}],global: false // 缺省为 false}},data:dataCount}]};let startNum  = 0;let endNum   = 40;setInterval(function(){startNum = startNum + 0.1;endNum = endNum + 0.1;if(endNum >=100){startNum = 0;endNum  = 40;}
myChart.dispatchAction({type: 'dataZoom',// 开始位置的百分比，0 - 100start: startNum,// 结束位置的百分比，0 - 100end: endNum});
}, 200);逻辑：通过定时器调用echarts的dispatchAction方法设置dataZoom的方式实现。

Echarts折线图的平移假动画相关推荐

d3.js 教程模仿echarts折线图
今天我们来仿echarts折线图,这个图在echarts是折线图堆叠,但是我用d3改造成了普通的折线图,只为了大家学习(其实在简单的写一个布局就可以).废话不多说商行代码. 1 制作 Line 类 c ...
echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...
echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
在使用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查看echarts配置项,其中data中有一个value配置项选项,可以单独设置某一个数据的显示样式,具体使用方式如下 ...
echarts 折线图折线从头开始
在echarts折线图中,默认折线从刻度中心开始,我们为了图标的美观有时需要折线从头开始显示,一个配置项就可以轻松搞定. boundaryGap:false
echarts折线图折现下方显示阴影
echarts折线图折现下方显示阴影实现echarts折现下方显示渐变阴影区域代码: series: [{name: this.chartPropList[this.dataResource]. ...
echarts折线图动态多条线
echarts折线图配置项由于工作中遇到的图表特别多,每次用过配置项总是想不起来,在这里记录一下,希望也可以帮到路过的你.话不多说我们上图: 左边的是设计稿,右边的是echarts的示例图,我们先找 ...
e-charts折线图自适应外层div大小
问题描述: 在tabs页签下使用e-charts折线图,切换tab页签e-charts折线图无法自适应外层div大小: 解决方案: 添加监听器监听浏览窗口变化,两种监听方法 window.addEve ...
echarts折线图堆叠怎么设置_ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
echarts折线图填充颜色
Echarts折线图填充颜色 let chart = echarts.init(document.getElementById('main'));chart.setOption({title: {te ...

Echarts折线图的平移假动画

Echarts折线图的平移假动画

Echarts折线图的平移假动画相关推荐

最新文章

热门文章