ECharts에서 실시간 데이터 업데이트를 구현하는 방법-JS 튜토리얼-php.cn

ECharts에서 실시간 데이터 업데이트를 구현하는 방법

WBOY

풀어 주다： 2023-12-17 14:07:07

원래의

1767명이 탐색했습니다.

ECharts에서 실시간 데이터 업데이트를 구현하는 방법

ECharts는 다양한 차트 유형과 풍부한 데이터 시각화 효과를 지원하는 오픈 소스 시각적 차트 라이브러리입니다. 실제 시나리오에서는 실시간 데이터를 표시해야 하는 경우가 많습니다. 즉, 데이터 소스가 변경되면 차트가 즉시 업데이트되어 최신 데이터를 표시할 수 있습니다.

그렇다면 ECharts에서 실시간 데이터 업데이트를 달성하는 방법은 무엇입니까? 다음은 구체적인 코드 데모 예제입니다.

먼저 ECharts의 js 파일과 테마 스타일을 소개해야 합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts实时数据更新</title>
    <!--引入ECharts的js文件-->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
    <!--引入ECharts主题样式-->
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/theme/macarons.min.js"></script>
</head>
<body>
    <!--ECharts图表容器-->
    <div id="chart" style="width: 800px;height: 600px;"></div>
</body>
</html>

로그인 후 복사

다음으로 실시간 데이터 변화를 시뮬레이션하기 위한 데이터 소스를 정의해야 합니다.

// 模拟实时数据
var data = [120, 132, 101, 134, 90, 230, 210];
setInterval(function() {
    // 修改数据
    data.shift();
    data.push(Math.random() * 200);
}, 3000);

로그인 후 복사

그중 setInterval 함수는 3초마다 사용됩니다. 데이터를 한 번 업데이트하면 Math.random() * 200은 데이터 변경 사항을 시뮬레이션하기 위해 난수를 생성합니다. 물론 실제 적용에서는 특정 상황에 따라 데이터를 획득하고 처리해야 합니다.

다음으로 ECharts 차트 인스턴스를 정의하고 차트를 HTML 페이지로 렌더링해야 합니다.

// 定义ECharts图表实例
var chart = echarts.init(document.getElementById('chart'),'macarons');

// 渲染图表
chart.setOption({
    title: {
        text: 'ECharts实时数据更新演示',
        subtext: '数据源从左侧滚动',
        left: 'center'
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value',
        axisLabel: {
            formatter: '{value} °C'
        }
    },
    series: [{
        name: '温度',
        type: 'line',
        data: data
    }]
});

로그인 후 복사

ECharts에서는 제목, 축, 데이터 시리즈 등을 포함하여 setOption 함수를 통해 차트의 다양한 속성을 설정해야 합니다. . 이번 예시에서는 7일을 포함하는 X축 좌표, Y축 좌표는 기온값, 데이터 시리즈는 기온 데이터, 유형은 꺾은선형 차트로 설정했습니다. 또한 마카롱 테마 스타일을 활용하여 차트 표시 효과를 더욱 아름답게 하였습니다.

마지막으로 실시간 데이터 표시를 달성하려면 차트 데이터를 지속적으로 업데이트하기 위해 타이머를 사용해야 합니다.

// 定时更新数据
setInterval(function() {
    // 更新数据
    data.shift();
    data.push(Math.random() * 200);
    
    // 更新图表
    chart.setOption({
        series: [{
            data: data
        }]
    });
}, 3000);

로그인 후 복사

타이머에서는 Shift 기능을 사용하여 데이터 소스의 첫 번째 값을 팝업하고 푸시 함수는 무작위를 생성합니다. 데이터 변환을 실현하기 위해 데이터 소스 끝에 숫자가 추가됩니다. 그 후 setOption 함수를 통해 ECharts 차트의 데이터 시리즈를 업데이트하여 차트를 실시간으로 표시했습니다.

요약하자면 위의 내용은 ECharts에서 실시간 데이터 업데이트를 구현하는 방법에 대한 구체적인 코드 예입니다. 실제 사용에서는 실제 필요에 따라 조정하고 최적화할 수 있습니다.

위 내용은 ECharts에서 실시간 데이터 업데이트를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!