ECharts Ereignisbehandlung

In ECharts können wir entsprechende Callback-Funktionen auslösen, indem wir Benutzerinteraktionsverhalten abhören.

ECharts hört über dieon-Methode Benutzerverhalten ab, zum Beispiel das Überwachen von Klickaktionen des Benutzers.

Ereignisse in ECharts werden in zwei Typen unterteilt:

Mausoperationen des Benutzers wie Klicks, z. B.'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'Ereignis.

Der andere Typ sind Verhaltensereignisse, die ausgelöst werden, nachdem Benutzer mit interaktiven Komponenten interagiert haben, wie z. B. das 'legendselectchanged'-Ereignis, das beim Umschalten des Legenden-Schalters ausgelöst wird, das 'datazoom'-Ereignis, das beim Skalieren des Datenbereichs ausgelöst wird, und so weiter.

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

Mausereignis

Von ECharts unterstützte Mausereignistypen, einschließlich 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' Ereignis.

Das folgende Beispiel öffnet ein Dialogfeld, wenn auf ein Balkendiagramm geklickt wird:

Alle Mausereignisse enthalten den Parameter params, ein Objekt, das Dateninformationen über die angeklickte Grafik enthält, im folgenden Format:

{
    // 当前点击的图形元素所属的组件名称，
    // 其值如 '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
}

Wie lässt sich unterscheiden, wo die Maus geklickt hat:

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（节点）上。
            }
        }
    }
});

Verwenden Sie query, um Callbacks nur für grafische Elemente der angegebenen Komponente auszulösen:

chart.on(eventName, query, handler);

query kann ein String oder ein Object sein.

Wenn es ein String ist, gibt es den Komponententyp an. Das Format kann 'mainType' oder 'mainType.subType' sein. Zum Beispiel:

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

Wenn es ein Object ist, kann es eines oder mehrere der folgenden Attribute enthalten, die jeweils optional sind:

{
    <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
}

Zum Beispiel:

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

Zum Beispiel:

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' 时，此方法被回调。
});

Zum Beispiel:

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 () {
    // 关系图的边被点击时此方法被回调。
});

Zum Beispiel:

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' 时，此方法被回调。
});

Sie können den Datennamen und den Seriennamen in diesem Objekt aus der Callback-Funktion abrufen und dann andere Informationen in Ihrem eigenen Datenrepository nachschlagen, um das Diagramm zu aktualisieren, Overlays anzuzeigen usw., wie im folgenden Beispielcode gezeigt:

Verhaltensereignisse der Komponenteninteraktion

In ECharts lösen grundsätzlich alle Interaktionsverhalten von Komponenten entsprechende Ereignisse aus. Häufig verwendete Ereignisse und ihre entsprechenden Parameter sind in der Ereignisdokumentation aufgeführt.

Das folgende ist ein Beispiel für das Lauschen auf einen Legendenwechsel:

Komponentenverhalten in ECharts mit Code auslösen

Oben haben wir nur Benutzerinteraktionen beschrieben, aber manchmal müssen wir auch Methoden im Programm aufrufen, um Diagrammverhalten auszulösen, wie z. B. das Anzeigen eines Tooltips.

ECharts löst Diagrammverhalten über dispatchAction({ type: '' }) aus, verwaltet alle Aktionen zentral und kann bei Bedarf Benutzerverhaltenspfade aufzeichnen.

Das obige Beispiel wird für den Tooltip im Karussell-Kreisdiagramm verwendet: