ECharts イベント処理

ECharts では、ユーザーの操作を監視して対応する関数をコールバックできます。

ECharts はonメソッドでユーザーの操作を監視します。例えば、ユーザーのクリック操作を監視します。

ECharts のイベントは2つのタイプに分けられます：

ユーザーのマウス操作によるクリック、例えば'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'イベント。

もう1つは、ユーザーが対話可能なコンポーネントを使用した後にトリガーされる動作イベントです。例えば、凡例の切り替え時にトリガーされる 'legendselectchanged' イベント、データ領域のズーム時にトリガーされる 'datazoom' イベントなどです。

myChart.on('click', function (params) {
    // 在用户点击后控制台打印数据的名称
    console.log(params);
});

myChart.on('legendselectchanged', function (params) {
    console.log(params);
});

chart.on('click', 'series.line', function (params) {
    console.log(params);
});

chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {
    console.log(params);
});

マウスイベント

ECharts がサポートするマウスイベントの種類には、'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' があります。

次の例では、棒グラフをクリックするとダイアログボックスがポップアップ表示されます：

すべてのマウスイベントにはパラメータ params が含まれます。これは、クリックしたグラフィックスのデータ情報を含むオブジェクトで、形式は次のとおりです：

{
    // 当前点击的图形元素所属的组件名称，
    // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
    componentType: string,
    // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
    seriesType: string,
    // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
    seriesIndex: number,
    // 系列名称。当 componentType 为 'series' 时有意义。
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
    // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
    // 其他大部分图表中只有一种 data，dataType 无意义。
    dataType: string,
    // 传入的数据值
    value: number|Array
    // 数据图形的颜色。当 componentType 为 'series' 时有意义。
    color: string
}

マウスがどこをクリックしたかを区別する方法：

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') {
        // 点击到了 markPoint 上
        if (params.seriesIndex === 5) {
            // 点击到了 index 为 5 的 series 的 markPoint 上。
        }
    }
    else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {
                // 点击到了 graph 的 edge（边）上。
            }
            else {
                // 点击到了 graph 的 node（节点）上。
            }
        }
    }
});

query を使用して、指定したコンポーネントのグラフィック要素に対してのみコールバックをトリガーします：

chart.on(eventName, query, handler);

query は string または Object を指定できます。

string の場合はコンポーネントタイプを表します。形式は 'mainType' または 'mainType.subType' です。例：

chart.on('click', 'series', function () {...});
chart.on('click', 'series.line', function () {...});
chart.on('click', 'dataZoom', function () {...});
chart.on('click', 'xAxis.category', function () {...});

Object の場合は、次の1つ以上のプロパティを含めることができます。各プロパティはオプションです：

{
    <mainType>Index: number // 组件 index
    <mainType>Name: string // 组件 name
    <mainType>Id: string // 组件 id
    dataIndex: number // 数据项 index
    name: string // 数据项 name
    dataType: string // 数据项 type，如关系图中的 'node', 'edge'
    element: string // 自定义系列中的 el 的 name
}

例：

chart.setOption({
    // ...
    series: [{
        name: 'uuu'
        // ...
    }]
});
chart.on('mouseover', {seriesName: 'uuu'}, function () {
    // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时，此方法被回调。
});

例：

chart.setOption({
    // ...
    series: [{
        // ...
    }, {
        // ...
        data: [
            {name: 'xx', value: 121},
            {name: 'yy', value: 33}
        ]
    }]
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
    // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此方法被回调。
});

例：

chart.setOption({
    // ...
    series: [{
        type: 'graph',
        nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
        edges: [{source: 0, target: 1}]
    }]
});
chart.on('click', {dataType: 'node'}, function () {
    // 关系图的节点被点击时此方法被回调。
});
chart.on('click', {dataType: 'edge'}, function () {
    // 关系图的边被点击时此方法被回调。
});

例：

chart.setOption({
    // ...
    series: {
        // ...
        type: 'custom',
        renderItem: function (params, api) {
            return {
                type: 'group',
                children: [{
                    type: 'circle',
                    name: 'my_el',
                    // ...
                }, {
                    // ...
                }]
            }
        },
        data: [[12, 33]]
    }
})
chart.on('mouseup', {element: 'my_el'}, function () {
    // name 为 'my_el' 的元素被 'mouseup' 时，此方法被回调。
});

コールバック関数内で、このオブジェクトのデータ名やシリーズ名を取得し、自分のデータストアで他の情報を検索してチャートを更新したり、オーバーレイを表示したりできます。次のサンプルコードのとおりです：

コンポーネント操作の動作イベント

ECharts では、基本的にすべてのコンポーネント操作によって対応するイベントがトリガーされます。よく使われるイベントとイベントに対応するパラメータは events ドキュメントに記載されています。

以下は、凡例の切り替えを監視する例です：

コードで ECharts 内のコンポーネントの動作をトリガーする

上記ではユーザーの操作のみを説明しましたが、プログラム内でメソッドを呼び出してチャートの動作をトリガーする必要がある場合もあります。例えば、tooltip を表示する場合です。

ECharts は dispatchAction({ type: '' }) を使用してチャートの動作をトリガーし、すべてのアクションを統一的に管理します。必要に応じてユーザーの操作パスを記録することもできます。

上記の例は、円グラフの tooltip をカルーセル表示するためのものです：