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代码就好了

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 echarts 生成 svg,需要先准备好地数据,然后使用 echarts 的 geo 组件进行绘制。具体步骤如下: 1. 准备地数据,可以从 echarts 官网下载或者使用第三方提供的地数据。 2. 引入 echarts 库和地数据。 3. 创建一个 div 容器,用于显示地。 4. 初始化 echarts 实例,并设置容器和主题。 5. 配置 geo 组件,设置地类型、地数据、缩放级别等。 6. 配置 series 组件,设置数据和样式。 7. 调用 echarts 实例的 setOption 方法,将配置项传入。 下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>echarts生成svg</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="map" style="width: 800px; height: 600px;"></div> <script type="text/javascript"> // 引入地数据 echarts.registerMap('china', { "type": "FeatureCollection", "features": [ // 省份数据... ] }); // 初始化echarts实例 var myChart = echarts.init(document.getElementById('map'), 'light'); // 配置geo组件 myChart.setOption({ geo: { map: 'china', roam: true, zoom: 1.2, label: { show: true, fontSize: 12, color: '#000' }, itemStyle: { areaColor: '#f5f5f5', borderColor: '#999' } }, series: [{ type: 'map', map: 'china', data: [ // 数据... ], label: { show: true, fontSize: 12, color: '#000' }, itemStyle: { areaColor: '#ff0000' } }] }); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值