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);

ログイン後にコピー

タイマーでは、シフト関数を使用して、データソースポップアップ、プッシュ機能は、生成された乱数をデータソースの末尾に追加し、データの変換を実現します。その後、setOption 関数を通じて ECharts チャートのデータ系列を更新し、チャートのリアルタイム表示を実現しました。

要約すると、上記は ECharts でリアルタイムデータ更新を実装する方法の具体的なコード例です。実際の使用では、実際のニーズに応じて調整および最適化できます。

以上がECharts でリアルタイムのデータ更新を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。