Manejo de eventos en ECharts

En ECharts, podemos invocar las funciones correspondientes escuchando las acciones del usuario.

ECharts mediante elonmétodo para escuchar las acciones del usuario, por ejemplo, monitorear los clics del usuario.

En ECharts, los eventos se dividen en dos tipos:

Clics de operación del mouse del usuario, como'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'el evento.

El otro tipo son los eventos de comportamiento que se activan cuando el usuario usa componentes interactivos, por ejemplo, el evento 'legendselectchanged' que se activa al cambiar el interruptor de la leyenda), el evento 'datazoom' que se activa al escalar el área de datos, etc.

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

Eventos de mouse

Los tipos de eventos de mouse compatibles con ECharts incluyen 'click', 'dblclick', 'mousedown', 'mousemove', 'mouseup', 'mouseover', 'mouseout', 'globalout', 'contextmenu'.

El siguiente ejemplo muestra un cuadro de diálogo al hacer clic en el gráfico de barras:

Todos los eventos de mouse incluyen el parámetro params, que es un objeto que contiene información de los datos del gráfico al que se hizo clic, con el siguiente formato:

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

Cómo distinguir dónde se hizo clic con el mouse:

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

Usa query para activar la devolución de llamada solo en los elementos gráficos del componente especificado:

chart.on(eventName, query, handler);

query puede ser un string u Object.

Si es un string, indica el tipo de componente. El formato puede ser 'mainType' o 'mainType.subType'. Por ejemplo:

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

Si es un Object, puede contener una o más de las siguientes propiedades, cada una es opcional:

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

Por ejemplo:

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

Por ejemplo:

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

Por ejemplo:

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

Por ejemplo:

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

En la función de devolución de llamada, puedes obtener el nombre del dato y el nombre de la serie de este objeto, y luego indexar en tu propio almacén de datos para obtener otra información, actualizar el gráfico, mostrar capas flotantes, etc., como en el siguiente código de ejemplo:

Eventos de comportamiento de la interacción de componentes

En ECharts, prácticamente todas las interacciones de componentes activan eventos correspondientes. Los eventos comunes y sus parámetros asociados están listados en la documentación de events.

A continuación se muestra un ejemplo de cómo escuchar un interruptor de leyenda:

Código que desencadena el comportamiento de los componentes en ECharts

Arriba solo explicamos las interacciones del usuario, pero a veces también necesitamos llamar a métodos en el programa y activar el comportamiento del gráfico, como mostrar el tooltip.

ECharts utiliza dispatchAction({ type: '' }) para activar el comportamiento del gráfico, gestiona todas las acciones de manera unificada y también puede registrar la ruta de comportamiento del usuario según sea necesario.

El ejemplo anterior se usa para rotar el tooltip en un gráfico circular: