{{ target: echarts-graphic }}
Util methods about graphics.
Create a new shape class.
( opts: Object ) => zrender.graphic.Path
The details of the parameter opts
can be checked in zrender.graphic.Path
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]] } };
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'
.
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.
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
.