echarts 地图自定义图标_echarts 地图自定义图标Symbol 及其颜色

官方文档

可以通过 ‘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'

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

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

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

说明

其实官方文档已经很明白了，return 一个 path:// 的svg 的路径即可

我这主要说的是SVG 复合路径：

SVG 复合路径

我们可以从 iconfont 下载想要的 svg 图标

打开 Adobe Illustrator CS6

鼠标点击选取整个图标：上方菜单(对象 -》复合路径 -》建立 (因为我用了中文的，英文自己找找咯

导出 svg 格式，以文本打开 svg，将复制后放入 symbol 中，前面加以 path://

这样 color 便能设入图标了

itemStyle: {

normal: {

color: '#1890ff'

}

echarts 地图自定义图标_echarts 地图自定义图标Symbol 及其颜色相关推荐

echarts 地图行政区划压缩_echarts地图数据的压缩
echarts采用geojson格式的地图进行自定义或者扩展,而采用这种格式,免不了会出现一大堆坐标值,echarts为了减少地图文件的大小,对polygon对象的坐标数组进行了压缩,压缩算法为Zig ...
echarts地图地名显示_echarts地图省份名称自定义位置和居中解决办法
Echarts 中国地图热力图开发过程中发现省会名字堆在一起毫无美感便集众家之所长review一下首先呢,地图上显示名称的位置为其省会的坐标位置.所以在调整的时候修改其坐标位置来调整省会名称显示 ...
百度地图多标注显示以及自定义图标
** 百度地图多标注显示以及自定义图标 ** 效果图: HTML部分 <style>*{margin:0px;padding:0px} html{font-size: 100%;} bod ...
【百度地图API·javascriptapi】地图定位、创建自定义图标、获取用户点击位置
引言地图在网页上的应用远不止于展示,我们可以借助百度地图定位用户的当前位置,在地图上创建自定义的标记,或者在用户点击地图的时候,获取用户点击位置的经纬度. 定位百度地图给用户提供了专门的定位api ...
html5 自定义标签图例,奥维互动地图浏览器电脑版中自定义标签图标的增加方法...
这篇文章讲的是奥维互动地图浏览器电脑版中自定义标签图标的增加方法,感兴趣的小伙伴可以来学习一下哦. 奥维互动地图浏览器电脑版中自定义标签图标的增加方法 1.点击菜单:系统---数据管理---自定义图标 ...
百度地图添加自定义图标标注以及自定义动画效果
百度地图添加自定义图标标注以及自定义动画效果 1.添加自定义图标标注 2.添加自定义动画效果 2.1.标注对象marker的构成 2.2.自定义动画效果实现过程 2.3.最终实现效果上次写的是添加自 ...
android百度地图定位自定义图标,Android应用开发之android 百度地图自定义圆，更改默认图标等常用方法...
本文将带你了解Android应用开发之android 百度地图自定义圆,更改默认图标等常用方法,希望本文对大家学Android有所帮助. 总结了一下百度地图常用的方法(前提是集成百度地图环境成功): ...
android百度地图画圆,Android应用开发之android 百度地图自定义圆，更改默认图标等常用方法...
本文将带你了解Android应用开发android 百度地图自定义圆,更改默认图标等常用方法,希望本文对大家学Android有所帮助. 总结了一下百度地图常用的方法(前提是集成百度地图环境成功): 1 ...
echarts 世界地图标点_Echarts自定义实现标点地图
发表于2021-1-16 16:30 悬赏1 未解决楼主请问如何修改下面的脚本能够实现Echarts自定义的标点地图(这段代码的option部分加上格式化出来的数据res能够在Echarts上能够 ...
html百度地图标记图标,百度地图api之换自定义标注图标
百度地图API自定义地图 html,body{margin:0;padding:0;} .iw_poi_title {color:#CC5522;font-size:14px;font-weight: ...

echarts 地图自定义图标_echarts 地图自定义图标Symbol 及其颜色

echarts 地图自定义图标_echarts 地图自定义图标Symbol 及其颜色相关推荐

最新文章

热门文章