echarts中自定义图片的矢量路径

在echarts象形柱图中要使用自定义的图片有三种格式，如下图：

前面两种方式我们项目中也常用到，第三种是矢量路径，如何获取这个矢量路径呢，方法如下：

我们可以去阿里巴巴矢量图标库找到自己想要的图标，移入图标，点击下载按钮小图标
点击复制svg代码

3. 把复制到的代码粘贴到文档或者记事本里面，path标签里面的d属性值复制

4. 将复制出来的字符串前面加上path://组成所需要的矢量路径

最终
‘path://M812.032 119.808q50.176-5.12 87.552 8.192t62.464 37.376 36.352 55.808 7.68 62.976-21.504 59.392-51.712 44.544q-45.056 22.528-88.064 40.448t-82.432 29.696-73.216 15.872-60.416-2.048q-13.312 61.44-22.528 134.656t-9.216 150.016q0 35.84 1.536 71.68t3.584 65.536q2.048 33.792 5.12 65.536l-149.504 0q1.024-19.456 3.072-51.2 1.024-26.624 2.048-69.632t1.024-105.472q0-79.872 10.24-152.576t23.552-131.072q-39.936 9.216-84.992-1.024t-90.112-34.304-87.04-59.392-74.752-76.288q-21.504-26.624-28.672-53.248t-2.56-52.224 18.432-48.128 32.256-40.96q16.384-15.36 38.912-23.552t48.64-9.216 53.248 4.096 52.736 16.384q25.6 12.288 54.784 33.28t56.32 48.128 50.176 57.856 38.4 61.44q16.384-28.672 43.008-54.784t58.88-46.592 67.584-34.304 69.12-16.896z’

放入echarts图中就变成我们想要的小图标啦，可以进行颜色、大小、透明度进行设置

echarts中自定义图片的矢量路径相关推荐

echarts中自定义图片的矢量路径设置
echarts中自定义图片的矢量路径设置在echarts象形柱图中要使用自定义的图片有三种格式,如下图: 前面两种方式我们项目中也常用到,第三种是矢量路径,如何获取这个矢量路径呢,方法如下: 第一步 ...
jeecg uedit 自定义图片上传路径
jeecg uedit 图片上传配置自定义物理路径,简单描述:我们知道 jeecg 中使用的 uedit 默认图片上传路径为 "当前项目\plug-in\ueditor\jsp\upload ...
计算机动作路径教案,PPT中自定义动画之动作路径的应用教案.doc
演示文稿拓展(二) --Powerpoint2003自定义动画之动作路径的应用课题"动作路径"的应用课时第2课时知识技能:1.学会在Powerpiont中设置 " ...
Echarts 实现自定义图片关系图
百度echart 实现带图片头像的关系图 <!DOCTYPE html> <html style="height: 100%"><head>&l ...
在echarts中自定义提示框内容
1.期望效果以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容. 如下图,鼠标滑过每个数据项时, 第1张是默认提示框: 第2张是处理成 ...
在word中插入pdf中的图片（矢量图）
看了好多的教程,包括百度经验插入的图片不是清晰度不够要么就是显示不好,就算做个随笔. 总结方法有四: 功能区ー插入ー文本区中的"对象" "对象"选项下有&quo ...
HTML中提取图片的SRC路径
Public Function CheckName(Str) Checkname=True Dim Rep,pass Set Rep=New RegExp ' 建立正则表达式. Rep.Global= ...
OpenCV搜索文件夹中的图片并保存图片路径和信息
具体如下: // OpenCVdemo.cpp : Defines the entry point for the console application. //#pragma once// C/C+ ...
ECharts中自定义地图——js 引入示例
以四川省为例. 引用js <script src="js/echarts.min.js"></script><script src=" ...

echarts中自定义图片的矢量路径

echarts中自定义图片的矢量路径相关推荐

最新文章

热门文章