"
<img src=""http://static.oschina.net/uploads/space/2016/0513/161413_j3B2_1419431.jpg"" alt="""" />
我想把小飞机换成其他资源,比如卡车。但是官方给的代码只是:
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
只是给了一个path,难道这是定义在了echart.js中的吗,不能改成其他的图片吗?怎么才能更改呢?
"
可以的。我是这么解决的。
我使用SVGDesign(百度可以搜到),自己设计需要的图形,然后另存为svg格式,用文本编辑器打开,找到以下片段,例如:
<path transform="matrix(1.0000,0.0000,0.0000,1.0000,142.5000,321.0000)" d="L80.0625,-119.0000L-91.5000,72.0000L-22.8750,119.0000L91.5000,-87.0000L80.0625,-118.0000L80.0625,-117.0000L80.0625,-119.0000" style="fill-opacity:1.0000;fill:#000000;stroke-opacity:1.0000;stroke-width:1.0469;stroke:#000000 "/>
<path transform="matrix(0.9987,0.0513,0.0000,1.0013,364.0849,330.5044)" d="L-95.2103,-95.4844L24.7231,109.1251L76.2734,71.3510L95.2103,55.6118L-66.8050,-109.1251L-94.1582,-94.4352L-95.2103,-94.4352L-95.2103,-95.4844" style="fill-opacity:1.0000;fill:#000000;stroke-opacity:1.0000;stroke-width:1.0776;stroke:#000000 "/>
将<path>中的d="...",复制粘贴到源代码 path://后面即可替换为自己的图形了。
若果设计的图形复杂的话,会有多个<path>标签;在代码中可以建立多个 var img1='path://..';
拼接图形:img=img1+img2+。。。
var planePath = 'path://M1136.047896 339.882267C1112.706905 143.149344 1017.345943-0.2756 900.268988 0.0004L358.6862 1.290399c-117.106954 0.276-211.762917 144.067944-234.275909 340.954867C42.146324 391.197247-0.27366 490.974208 0.00134 606.394163c0.184 85.699967 24.016991 162.533937 69.902973 216.394916l0.46 191.364925 212.804916-0.49-0.276-112.077956 697.337728-1.687 0.276 112.076957 212.805917-0.521-0.46-191.364925c45.639982-54.014979 69.134973-131.001949 68.919973-216.700916-0.245-115.205955-43.185983-214.890916-125.725951-263.506897zM358.9312 74.320371l541.583788-1.289c75.392971-0.184 141.491945 101.98596 166.489935 240.563907-11.532995-2.299999-23.648991-3.709999-36.193986-4.446999 0-0.307 0.338-0.92 0.062-0.889999-101.89396 0.246-70.055973 0.154-141.799944 0.337999s-46.559982 0.092-118.118954 0.276l-523.669796 1.257c-19.016993 0.031-36.990986 2.085999-53.983979 5.551998C217.807255 176.920331 283.538229 74.473371 358.9312 74.320371zM218.298255 702.030126c-46.590982 0.092-84.317967-42.787983-84.440967-95.973963-0.123-53.093979 37.419985-96.249962 83.980967-96.372962 46.376982-0.092 84.103967 42.879983 84.256967 95.974962 0.123 53.277979-37.389985 96.249962-83.796967 96.371963z m656.972743-18.126993l-488.365809 0.583c-76.12997 0.184-77.78597-131.124949-0.307-131.308949l488.366809-1.166c71.219972-0.184 71.527972 131.707949 0.306 131.891949z m168.667934 16.133994c-46.468982 0.122-84.195967-42.757983-84.318967-95.943963-0.122-53.093979 37.419985-96.279962 83.858967-96.372962 46.499982-0.122 84.256967 42.849983 84.379967 95.973962 0.03 53.278979-37.450985 96.280962-83.919967 96.342963z';######这个就是了######
登录 网址https://www.iconfont.cn/ ,下载你想要的的矢量图svg文件,里面的<path d=‘XXX’>XXX就是矢量图路径,应用到迁徙图中path=' path:// XXX',就可以引用不一样的图标了
"版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。