echarts的x轴自动动态刷新

例子为x轴动态刷新且x轴为时间，粘出了全部代码供大家参考

新手上路各位多多指导，谢谢！

<!DOCTYPE html>
<html style="height: 100%">
<head><meta charset="utf-8"><style type="text/css">.boxjkaj{height: 49%;width: 57.8% ;}</style>
</head>
<body style="height: 100%; margin: 0">
<div class="boxjkaj" id="container" ></div>
<script type="text/javascript" src="js/echarts.js"></script>
<script src="echarts-all.js"></script>
<script type="text/javascript">var dom = document.getElementById("container");var myline2 = echarts.init(dom);option = null;var startTime=[2012,11,11,11,1,1];var d=new Date();d.setFullYear(startTime[0]);d.setMonth(startTime[1]);d.setDate(startTime[2]);d.setHours(startTime[3]);d.setMinutes(startTime[4]);d.setSeconds(startTime[5]);var base = +d;//后台传递开始var oneDay = 1000;var date = [];var num = 0;var data1 = [Math.random()];var data2 = [Math.random()];var now = new Date(base);function addData(shift) {var tmp = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/') + "\n" + [ now.getHours(),  now.getMinutes(),  now.getSeconds()].join(':');date.push(tmp);data1.push((Math.random() - 0.4) * 10 + data1[data1.length - 1]);data2.push((Math.random() - 0.4) * 10 + data1[data1.length - 1]);if (shift) {date.shift();data1.shift();data2.shift();}now = new Date(+new Date(now) + oneDay);}for (var i = 1; i <= 6; i++) {num = num + 1;addData();}var xcd='CUFen'option ={backgroundColor:['#00cccc'],color:['#2D7FCC','#87314C'],tooltip: {trigger: 'axis'},legend: {x: 'right',data:[xcd,'CUF'],textStyle:{color:"#FFFFFF",fontsize:5}},xAxis: {axisLabel:{ textStyle:{color:'#FFFFFF'},interval:0,},axisLine: {lineStyle: {color:'#0B438B'}},type: 'category',boundaryGap: false,data: date},yAxis: {splitLine:{show:false,},axisLine: {lineStyle: {color:'#0B438B',}},axisLabel: {textStyle: {color: '#FFFFFF'}},boundaryGap: [0, '50%'],type: 'value'},grid: {top:'3%',left: '1%',right: '5%',bottom: '5%',containLabel: true,},series: [{name:'CUFen',type:'line',data:data1},{name:'CUF',type:'line',data:data2},]};setInterval(function () {addData(true);myline2.setOption({xAxis: {data: date},series: [{name: 'CUFen',data: data1,},{name: 'CUF',data: data2,},]});}, 1000);if (option && typeof option === "object") {myline2.setOption(option, true);}
</script>
</body>
</html>

前后台交互的话date使用数组即可，如果是字符串的话请使用如下代码将字符串转数组：

var datasz = data.split(",");

echarts的x轴自动动态刷新相关推荐

总结整理Echarts双y轴曲线图（全）
最近因为项目需要,用到了Echarts,自己学习了相关东西,也参考了一些文件,最终把双y轴曲线图实现了,跟大家分享一下.下面是最终需要的效果图: 不多说了,直接上代码!O(∩_∩)O哈哈~ ----- ...
echarts柱状图x轴文字换行_深入 echarts 如何设置 Label / axisLabel 换行及自定义格式 / 自定义样式? 结合 canvas 如何实现文字换行来理解...
前言之前在一篇文章<深入 echarts 如何设置渐变色?echarts 如何设置圆角?echarts 如何设置自定义 Label?>已经初步介绍了如何通过 formatter 结合 r ...
解决 echarts柱状图x轴数据隔一个显示
echarts柱状图x轴数据隔一个显示在显示一个柱状图的时候,x轴的数据是隔一个显示的,但是hover的时候却能显示出当前轴x轴的名称,如下图: 那就只能说明这个轴的名称太长了,所以导致它默认就隔一 ...
echart 折线图设置y轴单位_如何让echarts中y轴的单位位于数值的右上角
请问:如何让echarts中y轴的单位位于数值的右上角 1.创建折线图的数据区(包括年份和数据). 2.仅选择数据区创建折线图(插入选项卡/图表工具组/折线图). 3.得到的折线图x坐标不满足要求,在 ...
echarts中y轴设置刻度_xAxis 配置
设置ECharts中y轴刻度线的样式在上节内容中我们提到了 ECharts 中 y 轴刻度线样式的设置,那么在本节我们就来详细介绍一下 yAxis 中 axisTick.lineStyle 所包含的 ...
echarts将x轴展示在图标上方
echarts让x轴固定在上方在echarts中,普通折线图x轴默认在图标下方,如果要展示在图标上面,需要配置一个属性 xAxis的position属性设置为top 配置后,展示效果如下这样就 ...
echarts的x轴文字倾斜展示
前言: echarts图x轴文字倾斜展示效果图: 实现代码: xAxis:{data:['站点一','站点二']//主要是下面的代码-倾斜axisLabel:{ rotate : 60 } } 到此 ...
html时间轴横向自动播放,利用jQuery实现日期时间轴自动播放代码
特效描述:利用jQuery实现日期时间轴自动播放代码.利用jQuery实现日期时间轴自动播放代码代码结构 1. 引入CSS 2. 引入JS 3. HTML代码渲染未完成延迟动画渲染完成继续动 ...
echarts中y轴设置刻度_ECharts中y坐标轴刻度的属性
坐标轴刻度作为直角坐标系中重要的组成部分,我们需要学会合理的设置坐标轴的刻度,本节列举了一些 ECharts 中 y 轴刻度的一些属性设置.如果您还不知道如何显示坐标轴刻度,不晓得怎么控制 y 轴刻度 ...

echarts的x轴自动动态刷新

echarts的x轴自动动态刷新相关推荐

最新文章

热门文章