最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

ECharts3实现动态数据+时间坐标轴的操作

来源:懂视网 责编:小采 时间:2020-11-27 20:12:56
文档

ECharts3实现动态数据+时间坐标轴的操作

ECharts3实现动态数据+时间坐标轴的操作:对ECharts3官网中动态数据+时间坐标轴实例进行了修改,X轴为当前时间,并数据累积。可在ECharts3实例中的代码框中粘贴直接查看效果。function randomData() { now = new Date(+now + 1000); value = value + Math.random()
推荐度:
导读ECharts3实现动态数据+时间坐标轴的操作:对ECharts3官网中动态数据+时间坐标轴实例进行了修改,X轴为当前时间,并数据累积。可在ECharts3实例中的代码框中粘贴直接查看效果。function randomData() { now = new Date(+now + 1000); value = value + Math.random()
这里写图片描述
对ECharts3官网中动态数据+时间坐标轴实例进行了修改,X轴为当前时间,并数据累积。

可在ECharts3实例中的代码框中粘贴直接查看效果。

function randomData() {
 now = new Date(+now + 1000);
 value = value + Math.random() * 21 - 10; 
 return {
 name: now.toString(),
 value: [
 now, 
 Math.round(value)
 ]
 }
}var data = [];var now = new Date();var value = Math.random() * 1000;

option = {
 title: {
 text: '动态数据 + 时间坐标轴'
 },
 tooltip: {
 trigger: 'axis',
 formatter: function (params) {
 params = params[0]; 
 var date = new Date(params.name); 
 return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
 },
 axisPointer: {
 animation: false
 }
 },
 xAxis: {
 type: 'time',
 splitLine: {
 show: false
 }
 },
 yAxis: {
 type: 'value',
 boundaryGap: [0, '100%'],
 splitLine: {
 show: false
 }
 },
 series: [{
 name: '模拟数据',
 type: 'line',
 showSymbol: false,
 hoverAnimation: false,
 data: data
 }]
};
setInterval(function () {
 //data.shift();
 data.push(randomData());
 myChart.setOption({
 series: [{
 data: data
 }]
 });
}, 1000);

文档

ECharts3实现动态数据+时间坐标轴的操作

ECharts3实现动态数据+时间坐标轴的操作:对ECharts3官网中动态数据+时间坐标轴实例进行了修改,X轴为当前时间,并数据累积。可在ECharts3实例中的代码框中粘贴直接查看效果。function randomData() { now = new Date(+now + 1000); value = value + Math.random()
推荐度:
标签: 数据 动态 echart
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top