Ecarts customize the symbol style of markpoint

Time:2021-4-6

Two custom tags

In ecarts, markpoint styles include ‘circle’, ‘rect’, ’roundrect’, ‘triangle’, ‘diamond’, ‘pin’ and ‘arrow’. If these styles do not meet the needs, we must customize the styles we need.

There are two ways to customize the graphics of tags
1. Passed‘ image://url ’Set to image, where URL is the link of image, or datauri.
2. Set the icon to any vector path through “path: / /”. Compared with the method of using pictures, this method does not need to worry about aliasing or blurring due to scaling, and can be set to any color. The path graph is adaptively sized to fit.

Svg’s path

Tags are used to define paths. When using the path tag, it’s like using instructions to control a brush, such as moving the brush to a certain coordinate position, drawing a line, drawing a curve, and so on

The following instructions are available for path data:

M = move to (m, x, y): move the brush to the specified coordinate position
L = line to (L, x, y): draw a line to the specified coordinate position
H = horizontal line to (H x): draw a horizontal line to the specified X coordinate position
V = vertical line to (V, y): draw a vertical line to the specified y coordinate position
C = curveto (C x1, Y1, X2, Y2, endx, Endy): cubic Bessel curve
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Bezier curve (Q x, y, endx, end): quadratic Bezier curve
T = smooth rectangular Bezier curveto (t endx, end): mapping
A = elliptic arc (a, Rx, ry, xrotation, flag1, Flag2, x, y): Arc
Close path () = epath

explain:
The coordinate axis is centered on (0,0), the X axis is horizontally right, and the Y axis is horizontally down.
All instructions are case sensitive. The upper case absolute positioning refers to the global coordinate system; the lower case relative positioning refers to the parent container coordinate system
Spaces between instructions and data can be omitted
If the same instruction appears more than once, only one instruction can be used

Path of ecarts://

To use path on ecarts, just write the instructions on the path tag after path: / /

symbol: ‘path://M250 150 L150 350 L350 350 Z’,

A small example:

 

 

reference resources: https://blog.csdn.net/qq_ 39759115/article/details/80506194