EChartsでチャート連携を実装する方法

ECharts でチャートのリンクを実装するには、特定のコード例が必要です。

複数の関連データを表示する必要がある場合、データを次の形式で表示する必要があります。チャート 直感的で効果的な方法。実際のアプリケーションでは、異なるタイプの複数のチャートを組み合わせて表示する必要がある状況によく遭遇します。 ECharts は強力なデータ視覚化ライブラリとして、この要件を迅速に実現するのに役立つチャートリンク機能を提供します。

ECharts でチャートのリンクを実現する方法は、イベント トリガーとデータ インタラクションを通じて行われます。特定のチャートのイベントを監視することで、イベントがトリガーされたときに、対応するデータを取得し、対応する操作を実行することで、チャートの連動効果を実現します。 EChartsでチャート連携を実装する方法を具体的なコード例を用いて説明します。

まず、棒グラフと折れ線グラフという 2 つの異なるタイプのグラフを準備する必要があります。便宜上、デモンストレーションには ECharts によって公式に提供されているサンプル データを使用します。以下は棒グラフと折れ線グラフの HTML コードです:

<div id="bar" style="width: 600px;height:400px;"></div>
<div id="line" style="width: 600px;height:400px;"></div>

次に、JavaScript で ECharts ライブラリを導入し、グラフを作成し、グラフ イベントを監視するための対応するコードを記述します。完全な JavaScript コードは次のとおりです。

// 图表数据
var barData = [
    {name: '周一', value: 120},
    {name: '周二', value: 200},
    {name: '周三', value: 150},
    {name: '周四', value: 80},
    {name: '周五', value: 70},
    {name: '周六', value: 110},
    {name: '周日', value: 130}
];

var lineData = [
    {name: '周一', value: 190},
    {name: '周二', value: 230},
    {name: '周三', value: 170},
    {name: '周四', value: 120},
    {name: '周五', value: 90},
    {name: '周六', value: 150},
    {name: '周日', value: 160}
];

// 创建柱状图
var barChart = echarts.init(document.getElementById('bar'));
var barOption = {
    xAxis: {
        type: 'category',
        data: barData.map(item => item.name)
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'bar',
        data: barData.map(item => item.value)
    }]
};
barChart.setOption(barOption);

// 创建折线图
var lineChart = echarts.init(document.getElementById('line'));
var lineOption = {
    xAxis: {
        type: 'category',
        data: lineData.map(item => item.name)
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'line',
        data: lineData.map(item => item.value)
    }]
};
lineChart.setOption(lineOption);

// 监听柱状图点击事件
barChart.on('click', function(params) {
    // 获取点击的数据
    var data = barData[params.dataIndex];
    
    // 根据点击的数据更新折线图数据
    lineOption.series[0].data = [data.value, data.value, data.value, data.value, data.value, data.value, data.value];
    lineChart.setOption(lineOption);
});

上記のコードでは、最初に棒グラフと折れ線グラフのインスタンスが作成され、それらの初期データが設定されます。次に、setOption メソッドを呼び出してデータをグラフに設定します。次に、棒グラフのクリック イベントをリッスンして、イベント コールバック関数でクリック データを取得し、クリック データに基づいて折れ線グラフのデータを更新し、setOption を通じて更新されたデータを折れ線グラフに設定します。 ＃＃＃ 方法 。このようにして、棒グラフと折れ線グラフの連動効果が得られます。

上記は単なる単純な例であり、実際のアプリケーションでは、より複雑なデータの相互作用やチャートのリンク要件が必要になる場合があることに注意してください。ただし、全体的な実装の考え方と操作方法は同じです。チャートのイベントをリッスンすることでデータを取得し、対応する操作を実行します。

上記のサンプル コードを通じて、ECharts でチャートのリンクを実装するのは複雑ではないことがわかります。 ECharts が提供する豊富な機能と柔軟な操作により、複数のチャート間のインタラクティブな効果を簡単に実現でき、データ分析と表示の可能性がさらに広がります。

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