echarts 自定义 symbol 样式

最新推荐文章于 2024-11-09 16:37:22 发布

shiki0083

最新推荐文章于 2024-11-09 16:37:22 发布

阅读量6k

点赞数 2

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

原文链接：https://blog.csdn.net/qq_39759115/article/details/80506194

本文介绍SVG中的<path>标签使用方法，包括各种绘图指令如M、L、C等，并提供绘制三角形的例子。此外，还介绍了如何在ECharts中应用这些路径指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义标记的图形有两种方式：

1. 通过 ‘image://url’ 设置为图片，其中 URL 为图片的链接，或者 dataURI。
2. 通过 ‘path://’ 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。

主要说SVG：

<path> 标签用来定义路径。使用 path 标签时，就像用指令的方式来控制一只画笔，比如：移动画笔到某一坐标位置，画一条线，画一条曲线等等

下面的指令可用于路径数据：

M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画水平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径
说明：
坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下。
所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系
指令和数据间的空格可以省略
同一指令出现多次可以只用一个

详细说明可参考：svg中path标签的用法
或者 w3c： SVG -path

比如绘制一个三角形：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M250 150 L150 350 L350 350 Z" />
</svg>

在 echarts 上使用 path 只需把 path 标签上的指令写在 path:// 之后：

 symbol: 'path://M250 150 L150 350 L350 350 Z',

版权声明：本文为CSDN博主「_let」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_39759115/article/details/80506194