• echarts 自定义 markPoint 的 symbol 样式


    两种自定义标记

    在 echarts 中 markPoint 的样式内置了 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’ 几种,如果这些都不太符合需要就必须自定义我们需要的样式。

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

    svg 的 path

    <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轴水平向下。
    所有指令大小写均可。大写绝对定位,参照全局坐标系;小写相对定位,参照父容器坐标系
    指令和数据间的空格可以省略
    同一指令出现多次可以只用一个

    echarts 的 path://

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

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

    一个小例子:

     参考:https://blog.csdn.net/qq_39759115/article/details/80506194

  • 相关阅读:
    改写promise并添加超时处理
    js将文案复制到剪贴板
    学习笔记(安装、命名实体识别、BERT、面试)
    读书笔记——安装
    Markdown使用
    奔波三载,虽死犹生
    .net工程师的利器
    .NET开发相关技术
    两行代码教你用React useContext代替React-redux
    记解决 `antd is not defined` 解决ant design 打包体积过大的问题
  • 原文地址:https://www.cnblogs.com/jingsupo/p/13280166.html
Copyright © 2020-2023  润新知