兩種自定義標記
在 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/41387.html
標籤：JavaScript
上一篇：jquery總結