ECharts 实现动态时间坐标数据累积_ehcarts可以实现highcharts的动态加点吗-CSDN博客

对ECharts 官网中动态数据+时间坐标轴实例进行了修改，X轴为当前时间，并数据累积。

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

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript">
           var dom = document.getElementById("container");
           var myChart = echarts.init(dom);
           var app = {};
           option = null;
           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);

           ;
           if (option && typeof option === "object") {
           myChart.setOption(option, true);
           }
</script>
</body>
</html>