您的位置：首页 > 其它

ECharts关于“动态数据+时间坐标轴”的问题

2016-10-19 17:24 381 查看

下面ECharts上的Demo代码

function randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round(value)
]
}
}

var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
data.push(randomData());
}

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
}]
};

app.timeTicket = setInterval(function () {

for (var i = 0; i < 5; i++) {
data.shift();
data.push(randomData());
}

myChart.setOption({
series: [{
data: data
}]
});
}, 1000);

我们把这段代码拷贝过来时，并没有实现如他所展示的折线动态显示效果

下面是笔者修改过后的代码（红色代码是和demo不一样的地方）

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>ECharts</title>  
    <!-- 引入 echarts.js -->  
    <script src="js/jquery-1.8.0.js"></script>  
    <script type="text/javascript" src="echarts.common.min.js" ></script>
</head>  
<body>  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
    <div id="main" style="width: 600px;height:400px;"></div>  
    <script type="text/javascript">  
        // 基于准备好的dom，初始化echarts实例  
        var myChart = echarts.init(document.getElementById('main'));//定义折线图显示的位置对象
        function randomData() {  
            now = new Date(+now + oneDay);  
            value = value + Math.random() * 21 - 10;  
            return {  
                name: now.toString(),  
                
                value: [  
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),  
                    Math.round(value)  
                ]  
                 
            }  
        }  
          
        var data = [];  
        var now = +new Date(1997, 9, 3);  
        var oneDay = 24 * 3600 * 1000;  
        var value = Math.random() * 1000;  
        for (var i = 0; i < 1000; i++) {  
            data.push(randomData());  
        }  
          
        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 () {  
          
            for (var i = 0; i < 5; i++) {  
                data.shift();  
                data.push(randomData());  
            }  
           myChart.setOption(option);
        }, 1000);  
    </script>  
</body>  
</html>

改过这些地方，Demo就可以运行了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ECharts 动态显示数据

相关文章推荐

新的分享

章节导航