码迷,mamicode.com
首页 > 其他好文 > 详细

EChart将timeline图标设置为加号

时间:2020-01-28 12:31:20      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:play   aac   har   selected   get   abap   代码   spm   ima   

一 要实现的效果

技术图片

二 官方文档

看一下官方文档上,替换symbol的描述:

timeline.symbol string
[ default: ‘emptyCircle‘ ]
timeline标记的图形。

ECharts 提供的标记类型包括 ‘circle‘, ‘rect‘, ‘roundRect‘, ‘triangle‘, ‘diamond‘, ‘pin‘, ‘arrow‘

也可以通过 ‘image://url‘ 设置为图片,其中 url 为图片的链接,或者 dataURI。

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

三 解决步骤:

1,timelin的默认标记类型是没有加号的,为此我们需要用官网上提供的方法:使用svg的path来实现加号。

2,path建议使用阿里的iconfont图标库,网址:

http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2

在图标库中,我们可以选择对应的加号图标,下载svg格式,如下:

技术图片    技术图片

技术图片

用编辑器,如sublime打开svg文件:

 

3,复制path中d的值,将值赋值给symbol,如下:

技术图片

运行echarts,就会发现timeline的图标已经变为加号了。

EChart将timeline图标设置为加号

标签:play   aac   har   selected   get   abap   代码   spm   ima   

原文地址:https://www.cnblogs.com/liuXiaoDi/p/12237539.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!