{{ target: echarts-graphic }}

graphic

Util methods about graphics.

extendShape(Function)

Create a new shape class.

(
    opts: Object
) => zrender.graphic.Path

The details of the parameter opts can be checked in zrender.graphic.Path

registerShape(Function)

Register a user defined shape.

(
    name: string,
    ShapeClass: zrender.graphic.Path
)

The ShapeClass should be generated by echarts.graphic.extendShape. Then the shape class can be fetched by echarts.graphic.getShapeClass registerShape will overwrite the registered shapes, including the registered built-in shapes, if using the same name. The registered shapes can be used in custom series and graphic component by declaring {type: name}.

For example:

var MyShape = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
        width: 0,
        height: 0
    },
    buildPath: function (ctx, shape) {
        ctx.moveTo(shape.x, shape.y);
        ctx.lineTo(shape.x + shape.width, shape.y);
        ctx.lineTo(shape.x, shape.y + shape.height);
        ctx.lineTo(shape.x + shape.width, shape.y + shape.height);
        ctx.closePath();
    }
});
echarts.graphic.registerShape('myCustomShape', MyShape);

var option = {
    series: {
        type: 'custom',
        coordinateSystem: 'none',
        renderItem: function (params, api) {
            return {
                type: 'myCustomShape',
                shape: {
                    x: api.value(0),
                    y: api.value(1),
                    width: api.value(2),
                    height: api.value(3)
                },
                style: {
                    fill: 'red'
                }
            };
        },
        data: [[10, 20, 30, 40]]
    }
};

getShapeClass(Function)

Get the registered shape class.

(
    name: String
) => zrender.graphic.Path

Some built-in shapes are registered by default: 'circle', 'sector', 'ring', 'polygon', 'polyline', 'rect', 'line', 'bezierCurve', 'arc'.

clipPointsByRect(Function)

Clip the given points by the given rectangular.

(
    // The points to be clipped, like [[23, 44], [12, 15], ...].
    points: Array.<Array.<number>>,
    // The rectangular that is used to clip points.
    rect: {
        x: number,
        y: number,
        width: number,
        height: number
    }
) => Array.<Array.<number>> // The result Points.

clipRectByRect(Function)

Clip the first input rectangular by the second input rectangular.

(
    // The rectangular to be clipped.
    targetRect: {
        x: number,
        y: number,
        width: number,
        height: number
    },
    // The rectangular that is used to clip the first  rectangular.
    rect: {
        x: number,
        y: number,
        width: number,
        height: number
    }
) => { // The result rectangular.
    x: number,
    y: number,
    width: number,
    height: number
}

Notice: if the rect is totally clipped, returns undefined.