echarts 自定义 markPoint 的 symbol 样式

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’,

一个小例子:

<span>echarts 自定义 markPoint 的 symbol 样式</span>

 

 

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/119522.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 实现异步的几种方式_异步怎么实现

    实现异步的几种方式_异步怎么实现FIFO根据输入输出时钟是否一致,分为同步FIFO与异步FIFO。本文以异步FIFO与同步FIFO的异同入手,在比较过程中逐步对异步FIFO进行分析,介绍异步FIFO相比于同步FIFO的额外处理,最终实现异步FIFO,并进行了仿真、调试、以及验证

  • C#操作 word代码

    推荐:http://www.cnblogs.com/roucheng/p/3521864.html

    2021年12月26日
  • mysql如何优化慢查询_慢sql优化思路

    mysql如何优化慢查询_慢sql优化思路这篇文章主要是就在公司实习的时候,对SQL优化工作作出的一些整理。  在公司实习的时候,导师分配了SQL慢查询优化的任务,任务是这样的:每周从平台中导出生产数据库的慢查询文件进行分析。进行SQL优化的手段也主要是修改SQL写法,或者新增索引。  现在从记录项目中的一点点做起。  (1)数据库中设置SQL慢查询    一、第一步.开启mysql慢查询     方…

    2022年10月15日
  • EBC外汇交易平台_ecn外汇交易商排名

    EBC外汇交易平台_ecn外汇交易商排名外汇凭借公开透明、交易公平、24小时实时交易、高倍杠杆等独特的优势备受投资者推崇。相比于其他产品,外汇交易更需要做好风险和收益的动态平衡,建议投资者在选择投资平台时,优先选择专业高效的金融券商。EBC金融投资平台凭借其安全与收益的双重保障,受到越来越多投资者的追捧。安全保障:FCA+ASIC双认证通过,搭起坚实投资防护墙EBC金融始终将合规专业、为客户提供最大限度的资金安全保障作为基本要求,积极付出行动。EBC金融自成立初期起,将所有的资金都托管在世界顶级银行,接受监管机构严格、健全的监管体系之严格

  • FreeWebHostingArea_for free 与free用法

    FreeWebHostingArea_for free 与free用法by EliseMoreauUpdatedApril09,2018Wonderingiftherearethereanygoodsitesouttheremadepurelyforfreeimagehosting?Well,you’reinluck!Wespendalotofourtimepushinginformatio…

  • SOAP协议的深度解析

    SOAP协议的深度解析笔记上传:1.soap与http的区别:HTTP只负责把数据传送过去,不会管这个数据是XML、HTML、图片、文本文件或者别的什么。( HTTP就是邮局的协议,他们规定了你的信封要怎么写,要贴多少邮票等。。。。)而SOAP协议则定义了怎么把一个对象变成XML文本,在远程如何调用等  (SOAP就是你们之间交流的协议,负责把你所需要表达的意思写在信纸上,同时也负责让对方能够看得懂你的信。)2.s…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号