[JavaScript知识库]Echarts源代码分析

2021SC@SDUSC

在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。

在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的?'legendselectchanged'?事件（这里需要注意切换图例开关是不会触发?'legendselected'?事件的），数据区域缩放时触发的?'datazoom'?事件等等。?

上面提到诸如?'legendselectchanged'?事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。

在 ECharts 通过调用?myChart.dispatchAction({ type: '' })?触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。

常用的动作和动作对应参数在?action?文档中有列出。

action改变图表中心点和缩放：

export interface RoamPaylod extends Payload {
    dx: number
    dy: number
    zoom: number
    originX: number
    originY: number
}

export function updateCenterAndZoom(
    view: View,
    payload: RoamPaylod,
    zoomLimit?: {
        min?: number,
        max?: number
    }
) {
    const previousZoom = view.getZoom();
    const center = view.getCenter();
    let zoom = payload.zoom;

    const point = view.dataToPoint(center);

    if (payload.dx != null && payload.dy != null) {
        point[0] -= payload.dx;
        point[1] -= payload.dy;

        view.setCenter(view.pointToData(point));
    }
    if (zoom != null) {
        if (zoomLimit) {
            const zoomMin = zoomLimit.min || 0;
            const zoomMax = zoomLimit.max || Infinity;
            zoom = Math.max(
                Math.min(previousZoom * zoom, zoomMax),
                zoomMin
            ) / previousZoom;
        }

        // Zoom on given point(originX, originY)
        view.scaleX *= zoom;
        view.scaleY *= zoom;
        const fixX = (payload.originX - view.x) * (zoom - 1);
        const fixY = (payload.originY - view.y) * (zoom - 1);

        view.x -= fixX;
        view.y -= fixY;

        view.updateTransform();
        // Get the new center
        view.setCenter(view.pointToData(point));
        view.setZoom(zoom * previousZoom);
    }

    return {
        center: view.getCenter(),
        zoom: view.getZoom()
    };
}

?