ECharts modifies the icon (symbol) of the timeline to a plus sign

As shown in the figure above, to change the icon of the timeline into the form of a plus sign, let's take a look at the official documentation and replace the description of the symbol:

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

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

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

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

The default marker type of ECharts has no plus sign, so we need to replace it with the path of the svg.

path suggests to use Ali's iconfont icon library, URL:

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

In the icon library, we can select the corresponding plus icon to download the svg format, as follows:

    

Open the svg file with an editor such as sublime:

Copy the value of d in path and assign the value to symbol, as follows:

Run echarts, you will find that the icon of the timeline has changed to a plus sign.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324410931&siteId=291194637