echarts 自定义markpoint的样式

 series中的markpoint样式

ECharts提供的默认标记类型样式：

     "circle ", "rect", "roundRect, 'triangle', 'diamond', 'pin', 'arrow', 'none'

如果自定义样式，有以下两种方式：

1、通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。 

URL 为图片链接例如：

 symbol: "image://图片地址"
 symbol:"image://https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2318012298,1118210339&fm=26&gp=0.jpg"

URL 为 dataURI 例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

2、可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

例如：

'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
步骤1： 打开阿里图标库 https://www.iconfont.cn/
步骤2： 搜索要使用的图标名，如 对话框

  步骤3： 下载图标：点击下载，下载格式为svg 

    →  

 步骤4： 

下载的结果：

<svg t="1577967477235" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1714" width="200" height="200">
　　<path d="M512 85.333333l249.6 298.666667H262.4z" fill="#3F51B5" p-id="1715"></path>
　　<path d="M426.666667 320h170.666666v576h-170.666666z" fill="#3F51B5" p-id="1716"></path>
</svg>

所以矢量路径就是d后边的数值：M512 85.333333l249.6 298.666667H262.4z M426.666667 320h170.666666v576h-170.666666z

如果需要每个数据的图形不一样，可以设置为如下格式的回调函数：

(value: Array|number, params: Object) => string

其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数。

 series-line.markPoint. symbolSize 

numberArrayFunction

标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。

如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数：

(value: Array|number, params: Object) => number|Array

其中第一个参数 value 为 data 中的数据值。第二个参数params 是其它的数据项参数。

 series-line.markPoint. symbolKeepAspect 试一试

boolean

如果 symbol 是 path:// 的形式，是否在缩放时保持该图形的长宽比。