echarts人体含水量（象形柱图）更改SVG（性别占比或其他占比百分比）
在官网示例中的象形图是这样的：
如何将右边的svg更换成自己需要展示的图片百分比呢？（如下图）
第一种方法： 在iconfont官网中寻找自己合适的图标点击下载（iconfont-阿里巴巴矢量图标库）
选择“svg下载”：
将下载好的svg文件右键用浏览器打开：（F12查看源码）
右侧就是我们需要的svg代码了：
M781.186088 616.031873q17.338645 80.573705 30.59761 145.848606 6.119522 27.537849 11.219124 55.075697t9.689243 49.976096 7.649402 38.247012 4.079681 19.888446q3.059761 20.398406-9.179283 27.027888t-27.537849 6.629482q-5.099602 0-14.788845-3.569721t-14.788845-5.609562l-266.199203-155.027888q-72.414343 42.836653-131.569721 76.494024-25.498008 14.278884-50.486056 28.557769t-45.386454 26.517928-35.187251 20.398406-19.888446 10.199203q-10.199203 5.099602-20.908367 3.569721t-19.378486-7.649402-12.749004-14.788845-2.039841-17.848606q1.01992-4.079681 5.099602-19.888446t9.179283-37.737052 11.729084-48.446215 13.768924-54.055777q15.298805-63.23506 34.677291-142.788845-60.175299-52.015936-108.111554-92.812749-20.398406-17.338645-40.286853-34.167331t-35.697211-30.59761-26.007968-22.438247-11.219124-9.689243q-12.239044-11.219124-20.908367-24.988048t-6.629482-28.047809 11.219124-22.438247 20.398406-10.199203l315.155378-28.557769 117.290837-273.338645q6.119522-16.318725 17.338645-28.047809t30.59761-11.729084q10.199203 0 17.848606 4.589641t12.749004 10.709163 8.669323 12.239044 5.609562 10.199203l114.231076 273.338645 315.155378 29.577689q20.398406 5.099602 28.557769 12.239044t8.159363 22.438247q0 14.278884-8.669323 24.988048t-21.928287 26.007968z
复制这段代码到echarts中，从path://后面替换成自己的图，展示如右图（可以自行更换一下宽高）
第二种方法： 在iconfont官网如果找不到合适的图，可以去这个网站自己编辑合适的SVG图案（SVG 在线编辑器 | 菜鸟工具）
保存后就是SVG的文件，重复以上方法浏览器打开复制SVG代码就好了
echarts人体含水量（象形柱图）更改SVG（性别占比或其他占比百分比）相关推荐
- echarts象形柱图整体颜色渐变
@独孤求败12138 象形柱图整体颜色渐变 echarts中的象形柱图颜色渐变只能局部内部渐变,但是我想要实现整体渐变,怎么做呢?经过我大量的搜索和官方文档及API的研究,好像并不提供这一功能,那只能 ...
- echarts 柱状图圆柱_ECharts象形柱图
象形柱图在 ECharts 系列中使用series[i]-pictorialBar表示,它利用图片和形状表现数据,具体来说它既可以用图形的长宽变形表现数据,也可以用图形的个数.甚至是图形的颜色.透明度 ...
- echarts象形柱图自定义样式（类似柱状图）
象形柱图是可以设置各种具象图形元素(如图片.SVG PathData 等)的柱状图,往往用在信息图中,用于有至少一个类目轴或时间轴的直角坐标系上. 先上一个简单的效果: 其实实现思路主要在于:绘制具有 ...
- echarts分段式的象形柱图
最近做项目UI那边那边提了个比较少见的需求,如图: 我一开始想到的自然是用element ui的进度条来做,但找了许久都没找到这种的样式效果. 于是考虑用柱状图,如果这三个数据只用一个柱状图自然很难实 ...
- Echarts 自定义象形柱图Spirits
** Echarts 自定义象形柱图Spirits 效果 封装的组件,使用时可直接换spirit与spirit1改变图片 ** //外部调用方法 <echarts2 class="pe ...
- echarts 象形柱图pictorialBar
象形柱图可以被想象为是个柱状图,但是柱状图的柱子并不显示,这些柱子称为基准柱,根据基准柱来定位和显示各种象形图形1.配置datadata:[{value:n,symbol:'circle', 自定义图 ...
- 迪赛智慧数——柱状图（象形柱图）：水果VC含量排行榜
效果图 水果和蔬菜一样都含有丰富的维生素,我们人体如果缺少了某样维生素,补充的方法最好是从天然食物中摄取,吃水果是最好的选择,水果里面富含丰富的维生素C.维生素B族.维生素E等.下面是给大家整理的富含 ...
- 从繁到简so easy，象形柱图尽显数据可视化直观、炫酷本色
一提到数据可视化.excel数据生成图表.数据可视化处理等等,大家第一时间想到的是饼图.折线图.柱形图等,有那么一个组件它一直低调的存在着,但却是所有组件中对数据的呈现最形象.最直观的,它就是象形柱图 ...
- 特殊的象形柱图echarts
效果图 html <!DOCTYPE html> <html> <head><meta charset="UTF-8"><ti ...
最新文章
- php序列化数据无法反解析,PHP-反序列化数据不起作用
- vscode 显示多个文件_优秀的 VS Code 前端开发扩展
- html设置顶部对齐,HTML / CSS文本从div顶部对齐
- 【转】ELK是什么能做什么怎么做
- 毕业了，就忘掉导师吧
- Java RandomAccessFile writeShort（）方法与示例
- python加载文件并显示文件内容到qtextedit上_如何在python中读取QTextedit？
- VS和IIS的一些问题
- （转）Spring中的事务操作
- 人走茶凉！三星关闭最后一家中国手机工厂 因为打不过其他国产厂商？
- 关机时长时间停留在”正在保存设置“的解决办法
- 浅析 Spring 中的事件驱动机制
- [转]PDF在线阅读开发经验（FlexPaper+SWFTools+SaveAsPDFandXPS）
- 【浏览器】谷歌浏览器自带翻译失效
- java 在pdf中插入图片_新手教程！如何在PDF文件中插入图像
- 怎样理解封装，继承，多态！三者的区别？
- 新概念2-课文名称和知识点
- 各种机器学习分类模型的优缺点
- 实现pygame自定义鼠标外形
- 强训之【走方格的方案数和另类加法】