동적 데이터 + 시간 좌표축에 대한 ECharts 질문

4411 단어 ECharts
다음 ECharts의 데모 코드
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);

우리가 이 코드를 복사해 왔을 때, 그가 보여준 접선 동적 디스플레이 효과를 실현하지 못했다
다음은 필자가 수정한 코드입니다. (빨간색 코드는 데모와 다른 부분입니다)
  
  
  
      
    ECharts  
      
      
    
  
  
      
    
                // 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);            

이런 곳을 고치면 데모가 운행할 수 있다

좋은 웹페이지 즐겨찾기