echarts标出点的行进方向

qwlbwm

于 2024-06-14 09:34:22 发布

阅读量326

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qwlbwm/article/details/135822406

版权

当使用echartsd的type=lines时可以实现点与点之间的行进效果，可以更直观的看出点与点之间方向。试验了一下，特为记录，使用echart版本为v5.4.3,代码如下

1.从起点到终点的一条路径效果

  series: [
          {
            data: [[x1,y1],[x2,y2],[x3,y3]],
            type: "line",
            // type: "scatter",
            // smooth: true,
            connectNulls: false,
             
          },
          {
            type: "lines",
            polyline: true,
            coordinateSystem: "cartesian2d",
            smooth: false,
            zlevel: 1,
            effect: {
              show: true,
              smooth: true,
              period: 10,//轨迹速度
              symbolSize: 4,
              trailLength:0.5 //拖行轨迹长度
            },
            lineStyle: {
              color: "#FD1111",//轨迹颜色
              width: 2, //宽度
              opacity: 0,
              curveness: 0,
              cap: "round",
            },

            data: [{coords:[[x1,y1],[x2,y2],[x3,y3]]}],
          },

在这里插入图片描述

当polyline=true时，data中coords可以为多个点，这样即可实现了从起点到终点的一条路径效果，

2.每个点之间都需要路径效果

 series: [
          {
           data: [[x1,y1],[x2,y2],[x3,y3]],
            type: "line",
            // type: "scatter",
            // smooth: true,
            connectNulls: false,

          },
          {
            type: "lines",
            polyline: false,
            coordinateSystem: "cartesian2d",
            smooth: false,
            zlevel: 1,
            effect: {
              show: true,
              smooth: true,
              period: 10,
              symbolSize: 4,
              trailLength:0.5 //拖行轨迹长度
            },
            lineStyle: {
              color: "#FD1111",
              width: 2,
              opacity: 0,
              curveness: 0,
              cap: "round",
            },

            data: [{coords:[[x1,y1],[x2,y2]]},{coords:[[x2,y2],[x3,y3]]},....],
          },