echarts飞机航线图修改飞机的样式

echarts飞机航线图修改飞机的样式

在项目开发中使用到了Echarts的飞机航线图,但默认的动画图标是飞机,因为地图上使用,不能固定大小,只能使用矢量图,官方举例:
echarts飞机航线图修改飞机的样式_第1张图片
因为业务,我想把小飞机换成其救护车的图标。官方举例代码只是:

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';

//飞机矢量图动画配置项
{
     name: item[0] + ' Top10',
       type: 'lines',
       coordinateSystem: 'leaflet',
       zlevel: 2,
       symbol: ['none', 'arrow'],
       symbolSize: 10,
       effect: {
           show: true,
           period: 6,
           trailLength: 0,
           symbol: planePath,
           symbolSize: 15
       },
       lineStyle: {
           normal: {
               color: color[i],
               width: 1,
               opacity: 0.6,
               curveness: 0.2
           }
}

查阅百度,整理加自己测试, 需要更换矢量图路径,解决办法如下

  1. 设计图片样式保存为 svg 格式
    echarts飞机航线图修改飞机的样式_第2张图片
  2. 用文本编辑器打开图片
    内容为xml格式
    echarts飞机航线图修改飞机的样式_第3张图片
    格式化文档
    echarts飞机航线图修改飞机的样式_第4张图片
    将 中的d="…" 中的内容复制出来
  3. 替换内容
    用将复制的内容替换path://后的内容
    在这里插入图片描述
  4. 如果图片复杂,会有有多个path
    在代码中可以建立多个 var img1=‘path://…’;
    拼接图形:img=img1+img2+。。。
    echarts飞机航线图修改飞机的样式_第5张图片
    到此飞机样式已被替换为设计的图片样式
    echarts飞机航线图修改飞机的样式_第6张图片

你可能感兴趣的:(echarts学习)